Guía React
Guía React
INTRODUCCIÓN
A REACT
REACT
¿QUÉ ES NODE?
Node.js es un entorno de tiempo de ejecución de JavaScript (de ahí su terminación en .js
haciendo alusión al lenguaje JavaScript). Este entorno de tiempo de ejecución en tiempo
real incluye todo lo que se necesita para ejecutar un programa escrito en JavaScript.
Imagina que vas a un restaurante. El mesero te atiende, toma tu orden y la lleva a la cocina,
luego va y atiende a otra mesa, mientras el cocinero prepara tu orden. Entonces, una misma
persona puede atender múltiples mesas, no tiene que esperar que el cocinero termine de
preparar una orden antes de pasar a atender a otra mesa. A esta naturaleza o arquitectura
la llamamos asíncrona o no bloqueante. Así es como funcionan las aplicaciones de Node.js.
El camarero viene a ser un hilo o thread asignado para manejar solicitudes. De esta forma
un sólo hilo puede manejar múltiples solicitudes.
En Node.js no tenemos ese inconveniente, ya que un solo hilo se encarga de procesar todas
las peticiones. Cuando llega una petición, el hilo de Node.js se encarga de procesarla. Si
necesitamos hacer una petición a una base de datos, nuestro hilo no tiene que esperar hasta
que la BD devuelva una respuesta. Mientras la petición a la base de datos se esta
procesando, nuestro hilo puede atender otras peticiones. Cuando la respuesta de la base
de datos está lista, se coloca en algo llamado Event Queue o Cola de Eventos. Node.js está
constantemente monitoreando esta cola de eventos a mediante el Event Loop , de tal
manera que cuando la respuesta a alguna petición pendiente esta lista, Node.js la toma, la
procesa y la devuelve.
1
• Request: petición
Éste tipo de arquitectura hace a Node.js ideal para construir aplicaciones que involucran una
gran cantidad de accesos a disco, peticiones de red (consultar bases de datos, consultar
servicios web), etc. Podemos atender una gran cantidad de clientes sin la urgencia de
disponer de más hardware. Y es por ésto que las aplicaciones en Node.js son altamente
escalables.
NODE Y REACT
Nodejs es la plataforma más conveniente para alojar y ejecutar un servidor web para una
aplicación React. Es por dos razones principales:
• Utilizando un NPM (Node Package Manager), Node trabaja junto con el registro de
NPM para instalar fácilmente cualquier paquete a través de la CLI de NPM.
• Node agrupa una aplicación React en un solo archivo para una fácil compilación
usando webpack y varios otros módulos de Node.
¿QUÉ ES NPM?
npm es el Node Package Manager que viene incluido y ayuda a cada desarrollo asociado a
Node.
2
• Como una herramienta de línea de comandos que ayuda a interactuar con
plataformas en línea, como navegadores y servidores. Esto ayuda a instalar y
desinstalar paquetes, gestión de versiones y gestión de dependencias necesarias
para ejecutar un proyecto.
Para usarlo, debes instalar node.js, ya que están desarrollados de forma agrupada.
La utilidad de línea de comando del administrador de paquetes Node permite que node.js
funcione correctamente.
Para usar paquetes, tu proyecto debe contener un archivo llamado package.json. Dentro de
ese archivo, encontrarás metadatos específicos para los proyectos.
• La versión inicial
• Descripción
• El punto de entrada
• Comandos de prueba
• El repositorio git
• Palabras clave
• Licencia
• Dependencias
• Dependencias de desarrollo
Los metadatos ayudan a identificar el proyecto y actúan como una línea de base para que
los usuarios obtengan información al respecto.
NPX
Desde la versión 5.2.0 de npm, npx está preinstalado con npm. Así que es más o menos
estándar hoy en día.
npx es también una herramienta CLI cuyo propósito es facilitar la instalación y la gestión de
las dependencias alojadas en el registro npm.
Ahora es muy fácil ejecutar cualquier tipo de ejecutable basado en Node.js que
normalmente se instalaría a través de npm.
NPX VS NPM
npx nos ayuda a evitar el versionado, los problemas de dependencia y la instalación de
paquetes innecesarios que sólo queremos probar.
También proporciona una forma clara y fácil de ejecutar paquetes, comandos, módulos e
incluso listas y repositorio de GitHub.
3
¿QUÉ ES REACT?
React es una librería Javascript focalizada en el desarrollo de interfaces de usuario. Así se
define la propia librería y evidentemente, esa es su principal área de trabajo. Sin embargo,
lo cierto es que en React encontramos un excelente aliado para hacer todo tipo de
aplicaciones web, SPA (Single Page Application) o incluso aplicaciones para móviles. Para
ello, alrededor de React existe un completo ecosistema de módulos, herramientas y
componentes capaces de ayudar al desarrollador a cubrir objetivos avanzados con
relativamente poco esfuerzo.
Por tanto, React representa una base sólida sobre la cual se puede construir casi cualquier
cosa con Javascript. Además facilita mucho el desarrollo, ya que nos ofrece muchas cosas
ya listas, en las que no necesitamos invertir tiempo de trabajo.
CARACTERÍSTICAS DE REACT
Al igual que otros marcos web JavaScript, React.SJ tiene muchas características principales
que podrían ser su consideración. Son:
• Composición de componentes.
• Isomorfismo.
• Elementos y JSX.
Estos son los que consideramos son las princípiales ventajas de React por sobre otros
marcos web.
4
CREATE REACT APP (PRIMEROS PASOS EN REACT)
A no ser que seas un experto desarrollador frontend, la mejor alternativa para dar los
primeros pasos con React es usar el paquete create-vite. Te permitirá empezar muy rápido
y ahorrarte muchos pasos de configuración inicial de un proyecto.
Generalmente cuando se construye un sitio o app web se tiene que lidiar con una serie de
herramientas que forman parte del tooling de un frontend developer, como gestores de
paquetes, de tareas, transpiladores, linters, builders, live reload, etc. Toda esta serie de
herramientas pueden tener su complejidad si se quieren aprender con el suficiente detalle
como para comenzar a usarlas en un proyecto, pero son esenciales para un buen
workflow.
Por tanto, si queremos ser detallistas y proveernos de las herramientas necesarias para ser
productivos y eficientes, se puede hacer difícil la puesta en marcha en un proyecto
Frontend en general. Ahí es donde entra Create Vite, ofreciéndonos todo lo necesario
para comenzar una app con React, pero sin tener que perder tiempo configurando
herramientas. Comenzaremos una app con un par de comandos sencillos, obteniendo
muchos beneficios de desarrolladores avanzados.
Luego vamos a seleccionar React y vamos a seleccionar Javascript para finalizar la configuracion de
nuestro proyecto
Mediante el anterior comando se cargarán los archivos de un proyecto vacío y todas las
dependencias de npm para poder contar con el tooling que hemos mencionado. Una vez
terminado el proceso, que puede tardar un poco, podemos entrar dentro de la carpeta de
nuestra nueva app.
cd mi-app/
npm install
Observarás que, una vez lanzas el comando para iniciar la app, se abre una página en tu
navegador con un mensaje de bienvenida. Ese es el proyecto que acabamos de crear. No
obstante, en el propio terminal nos indicarán la URL del servidor web donde está
funcionando nuestra app, para cualquier referencia posterior. De manera
predeterminada será el http://localhost:5173/, aunque el puerto podría cambiar si el 5173 está
ocupado.
5
CARPETAS DE NUESTRA APP REACT
El listado de nuestra app recién creada es bastante sencillo. Observarás que tenemos varias
carpetas:
• public: esta es la raíz de nuestro servidor donde se podrá encontrar el vite.svg que
sería el icono de la aplicación.
• src: aquí es donde vamos a trabajar principalmente para nuestro proyecto, donde
vamos a colocar los archivos de nuestros componentes React.
• package.json, que contiene información del proyecto, así como enumera las
dependencias de npm, tanto para desarrollo como para producción. Si conoces npm
no necesitarás más explicaciones.
• .gitignore que es el típico archivo para decirle a git que ignore ciertas cosas del
proyecto a la hora de controlar el versionado del código.
• index.html que es el unico html de la pagina donde se va a mostrar todo nuestros contenido
6
import React from 'react';
function App() {
return (
<div>
<h1>Hola Mundo!</h1>
<p>Bienvenidos a los primeros pasos con React</p>
</div>
);
}
export default App;
Las funciones que utilizamos para implementar a los componentes React, son funciones
de JavaScript y retornan elementos de React que describen lo que debe aparecer
en la pantalla.
DOM VIRTUAL
El Virtual DOM es una representación en memoria del DOM real (que es el DOM que
conocemos de JS) que actúa de intermediario entre el estado de la aplicación y el
DOM de la interfaz gráfica que está viendo el usuario.
Puesto que cada elemento es un nodo en el árbol del DOM, cada vez que se produce un
cambio en cualquiera de estos elementos (o un nuevo elemento es añadido) se genera un
nuevo Virtual DOM con el árbol resultante. Dado que este DOM es virtual, la interfaz gráfica
aún no es actualizada, sino que se compara el DOM real con este DOM virtual con el
objetivo de calcular la forma más óptima de realizar las cambios (es decir, de renderear
los menos cambios posibles). De este modo se consigue reducir el coste en términos de
rendimiento de actualizar el DOM real.
7
El siguiente gráfico ejemplifica el proceso:
1. State Change:En este primer paso, se produce un cambio en el estado del nodo de color
de rojo, lo cual provoca que se genere en memoria un Virtual DOM con el árbol resultante
tras ese cambio.
2. Compute diff: A continuación se realiza la comparación entre el árbol del Virtual DOM y
el del navegador (DOM real) con el fin de detectar los cambios producidos. Como veis,
el cambio afecta a toda la rama descendiente del nodo cuyo estado cambió.
8
Además, React traslada los cambios al DOM de la interfaz gráfica de forma masiva lo cual
también incrementa el rendimiento. Esto se debe a que en vez de enviar múltiples
cambios, React los junta todos en uno para reducir el número de veces que la interfaz
gráfica debe pintarse.
Finalmente, otra de las ventajas que nos proporciona React es la abstracción de todo el
proceso de actualización del DOM que nos proporciona. Es decir, nos permite olvidarnos
de actualizar los atributos o el valor de los nodos que componen nuestra interfaz gráfica ya
que todo esto sucede a nivel interno.
JSX
JSX es una extensión de la sintaxis de JavaScript para su uso en React. JSX, produce
elementos de React. Un elemento es un bloque más de las aplicaciones de React y
describe lo que quieres ver en pantalla.
{className = ‘saludo’},
Hola Mundo );
RENDERIZAR UN ELEMENTO
El renderizado se va a ejecutar dentro del return de cada componente, es decir, todo lo
que se va a "mostrar" (renderizar) va a ser lo que contenga ese return. El
document.getById("root") y el ReactDOM.render() se ejecutan una vez y es el primer paso
para que después se renderice el componente App.js (componente principal por defecto)
y cada componente que este mismo llame.
9
Supongamos que tenemos las siguiente variables:
Para renderizarlo, imagina que tenemos el siguiente div en alguna parte del HTML:
<div id=”root”></div>
Para renderizar un elemento de React en un nodo raíz del DOM, pasa ambos a
ReactDOM.render()
ReactDOM.render(
element.
document.getById(“root”)
);
ACTUALIZANDO EL ELEMENTO
React solo actualiza lo que sea necesario. ReactDOM compara el elemento y sus hijos con
el elemento anterior, y solo aplica las actualizaciones del DOM que son necesarias para
que el DOM esté en el estado deseado.
COMPONENTES
React, como dijimos es una librería JavaScript para crear interfaces de usuario
dependiendo de su estado. Las aplicaciones React se construyen mediante componentes,
los cuales son elementos independientes y pueden ser reutilizados, además, describen
cómo tienen que visualizarse y cómo tienen que comportarse. Los componentes permiten
separar la interfaz de usuario en piezas independientes.
1 2
6
5
4
1) Un SideBar
2) Un Header
10
3) Cada carta es su propio componente
4) Los botones Principal, Explorar, Suscripciones, Biblioteca e Historial. Cada uno de esos
botones es un componente, que vive dentro del componente Sidebar.
COMPONENTES EN REACT
Conceptualmente, los componentes son como las funciones de JavaScript. Aceptan
entradas arbitrarias (llamadas “props”) y devuelven a React elementos que describen lo que
debe aparecer o se debe ver en la pantalla. Los props son las propiedades o información
que viaja de un componente padre a un hijo.
function Welcome(props) {
Esta función es un componente de React válido porque acepta un solo argumento de objeto
“props” (que proviene de propiedades) con datos y devuelve un elemento de React.
Llamamos a dichos componentes “funcionales” porque literalmente son funciones
JavaScript.
render() {
11
CICLO DE VIDA DE UN COMPONENTE
Vimos que existen dos formas de crear componentes (funcionales y de clases).
render() {
Para entender mejor el ejemplo, es necesario saber qué React.Component, tiene tres ciclos
de vida:
a. Montaje
b. Actualización
Cuando sufre algún cambio las propiedades (props) o el estado (state) del componente.
c. Desmontaje
12
FUNCTIONAL COMPONENT (REACT HOOKS)
Habíamos hablado de los componentes “funcionales” que son funciones JavaScript, y
habíamos dicho que la forma más sencilla de definir un componente es escribir una
función de JavaScript. Es aquí, donde entran los React Hooks.
Los Hooks son una nueva característica en React 16.8. Estos te permiten usar el estado y
otras características de React sin escribir una clase. Los vamos a utilizar junto con los
componente funcionales y de esa manera, evitar usar clases y solo trabajar con un solo tipo
de componente.
function Example() {
return (
<div>
Click me
</button>
</div>
);
Esta nueva función useState es el primer “Hook” que vamos a aprender, pero este ejemplo
es solo una introducción. ¡No te preocupes si aún no tiene sentido!
• 100% compatibles con versiones anteriores. Los Hooks no tienen cambios con
rupturas con respecto a versiones existentes.
13
¿PERO QUÉ ES UN HOOK?
Los Hooks son funciones que te permiten “enganchar” el estado de React y el ciclo de vida
desde componentes de función. Los hooks no funcionan dentro de las clases — te permiten
usar React sin clases. (No recomendamos reescribir tus componentes existentes de la
noche a la mañana, pero puedes comenzar a usar Hooks en los nuevos si quieres).
React proporciona algunos Hooks incorporados como useState. También puedes crear tus
propios Hooks para reutilizar el comportamiento con estado entre diferentes componentes.
Primero veremos los Hooks incorporados.
HOOK DE ESTADO
Este ejemplo renderiza un contador. Cuando haces click en el botón, incrementa el valor:
14
HOOK DE EFECTO
Es probable que hayas realizado recuperación de datos, suscripciones o modificación
manual del DOM desde los componentes de React. Llamamos a estas operaciones “efectos
secundarios” (o “efectos” para abreviar) porque pueden afectar a otros componentes y no
se pueden hacer durante el renderizado.
Por ejemplo, este componente establece el título del documento después de que React
actualiza el DOM:
En el ejemplo que tenemos del useEffect, va a llamar las funciones sobre los componentes
de manera infinita, esto a veces nos puede ser útil, pero también nos puede generar un bucle
infinito, entonces supongamos que queremos cargar unas cartas, estas se van a cargar de
manera indefinida y va a romper nuestra pagina.
useEffect(() => {
})
15
Este es el que nos puede generar un bucle infito.
2. Para ejecutar algo solo una vez después del montaje del componente (se procesará una
vez), debe usar:
useEffect(() => {
// hará algo solo una vez si pasas un arreglo vacío []
// tener en cuenta que ese componente se renderizará una vez (con los
valores predeterminados) antes de que lleguemos aquí
}, [])
useEffect(() => {
}, [data, data2] )
• Realizar redirecciones
16
Routes
Genera un árbol de rutas y a partir de este nos permite reemplazar la vista con el
componente que coincide con la URL de nuestra barra de navegación y nos va a
renderizar solamente dicho componente.
Route
Con Route podemos definir las rutas de nuestra aplicación, quizás sea el componente más
importante de React Router para llegar a comprender todo el manejo de esta
librería. Cuando definimos una ruta con Route le indicamos que componente debe
renderizar.
Path: la ruta donde debemos renderizar nuestro componente podemos pasar un string o un
array de string.
Exact: Solo vamos a mostrar nuestro componente cuando la ruta sea exacta. Ej: /home
=== /home.
Strict: Solo vamos a mostrar nuestro componente si al final de la ruta tiene un slash.
Ej: /home/ === /home/
Sensitive: Si le pasamos true vamos a tener en cuenta las mayúsculas y las minúsculas de
nuestras rutas. Ej: /Home === /Home
Un URL (Uniform Resource Locator) hace referencia más comúnmente a páginas web
(HTTP), pero también puede aplicarse a la transferencia de archivos (FTP), correo
electrónico (mailto), acceso a bases de datos (ODBC) y muchas otras aplicaciones.
Una URL HTTP también puede describir la ubicación de recursos externos como una
imagen, hoja de estilo, script e incluso una sección específica dentro de un documento
HTML. Las URL completas o al menos parciales aparecen en la barra de direcciones de la
mayoría de los navegadores web.
17
PARTES DE UNA URL
1. Protocolo
El esquema suele ser el nombre de un protocolo, que define cómo se obtendrá el recurso.
Sin embargo, esquemas como "archivo" y "mailto" no especifican un protocolo. Los clientes,
como los navegadores web, se conectan a sitios web a través del Protocolo de transferencia
de Hipertexto, también conocido como HTTP.
2. Subdominio
Aunque www es el más común, los subdominios se pueden configurar con cualquier valor
que consista en caracteres ASCII alfanuméricos que no distinguen entre mayúsculas y
minúsculas. Se permiten guiones si están rodeados por otros caracteres ASCII u otros
guiones. Los subdominios también se pueden eliminar, acortando y simplificando toda la
URL.
• .com
• .edu
• .gov
• .mil
• .org
• .neto
18
Desde 1984 se crearon un puñado de nuevos dominios de nivel superior, pero el cambio
más significativo se produjo en 2012 cuando ICANN (Corporación de Internet para la
Asignación de Nombres y Números) autorizó la creación de casi dos mil nuevos dominios
de nivel superior.
5. Puerto
El propósito de un puerto es identificar de forma única diferentes procesos o aplicaciones
que se ejecutan en un solo servidor. Los números de puerto permiten que cada proceso o
aplicación comparta una conexión de red. Las URL públicas a menudo no incluyen un
número de puerto. En esos casos, se utiliza el puerto predeterminado del esquema. Los
puertos predeterminados para HTTP y HTTPS son 80 y 443, respetuosamente.
6. Ruta
Una ruta describe una ubicación específica dentro de un sistema de archivos. En el contexto
de una URL HTTP, una ruta describe un recurso específico, como un documento HTML.
7. Parámetro
Los parámetros contienen datos que se enviarán al servidor para procesamiento adicional.
Puede contener pares de nombre / valor separados por un ampersand (&), así:
?first_name=Alfred&last_name=Pennyworth
"Nombre: Alfred"
"Apellido: Pennyworth"
Luego, estos datos se pasan a los scripts del lado del servidor para su procesamiento. Si
esta es una consulta válida, el servidor devolverá información pertinente a Alfred
Pennyworth.
8. Etiqueta
Su función, entre otras cosas, consiste en permitir hacer scroll hasta un elemento en
concreto. Por ejemplo, si mandamos a alguien una URL que contenga una etiqueta, ésta le
dirigirá a la parte exacta de la página en cuestión.
19
TRABAJANDO CON REACT ROUTER
Teniendo todo listo ahora si vamos a nuestro editor de código y abrimos el archivo App.jsx que
está ubicado en src/App.jsx acá vamos a limpiar muchas cosas hasta que al
final tengamos algo como el siguiente código.
Este es nuestro componente Home que está dentro de una carpeta llamada pages/Home
y solo tenemos un h3 con un texto. Si vamos al navegador a http://localhost:5173/ vamos
a ver solo el texto. Así como este vamos a crear los componentes About y PageNotFound.
20
LINK
Con Link vamos a poder navegar por nuestra aplicación, este componente recibe las
siguientes propiedades.
To: le podemos pasar un string, object o una function para indicarle la ruta a la cual
queremos navegar.
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/asd">PageNotFound</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
21
Agregamos el siguiente código en nuestro componente App.js dentro del div con la clase
App, ahora podemos ver un menú de navegación en nuestra aplicación. Me falto mencionar
debemos hacer el import de Link.
// App.jsx
import {
BrowserRouter as Router,
Routes,
Route,
Link
} from "react-router-dom";
NAVIGATE
Con este componente podemos causar un redireccionamiento a una ruta diferente a la
ruta actual reemplazando el location actual y el historial de navegación.
To: es un propiedad de navigate donde le enviamos un string u objeto para decir hacia
dónde vamos a realizar el redireccionamiento.
HOOK USEPARAMS
Ahora vamos a ver unos Hooks que nos van a ayudar a realizar operaciones con los
componentes del navegador.
Con este Hook podemos acceder a los params de las rutas veamos un ejemplo para eso
debemos crear un nuevo componente el cual se va encargar de usar el hook y debemos
agregar un nuevo link al menú de navegación al igual que un Route
22
Lo primero es importar el hook y obtener el params que definimos en el Route,
con este hook es muy fácil acceder al params que indicamos en el Route si
vamos al navegador y damos click en el nuevo link que tiene como nombre User id 1
vamos a ver lo siguiente.
23
EJERCICIOS DE APRENDIZAJE
¡¡Vamos a ponernos manos a obra!! Ahora vamos a practicar lo visto en la guía con unos
ejercicios de React. Nota: recomendamos que para cualquier vista que vayan a realizar usen
BootStrap, de está manera podemos tener vistas de manera “rápida” y podemos trabajar
con React.
Para instalar una extensión en Visual Studio Code, haremos click en el siguiente botón:
Esto nos abrirá una pestaña que nos muestra las extensiones instaladas y nos da un
buscador para instalar más extensiones. En ese buscador, buscaremos alguna de las
extensiones mencionadas, cuando la encontremos, le daremos a Install.
24
Una vez que la hayamos instalado nos va a aparecer en nuestras extensiones instaladas
• main.jsx
o App
§ Ejemplo
2. Crear un proyecto compuesto por tres componentes bajo la misma jerarquía. Crear un
Navbar, Main y Footer.
25
• main.jsx
o App
§ Navbar
§ Main
§ Footer
Necesitamos hacer que Footer, Main y Navbar muestren al menos un dato, de la misma
manera que el ejercicio anterior.
3. Crear un Componente Main el cual llame dos veces a un mismo componente, es decir,
que Main anide a Hijo e Hijo.
• main.jsx
o App
§ Main
• Hijo
• Hijo
• main.jsx
o App
§ Navbar
§ Main1 o Main2
§ Footer
Al hacer click sobre las dos posibles opciones en el NavBar, se deberá cambiar entre
Main1 y Main2 dependiendo de la navegación. Para lograrlo se deberá instalar y usar
React Router Dom.
26
A continuación, se propone como será la jerarquía de los componentes
En la siguiente imagen se vera como establecer la navegación. Se sugiere ver los videos
explicativos que encontrarán en el canal de Youtube de Egg.
Se podrá crear un contador de clicks o crear un input que mediante onChange cambie
el valor del state. Cualquiera de las dos opciones, son validas para este ejercicio.
Una vez llamado los datos desde el servicio, hacer uso de useEffect en el componente
creado, deberá mostrar una lista compuesta de los nombres de los 20 primeros
personajes.
27