REACT

• React es una biblioteca JavaScript altamente eficiente y declarativa

que se utiliza para crear interfaces de usuario interactivas.
• Fue creado por el ingeniero de Facebook Jordan Walke y se lanzó en
mayo de 2013.
• En los últimos años, ha superado a sus rivales y ha establecido
firmemente su dominio.
• React te insita a crear código declarativo (indicas el qué, no el cómo)
y orientado a componentes.
COMPONENTES

• Un componente es un pieza de código que puede representar una

parte de la interfaz de usuario o una funcionalidad en particular que
se puede encapsular y reutilizar en diferentes partes de un desarrollo
o incluso en diferentes aplicaciones.
• Cada componente reaccionará a cambios internos (en su estado) o
externos (nuevas propiedades recibidas) y se volvera a redibujar
(renderizado) en la interfaz. Para ello React utiliza su Virtual DOM
que es una copia del DOM original del navegador para sólo hacer los
cambios necesarios en los nodos que hayan reaccionado y evitar
redibujar todo el árbol del DOM.
VENTAJAS
• Alto rendimiento: React es conocido por su alta eficiencia y flexibilidad. Se puede integrar
fácilmente con diferentes tecnologías. Se puede usar tanto para el lado del cliente como para el
lado del servidor.
• Recursos abundantes : como Facebook la mantiene, existe una gran cantidad de documentación
y recursos disponibles en la web que hace que la curva de aprendizaje sea muy fluida.
• Compatibilidad con versiones anteriores : la transición o migración de versiones anteriores a
nuevas es bastante fácil y retrocompatible.
• Estructura de componentes fácil de mantener: la arquitectura basada en componentes de React
ayuda a aumentar la reutilización del código y facilita bastante el mantenimiento de proyectos a
gran escala.
• Fuerte Comunidad: React tiene más de 1300 colaboradores en GitHub.
• Documentación Multi idioma.
DESVENTAJAS

• Complejo: muchos desarrolladores pueden encontrar en un inicio demasiado compleja la

curva de aprendizaje de React en comparación con otros frameworks como el caso de
Vue. Dicha complejidad puede ser innecesaria para proyectos a pequeña escala.
• JSX: el uso de JSX agrega otra capa de complejidad. JSX es un preprocesador que agrega
extensión de sintaxis XML a JavaScript. Aunque JSX ayuda a codificar el código React de
una manera más segura y rápida, puede ser difícil de comprender para los nuevos
desarrolladores.
• Necesidad de un ecosistema de muchas herramientas: React requiere una amplia gama
de herramientas para funcionar correctamente y ser compatible con otras tecnologías.
• Problemas de SEO: se sabe que las SPAs (Single Page Applications) creadas con React se
enfrentan a problemas de indexación por parte de los rastreadores y bots de motores de
búsqueda.
QUIÉN LO USA?

• Grandes empresas como Netflix, Yahoo, Airbnb, Instagram, Facebook,

WhatsApp, PayPal, Microsoft, la BBC, Aeroméxico, etc
Create React App
• Es una aplicación de consola que nos va a permitir crear aplicaciones React con cero
configuración
• Para crear una aplicación utilizamos el comando npx create-react-app seguido del nombre que le
quieras dar a tu aplicación.

• Un proyecto creado con create-react-app, además de React, incluye librerías como:

• Webpack: que se encarga de procesar y empaquetar nuestro código JavaScript (con sus
dependencias), archivos CSS y otros archivos estáticos como imágenes, vectores, fuentes, etc.
• Babel: que nos permite usar nuevas características de ECMAScript.
• PostCSS que es una librería para el procesamiento de CSS.
• Jest que es una librería para testing.
• etc.
React
1. Instalar Node js - https://nodejs.org/es/
2. Visual studio code – opcional
3. REACT – documentación - https://es.reactjs.org/
4. Crear App React - https://create-react-app.dev/
5. Vite - https://vitejs.dev/
6. Inicio rápido:
npm create vite@latest
React
1. Inicio rápido:
npm create vite@latest
1. Indique nombre del Proyecto
2. Seleccione framework: REACT
3. Seleccione Javascript
cd Proyecto
npm install
code .
npm run dev
Extensiones VSC
•ES7 React/Redux/React-Native/JS snippets
•Firebase Snippets
•generate-react-component
•React/Redux/react-router Snippets
•Reactjs code snippets
•Simple React Snippets
•vscode-icons
Iniciar un servidor
npm run dev

Limpiar el proyecto
JSX

Es una extensión de la sintaxis de JavaScript que produce elementos de

React.
Se recomienda usarlo con React para describir cómo debería ser la
interfaz de usuario. JSX puede recordarte a un lenguaje de plantillas,
pero viene con todo el poder de JavaScript.
JSX

Se puede usar:
• Dentro de estructuras de control como if y for.
• Asignarlo a variables.
• Aceptarlo como argumento o retorno en funciones.
• Expresiones JavaScript.
const element = <h1>Hello, world!</h1>;
Esta curiosa sintaxis de etiquetas no es ni un string ni HTML, Se llama JSX

guía oficial https://es.reactjs.org/docs/introducing-jsx.html

JSX
JSX es similar a HTML pero con algunas diferencias importantes:

Algunas reglas importantes:

• Toda etiqueta debe cerrarse por ejemplo <br> debera cerrarse a <br />.
• Los componentes deben devolver un sólo elemento padre.
• Algunos atributos HTML cambian como:
class por className.
for por htmlFor.
Los atributos de un elemento JSX pueden aceptar valores de tipo String entrecomillados o
expresiones JavaScript entre llaves, por ejemplo:
<img alt="Avatar" src={user.avatarURL} />
JSX

Por debajo JSX se transforma en código JavaScript. Por ejemplo, el siguiente código JSX.
<div class="active">Hola Mundo</div>
se transforma en el siguiente código JavaScript:
React.createElement("div", { className: "active" }, "Hola mundo");

La ventaja de JSX es que, como es JavaScript, podemos:

1. Ver algunos errores en tiempo de compilación.
2. Asignar JSX a variables. Por ejemplo:
const el = <p>Hola</p>;
3. Retornar JSX desde métodos. Por ejemplo:
JSX

Una restricción de JSX es que siempre debes tener un elemento raíz:

const el = (
<div>
<p>Hola</p>
<p>Mundo</p>
</div>
);
Cómo mezclar JSX con JavaScript

Para mezclar código JavaScript en JSX utiliza corchetes ({}):

const style = "active";
const title = "Hola Mundo";
<div className={style}>{title}</div>;
Componentes

• En React se introduce el concepto de componentes para crear la interfaz

gráfica de nuestra aplicación.
• Permiten separar el código y los elementos de la interfaz en pequeñas
piezas independientes y reutilizables que estarán aisladas una de otras.
• El objetivo es que cada componente sea independiente y encapsule su
marcado, estilos y estado. De esa forma los componentes pueden ser
reutilizables y la interfaz gráfica más fácil de mantener y evolucionar.
• Se le pueden pasar datos a un componente a través de algo llamado props
y devuelven a React elementos que describen lo que debe verse en
pantalla.
Componentes

• En React los datos fluyen de forma unidireccional, de componentes

padres a componentes hijos.
•React te permite definir componentes como clases o como funciones.
Tipos de componentes:
• Como una clase que extiende de Component con un método render
• Como una función que retorna lo que se va a renderizar
Tipos de Componentes

Como una clase que extiende de Component con un método render

import React, { Component } from "react";

class Title extends Component {

render() {
return <h1>Hola mundo</h1>;
}
}
Tipos de Componentes

Como una función que retorna lo que se va a renderizar

const Title = () => {

return <h1>Hola Mundo</h1>;
};
Cómo usar un componente?

• Para utilizar un componente debes importarlo y después incluirlo en

tu JSX como se muestra en el siguiente ejemplo:
import React from "react";
import Title from "./Title";

function App {
return <Title />;
}
Estado

El state son los valores internos que manejan la lógica y los datos de un
componente, permite que éste reaccione a cualquier cambio lo que hará que
se vuelva a renderizar en la interfaz.
El estado tiene 3 características importantes:
1. Es inmutable.
2.No se puede modificar directamente.
3.Es asíncrono.
• Para hacer cambios hay que hacer uso del método setState().
• El estado de un componente no es accesible desde otro componente
excepto de aquel que lo posee y lo asigna.
Estado

• La propagación del estado fluye de forma unidireccional y descendiente

(hacia abajo), esto significa que un componente padre puede pasar valores
de su estado a componentes hijos que lo recibirán como propiedades.
• En el momento que los valores del estado del padre sufran cambios esto
causará que tanto el padre como los hijos que recibieron esos valores como
propiedades se rendericen nuevamente y reaccionen a dicho cambio.
• Cada componente que se defina como una clase cuenta con un objeto
para almacenar información llamado state.
• Cada vez que cambia el state React vuelve a renderizar (pintar) el
componente en la vista.
Hooks

• Los Hooks son una nueva incorporación en React 16.8. Te permiten

usar estado y otras características de React sin escribir una clase.
¿Por qué se crearon los Hooks?
Las clases confunden a las personas y a las máquinas.
• Entender la estructura y reglas que implican crear una clase puede ser
una curva de aprendizaje lenta y requerir de ciertos conceptos, como
el manejo de this en JavaScript, por el contrario las funciones son
muy fáciles de entender y manipular incluso para personas que van
comenzando.
Tipos de Hooks

• Básicos (en el 100% de tus proyectos):

• useState.
• useEffect.
• Avanzados (tal vez no en todos tus proyectos):
• useContext.
• useRef.
• useReducer.
• useCallback.
• useMemo.
useState
• Permite manipular el estado de un componente funcional, se comporta como el objeto state y a la función
this.setState de los componentes de clase.
•Para usarlo, debemos importarlo desde la librería de React.
import React, { useState } from "react";
• para inicializar el hook asignaremos mediante la destructuración de arreglos 2 elementos:
1. El valor del estado
2. Un método para actualizarlo
•Adicionalmente le pasaremos como parámetro el valor inicial del estado al método useState.
export default function Componente() {
const [valor, setValor] = useState(0);
return <span>El valor del componente es {valor}</span>;
}
¡Gracias!