Tecnologia Front-End

UNIVERSIDAD MAYOR DE SAN ANDRÉS Facilitador: PhD.
MIGUEL DE SEVILLA CHAVEZ GORDILLO

CARRERA DE INFORMÁTICA PROGRAMACIÓN WEB II
Clase 1 React js
UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA
¿Qué es front-end y qué es

backend?
La tecnología frontend es el que se centra en la creación de interfaces para
las páginas y aplicaciones web. Siendo una colección de elementos dentro
de la página web, con los que el usuario puede ver e interactuar. Mientras
que el backend es todo lo contrario, ya que realmente no se puede ver los
resultados en la interfaz. Debido a que el código backed se ejecuta en el
lado del servidor en lugar del navegador. El usuario interactúa con el
backend con mucha frecuencia como con el frontend, pero simplemente
no se puede ver.
Tecnologías relevantes
de front-end
1. HTML
HTML (HyperText Markup Language o Lenguaje de Marcado de
Hipertexto) es el núcleo del desarrollo frontend. Gracias a esta
tecnología, se puede crear la estructura de un sitio web. En los
elementos HTML se puede brindar opciones para agregar imágenes,
formularios, contenedores y mucho más.
2. CSS
Otra tecnología frontend fundamental es CSS (Cascading Style
Sheets o Hojas de Estilo en Cascada), esta tecnología ayuda a crear
algunas reglas de estilo adicionales a la estructura HTML. Ademas
esta tecnología permite que una aplicación web sea responsiva (que
se vea bien en todos los tamaños de las pantallas) y sea más
interactiva con algunas animaciones, gracias a esta tecnología.
UNIVERSIDAD MAYOR DE SAN ANDRÉS Facilitador: PhD. MIGUEL DE SEVILLA CHAVEZ GORDILLO
3. JavaScript
JavaScript es un lenguaje de programación que te permite
implementar funciones complejas en páginas web. De modo que
cualquier característica que este del lado del frontend puede utilizar
JavaScript. Ya sean actualizaciones de contenido, mapas
interactivos, animación de Gráficos 2D/3D, etc., JavaScript está
involucrado.
4. Vue
Vue es un framework basado en JavaScript con el que se pueden
crear interfaces de usuario de manera sencilla, y esta diseñado para
ser utilizado incremetalmente. Siendo su librería central enfocada
solo en la capa de visualización, y con una fácil integración con otras
librerías o proyectos existentes.
5. React
React es una librería construida sobre JavaScript, que por su
naturaleza declarativa y basada en componentes permite la creación
de interfaces de usuario interactivas de forma sencilla, por medio de
actualización y renderización.
6. Angular
Angular es un framework que también se basa en JavaScript, y
permite facilitar la creación y programación de aplicaciones web de
una sola página, las webs SPA (Single Page Application) o también
las denominadas PWA (Progressive Web App). Angular utiliza la
arquitectura Modelo – Vista – Controlador (MVC) el cual como se
utiliza en el desarrollo de aplicaciones web.
7. TypeScript
TypeScript es un lenguaje de programación construido a un nivel
superior de JavaScript. Esto quiere decir que TypeScript permite al
lenguaje tener varias características adicionales que hacen que
podamos escribir un código con menos errores, sencillo, coherente
y fácil de probar.
8. Next
Next es una herramienta que ayuda a crear sitios web de manera
rápida con la ayuda de React. Los beneficios de este framework son
numerosos, tanto para las aplicaciones de nuestros clientes como
para el equipo de desarrollo. El rendimiento de las páginas web
basadas en el framework Next es sobresaliente debido a las

múltiples técnicas de optimización que utiliza, como la
representación previa.
9. React Native
React Native es un framework basado en React el cual permite crear
aplicaciones para iOS y Android. Gracias a React Native, los
desarrolladores pueden crear aplicaciones móviles que se ven y se
sienten “nativas».
10. Flutter
Flutter es un framework con el cual se pueden crear aplicaciones
nativas pararos y Android. Es uno de los frameworks frontend de
desarrollo más rápido para diseños flexibles y efectivos, gracias a su
facilidad, su curva de aprendizaje es muy rápida ayudando a crear
aplicaciones para ambos sistemas operativos de una manera muy
rápida.
¿Qué tecnología frontend se debe de usar?
No existe una respuesta absoluta para estar pregunta. Sin embargo
existen algunas cuestiones a considerar antes de tomar la elección.
A continuación escribo algunos de los factores que puedes
considerar antes de elegir determinada tecnología frontend:
 Tamaño del proyecto.
 Escalabilidad.
 Experiencia del equipo en determinada o determinadas
tecnologías.
 Madurez de la tecnología.
 Documentación de la tecnología.
 Soporte o actualizaciones con la que cuenta la tecnología.
 Adaptabilidad al proyecto o a los requerimientos.
 Compatibilidad con el sistema operativo, plataforma, etc.
 Ritmo de entrega (facilidad y rapidez en el proceso desarrollo).
¿Qué es un framework?
Un framework es un esquema o marco de trabajo que ofrece una estructura base
para elaborar un proyecto con objetivos específicos, una especie de plantilla que
sirve como punto de partida para la organización y desarrollo de software.
Utilizar frameworks puede simplificar (y mucho) una tarea o proceso, de ahí
que se trate de una de las herramientas habituales que manejan los Digital
Workers, porque les ayuda a ser más ágiles y productivos (y eso mola,
¿verdad?).
Generalmente, los frameworks son usados por programadores porque

permiten acelerar el trabajo y favorecer que este sea colaborativo, reducir
errores y obtener un resultado de más calidad. Pero no pienses que estas
estructuras son cosa solo del departamento IT, qué va, en el mundo online hay
frameworks para prácticamente todo: para definir el viaje de compra de un
cliente, para aplicar mejoras a un producto digital y tener más conversiones… Y
es que, hoy en día, la automatización es la clave para conseguir que
cualquier proceso de trabajo sea rápido y eficaz sin perder un ápice de
calidad.
¿Para qué sirve un framework?
Un framework sirve para acometer un proyecto en menos tiempo, y
en el sector de la programación, con un código más limpio y
consistente, de manera rápida y eficaz. El framework ofrece una
estructura base que los programadores pueden complementar o
modificar según sus objetivos.
El uso de frameworks permite, principalmente, agilizar procesos de
desarrollo porque podemos reutilizar herramientas o módulos.
El uso de frameworks permite, principalmente, agilizar procesos de
desarrollo porque podemos reutilizar herramientas o módulos: ya
tienes el ‘esqueleto’ sobre el que trabajar. El hecho de escribir código
o desarrollar una aplicación más fácilmente te sirve para tener una
mejor organización y control de todo el código elaborado, pudiendo
usarlo nuevamente en el futuro.
 Puedes reutilizar código tantas veces como sea necesario.
Asimismo, puedes optimizarlo, con todas las ventajas que ello
conlleva.
 También puedes afrontar tareas propias de programación de forma
automatizada, lo que aumentará tu velocidad (o la de tu equipo de
trabajo) a la hora de programar.
Reducir tiempos implica una mayor productividad, del mismo modo
que reutilizar recursos te lleva a minimizar riesgos. Por ello, usar uno
o varios frameworks supone una gran ayuda para programadores y
desarrolladores, ya que facilita sus tareas de forma considerable.
¿Por qué te conviene usar frameworks?
Te conviene usar frameworks porque contar con una plantilla para
llevar a cabo el trabajo facilita las tareas, reduce los
tiempos, evita errores y, en consecuencia, ayuda a que todos los
implicados en el proyecto estén más satisfechos.
En el mercado puedes encontrar frameworks específicos para

un lenguaje de programación concreto. Aunque también los hay que
no dependen de un único lenguaje.
Cada vez más, los programadores buscan la optimización de su
trabajo, independientemente del lenguaje que empleen. Como hemos
indicado, usar frameworks les permite esa agilización y
automatización de procesos, pero, llegados a este punto, no
podemos dejar de lado otro tipo de ventajas:
1. Favorecen el trabajo colaborativo: contar con esa estructura base,
con unos estándares de programación, permite que distintos
miembros de un mismo equipo trabajen de manera coordinada.
Además, favorece que se comparta código y se reduzca la curva de
aprendizaje de otros miembros del equipo o la tuya propia.
2. Minimiza la posibilidad de riesgos: usar frameworks hace más
fácil encontrar errores pero, sobre todo, evitarlos. Te garantiza, por
lo tanto, mayor seguridad y, además, es habitual que exista una
comunidad de desarrolladores detrás del mismo a los que hacerles
llegar cualquier duda relativa al uso del framework.
3. Fácil acceso a recursos e información útil: existen infinidad de
frameworks y, cuando estos están muy extendidos, resulta muy
fácil encontrar módulos, herramientas o información para usarlos.
Además, te pueden permitir utilizar programación avanzada a la
que, de otra manera, sería mucho más difícil llegar.
Tecnología Front End

Programación Framework
React JS
LA PAZ - BOLIVIA
2023
CONTENIDO MÍNIMO
Descargar Node.js
https://nodejs.org/en/download
Instalar
En cmd verificar instalación C:\Users\mik>node --version
v20.3.1
Descargar Visual Studio Code

https://code.visualstudio.com/download
Instalar
Crear proyecto React js En escritorio
C:\Users\mik>cd Desktop
C:\Users\mik\Desktop>npx create-react-app proyecto-react
Arrancar el servidor
C:\Users\mik\Desktop>cd proyecto-react
C:\Users\mik\Desktop\proyecto-react>npm start
http://localhost:3000/
Abrir Visual Studio Code

Abrir el proyecto creado en vscode
ESTRUCTURA DEL PROYECTO

Código Clase 01
import React from "react";
import ReactDOM from "react-dom/client";
const rootElement = document.getElementById("root");

const root = ReactDOM.createRoot(rootElement);
//const root=ReactDOM.createRoot(document.getElementById("root"))
function Greeting() {
return <h1>Hola mundo desde componente</h1>;
}
function add() {
var x = 2;
var y = 3;
return x + y;
}
root.render(
<h1>Hola mundo!!!</h1>
);
root.render(Greeting());
root.render(
<div>
{Greeting()}
{Greeting()}
{Greeting()}
{Greeting()}
</div>
);
root.render(
<div>
<Greeting></Greeting>
<Greeting></Greeting>
</div>
);
//self closing
root.render(
<div>
<Greeting />
<Greeting />
<Greeting />
<Greeting />
<Greeting />
<Greeting />
</div>
);
root.render(<h1>La suma es {add()}</h1>)

Tecnologia Front-End

Cargado por

Copyright:

Formatos disponibles

Tecnologia Front-End

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tecnologia Front-End

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD MAYOR DE SAN ANDRÉS Facilitador: PhD.

MIGUEL DE SEVILLA CHAVEZ GORDILLO

¿Qué es front-end y qué es

basadas en el framework Next es sobresaliente debido a las

Generalmente, los frameworks son usados por programadores porque

En el mercado puedes encontrar frameworks específicos para

Tecnología Front End

Descargar Visual Studio Code

Abrir Visual Studio Code

ESTRUCTURA DEL PROYECTO

const rootElement = document.getElementById("root");

root.render(<h1>La suma es {add()}</h1>)

También podría gustarte