📱

S7. React
SUMARIO
7.1 Introducción a React
7.1.1 ¿Qué es React?
7.1.2 Ventajas de usar React
7.1.3 Breve historia y contexto
7.2 Configuración del entorno de desarrollo
7.2.1 Instalación de Node.js y npm
7.2.2 Creación de un proyecto de React utilizando Vite
7.2.3 Estructura de directorios típica de un proyecto de React
7.3 Componentes en React
7.3.1 Concepto de componentes
7.3.2 Creación de componentes funcionales y de clase
7.3.4 Propiedades (props) y estado (state)
7.3.5 Renderización de componentes
7.3.6 Comunicación entre Componentes

S7. React 1
 7.4 JSX (JavaScript XML)
7.4.1 Introducción a JSX
7.4.2 Sintaxis de JSX
7.4.3 Renderización de elementos JSX en el DOM
7.5 Renderización condicional
7.5.1 Uso de condicionales en JSX
7.5.2 El operador ternario
7.5.3 Uso de if en expresiones JSX
7.6 Listas y Keys
7.6.1 Renderización de listas de elementos
7.6.2 Uso de la función map() para iterar sobre un array
7.6.3 Importancia de las keys en elementos iterados
7.7 Manejo de eventos
7.7.1 Asociación de eventos a elementos JSX
7.7.2 Manejo de eventos en componentes funcionales y de clase
7.7.3 Eventos comunes como onClick, onChange, etc.
7.8 State y Ciclo de Vida de los Componentes en React

7.8.1 Concepto de Estado en React

7.8.2 Uso del Método setState

7.8.3 Ciclo de Vida de los Componentes de Clase

7.9 Los Hooks en React

7.9.1 El Hook useState()

7.9.2 Sintaxis de useState()

7.9.3 Uso de useState()

7.9.4 Múltiples Estados en un Componente

7.9.5 Ventajas de useState()

S7. React 2
 7.1 Introducción a React:
7.1.1 ¿Qué es React?
React es una biblioteca de JavaScript desarrollada por Facebook que se utiliza
para construir interfaces de usuario interactivas y reactivas. Es especialmente
adecuada para la creación de aplicaciones web de una sola página (SPA) y
aplicaciones de una sola página (PWA).
React se centra en la creación eficiente de componentes reutilizables y en la
gestión eficaz del estado de la aplicación. Lo que distingue a React de otros
marcos y bibliotecas es su enfoque en la manipulación eficiente del DOM virtual.

7.1.2 Ventajas de usar React

1. Componentización: React fomenta la división de la interfaz de usuario en
componentes reutilizables y autónomos. Esto facilita el mantenimiento y la
escalabilidad de las aplicaciones, ya que cada componente puede ser
desarrollado, probado y actualizado de forma independiente.

2. Virtual DOM: React utiliza un DOM virtual para realizar actualizaciones

eficientes en la interfaz de usuario. En lugar de actualizar directamente el
DOM del navegador cada vez que cambia el estado de la aplicación, React
compara el DOM virtual con el DOM real y solo aplica los cambios necesarios.
Esto mejora significativamente el rendimiento de las aplicaciones.

3. Unidireccionalidad de datos: React sigue el principio de unidireccionalidad de

datos (one-way data binding), lo que significa que los datos fluyen en una sola
dirección, desde un componente principal hacia sus componentes
secundarios. Esto hace que el flujo de datos sea más predecible y facilita la
depuración de errores.

4. Amplia comunidad y ecosistema: React cuenta con una gran comunidad de

desarrolladores y una amplia gama de bibliotecas y herramientas relacionadas
que facilitan el desarrollo de aplicaciones. Además, muchas empresas líderes,
como Facebook, Instagram y Airbnb, utilizan React en sus proyectos.

5. Compatibilidad con JSX: React permite el uso de JSX (JavaScript XML), una
sintaxis que combina JavaScript con HTML, lo que facilita la creación de

S7. React 3
 componentes y la representación de la interfaz de usuario de manera más
declarativa y legible.

7.1.3 Breve historia y contexto

React fue desarrollado por Facebook y se lanzó inicialmente como código abierto
en 2013. Desde entonces, ha experimentado un rápido crecimiento y ha sido
adoptado por muchas empresas y desarrolladores en todo el mundo. React se
utiliza en una variedad de aplicaciones web y móviles, incluidas las aplicaciones
de Facebook e Instagram.

En 2015, Facebook lanzó oficialmente React Native, una extensión de React que
permite el desarrollo de aplicaciones móviles multiplataforma para iOS y Android
utilizando componentes de React. Esto amplió aún más la popularidad de React al
permitir a los desarrolladores utilizar las mismas habilidades y componentes para
construir aplicaciones web y móviles.

Hoy en día, React sigue siendo una de las bibliotecas de JavaScript más
populares y está respaldada por una comunidad activa y un equipo de desarrollo
dedicado. Su evolución constante y su capacidad para abordar desafíos
complejos en el desarrollo de interfaces de usuario lo convierten en una elección
sólida para los desarrolladores que buscan crear aplicaciones web modernas y
efectivas.

7.2 Configuración del entorno de desarrollo

7.2.1 Instalación de Node.js y npm
Node.js es un entorno de ejecución de JavaScript que permite ejecutar JavaScript
en el lado del servidor. npm (Node Package Manager) es un administrador de
paquetes de JavaScript que se utiliza para instalar y gestionar bibliotecas y
dependencias de proyectos. Antes de comenzar a trabajar con React, es esencial
tener Node.js y npm instalados en tu sistema. Aquí se muestra cómo hacerlo:

1. Instalación de Node.js:

Ve al sitio web oficial de Node.js en https://nodejs.org/.

Descarga la versión LTS (Long-Term Support) recomendada para tu

sistema operativo (Windows, macOS o Linux).

S7. React 4
 Ejecuta el instalador y sigue las instrucciones para completar la
instalación.

2. Verificación de la instalación:

Abre una terminal o línea de comandos.

Ejecuta los siguientes comandos para verificar que Node.js y npm se

hayan instalado correctamente:

node -v
npm -v

Si los comandos muestran las versiones de Node.js y npm, significa que la

instalación fue exitosa.

7.2.2 Creación de un proyecto de React utilizando Vite

Vite es una herramienta de desarrollo rápida y flexible que permite configurar
proyectos de React de manera eficiente. Para crear un nuevo proyecto de React
con Vite, sigue estos pasos:

1. Instalación de Vite:

Abre una terminal y ejecuta el siguiente comando para instalar Vite de

forma global en tu sistema (asegúrate de tener npm instalado):

npm install -g create-vite

2. Creación de un nuevo proyecto de React:

En la ubicación deseada, crea una nueva carpeta para tu proyecto y

navega hasta ella en la terminal.

Ejecuta el siguiente comando para crear un proyecto de React con Vite:

Esto creará un proyecto de React llamado "my-react-app" utilizando la
plantilla de React.

create-vite my-react-app --template react

S7. React 5
 3. Navegación al directorio del proyecto:

Ve al directorio del proyecto recién creado:

cd my-react-app

4. Inicio del servidor de desarrollo:

Ejecuta el siguiente comando para iniciar el servidor de desarrollo:

Esto iniciará el servidor de desarrollo de Vite y abrirá la aplicación en tu
navegador por defecto.

npm run dev

7.2.3 Estructura de directorios típica de un proyecto de React

La estructura de directorios de un proyecto de React creado con Vite es bastante
sencilla y está diseñada para ser intuitiva. Aquí tienes una estructura de
directorios típica:

my-react-app/
├── node_modules/ # Dependencias del proyecto (generad
as automáticamente)
├── public/ # Archivos públicos (página HTML, im
ágenes, etc.)
│ ├── index.html # Página HTML principal
│ └── favicon.ico # Icono de la aplicación
├── src/ # Código fuente de la aplicación Rea
ct
│ ├── App.js # Componente principal de la aplicac
ión
│ ├── index.js # Punto de entrada de la aplicación
│ ├── assets/ # Archivos de recursos (imágenes, es
tilos, etc.)
│ └── components/ # Componentes de React
├── .gitignore # Archivo de configuración para Git
(opcional)

S7. React 6
 ├── package.json # Archivo de configuración de npm y
dependencias
├── README.md # Documentación del proyecto (opcion
al)
├── vite.config.js # Configuración de Vite
└── yarn.lock # Bloqueo de versiones de paquetes
(opcional, si usas Yarn)

Esta estructura básica proporciona un punto de partida organizado para tu

proyecto de React. El código fuente de la aplicación se encuentra en la carpeta
"src", mientras que los archivos públicos, como la página HTML principal, se
encuentran en la carpeta "public".

La configuración de Vite se encuentra en el archivo "vite.config.js", y las

dependencias del proyecto se definen en "package.json".
Puedes agregar más carpetas y archivos según sea necesario para tu proyecto
específico.

7.3 Componentes en React

Los componentes son la piedra angular de React. Proporcionan una forma
reutilizable y modular de construir interfaces de usuario en aplicaciones web.
Los componentes permiten dividir la interfaz de usuario en partes más pequeñas
y manejables, lo que facilita la construcción y el mantenimiento de aplicaciones
complejas.
En React, los componentes pueden ser funcionales o de clase, y pueden tener
propiedades (props) y estado (state).

7.3.1 Concepto de componentes

En React, un componente es una pieza autónoma y reutilizable de la interfaz de
usuario. Puede ser una pequeña parte de la interfaz de usuario, como un botón o
un cuadro de texto, o una parte más grande, como un encabezado, una barra
lateral o incluso una página completa.

Los componentes encapsulan la estructura y el comportamiento de una parte

específica de la interfaz de usuario, lo que facilita su desarrollo, prueba y

S7. React 7
 reutilización.

7.3.2 Creación de componentes funcionales y de clase

1. Componentes funcionales:

Los componentes funcionales son simplemente funciones de JavaScript

que devuelven elementos JSX (JavaScript XML) que representan la
interfaz de usuario.

Se utilizan principalmente para componentes que no necesitan mantener

un estado interno o métodos de ciclo de vida.

Son más simples y concisos que los componentes de clase y se han

vuelto más populares gracias a los hooks de React.

Ejemplo de un componente funcional:

import React from 'react';

function MiComponenteFuncional(props) {
return <div>Hola, {props.nombre}</div>;
}

export default MiComponenteFuncional;

2. Componentes de clase:

Los componentes de clase son clases de JavaScript que extienden la

clase React.Component . Pueden mantener un estado interno y tienen acceso
a métodos de ciclo de vida de React.

Se utilizan cuando se necesita un control más avanzado sobre el estado y

el ciclo de vida de un componente.

Ejemplo de un componente de clase:

import React, { Component } from 'react';

class MiComponenteDeClase extends Component {

S7. React 8
 constructor(props) {
super(props);
this.state = { contador: 0 };
}

render() {
return (
<div>
Contador: {this.state.contador}
<button onClick={() => this.setState({ contador: t
his.state.contador + 1 })}>
Incrementar
</button>
</div>
);
}
}

export default MiComponenteDeClase;

7.3.4 Propiedades (props) y estado (state)

Propiedades (props):

Las propiedades son datos que se pasan desde un componente padre a un

componente hijo.

Las propiedades son inmutables y se utilizan para pasar información de un

componente a otro.

Los componentes pueden acceder a sus props a través del objeto props .

Ejemplo de uso de props:

function Saludo(props) {
return <div>Hola, {props.nombre}</div>;
}

S7. React 9
 Estado (state):

El estado es un objeto que se utiliza para almacenar datos que pueden

cambiar durante la vida de un componente.

Los componentes de clase pueden usar el estado mediante this.state ,

mientras que los componentes funcionales pueden usar el hook useState
para gestionar el estado.

Cuando el estado de un componente cambia, React se encarga de volver a

renderizar el componente para reflejar esos cambios en la interfaz de
usuario.

Ejemplo de uso de estado en un componente de clase:

class Contador extends Component {

constructor(props) {
super(props);
this.state = { contador: 0 };
}

render() {
return (
<div>
Contador: {this.state.contador}
<button onClick={() => this.setState({ contador: th
is.state.contador + 1 })}>
Incrementar
</button>
</div>
);
}
}

Comprender y dominar el uso de componentes, props y estado es esencial para

construir aplicaciones efectivas con React, ya que estos conceptos son
fundamentales para la estructura y el comportamiento de la interfaz de usuario.

S7. React 10
 7.3.5 Renderización de componentes
La renderización es el proceso de representar un componente en el DOM
(Documento Objeto Modelo).
En React, la función render() o el retorno de un componente funcional define
cómo se verá ese componente en la interfaz de usuario.

Cuando se crea o se actualiza un componente, React llama automáticamente a su

método render() para determinar cómo se debe representar en la pantalla.

7.3.6 Comunicación entre Componentes

En React, la comunicación entre componentes es esencial para construir
aplicaciones complejas y modulares.

Existen varias formas de lograr esto, incluyendo el paso de props de un

componente padre a un componente hijo, el uso de props para la comunicación, y
la elevación del estado (lifting state up).

Paso de Props de un Componente Padre a un Componente Hijo

En React, los datos pueden fluir de un componente padre a un componente
hijo a través de las props (propiedades). Las props son objetos que contienen
información que un componente hijo puede utilizar para renderizarse. Aquí
hay un ejemplo simple de cómo pasar props de un componente padre a un
componente hijo:

import React from 'react';

function Padre() {
const mensaje = 'Hola desde el componente padre';

return <Hijo mensaje={mensaje} />;

}

function Hijo(props) {
return <p>{props.mensaje}</p>;
}

S7. React 11
 En este ejemplo, el componente Padre pasa la prop mensaje al componente
Hijo , que lo muestra en su renderización.

Uso de Props para la Comunicación

Las props se utilizan para transmitir datos desde un componente padre a un

componente hijo. El componente hijo puede acceder a estas props y utilizar
los datos contenidos en ellas para personalizar su renderización o realizar
otras acciones. Las props son de solo lectura y no pueden ser modificadas
por el componente hijo.

import React from 'react';

function MiComponente(props) {
return <p>Nombre: {props.nombre}</p>;
}

En este ejemplo, el componente MiComponente recibe una prop llamada nombre y

la utiliza en su renderización.

Elevación del Estado (Lifting State Up)

La elevación del estado es un patrón en React que se utiliza para compartir

datos entre componentes que no tienen una relación directa de padre a hijo.
En lugar de pasar datos directamente de un componente a otro, se almacenan
en un componente superior (padre) y se pasan como props a los
componentes necesarios.
Esto permite que varios componentes compartan y mantengan sincronizados
los mismos datos.

import React, { useState } from 'react';

function App() {
const [contador, setContador] = useState(0);

const incrementarContador = () => {

setContador(contador + 1);

S7. React 12
 };

return (
<div>
<p>Contador: {contador}</p>
<Hijo incrementarContador={incrementarContador} />
</div>
);
}

function Hijo(props) {
return (
<div>
<button onClick={props.incrementarContador}>Incremen
tar</button>
</div>
);
}

export default App;

En este ejemplo, el estado contador se encuentra en el componente App y se

pasa como prop incrementarContador al componente Hijo . Cuando se hace clic
en el botón en el componente Hijo , se llama a la función incrementarContador en
el componente App , lo que actualiza el estado y, a su vez, actualiza la interfaz
de usuario.
La elevación del estado es útil cuando varios componentes necesitan acceder
y modificar los mismos datos, permitiendo una comunicación efectiva entre
componentes en diferentes niveles de la jerarquía de componentes.

En resumen, la comunicación entre componentes en React se logra pasando

props de un componente padre a un componente hijo, utilizando props para
transmitir datos y aplicando la elevación del estado para compartir datos entre
componentes que no tienen una relación directa de padre a hijo. Estas técnicas
son fundamentales para construir aplicaciones modulares y reutilizables en React.

S7. React 13
 7.4 JSX (JavaScript XML)
7.4.1 Introducción a JSX
JSX es una extensión de JavaScript utilizada en React para definir la estructura y
el contenido de la interfaz de usuario de manera declarativa. JSX combina
JavaScript con sintaxis similar a XML o HTML, lo que facilita la creación de
componentes de React y la representación visual de la interfaz de usuario. JSX es
una parte esencial de React y permite la creación de componentes de manera
más legible y mantenible.

7.4.2 Sintaxis de JSX

La sintaxis de JSX es similar a la de HTML, pero en realidad es código JavaScript.
A continuación, se presentan algunas de las características clave de la sintaxis de
JSX:

1. Elementos JSX: Los elementos JSX se parecen a las etiquetas HTML y se

crean utilizando sintaxis de ángulos < > . Por ejemplo:

const elementoJSX = <h1>Hola, Mundo!</h1>;

2. Expresiones JavaScript: Puedes insertar expresiones JavaScript dentro de

elementos JSX utilizando llaves { } . Esto permite la interpolación de variables
y evaluación de expresiones dentro de un elemento JSX. Por ejemplo:

const nombre = "Juan";

const elementoJSX = <p>Hola, {nombre}</p>;

3. Atributos: Los atributos en JSX se escriben de manera similar a los atributos

HTML, pero se utilizan nombres de atributos de JavaScript en lugar de
cadenas. Por ejemplo:

const elementoJSX = <img src="imagen.jpg" alt="Una imagen"

/>;

S7. React 14
 4. Elementos anidados: Los elementos JSX pueden anidarse dentro de otros
elementos JSX, creando así una estructura jerárquica de componentes. Por
ejemplo:

const lista = (
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
);

7.4.3 Renderización de elementos JSX en el DOM

La renderización de elementos JSX en el DOM es un proceso fundamental en
React. Para renderizar un elemento JSX en el DOM, sigue estos pasos:

1. Importa React: Asegúrate de importar la biblioteca React en tu archivo si aún

no lo has hecho. Esto es necesario para usar JSX.

import React from 'react';

2. Crea un componente o elemento JSX: Define un componente de React o

simplemente crea un elemento JSX que deseas renderizar.

const miElemento = <h1>Hola, Mundo!</h1>;

3. Selecciona un elemento DOM de destino: Elige un elemento del DOM donde

deseas que se renderice tu componente o elemento JSX. Puedes hacerlo
utilizando el método getElementById u otros métodos de selección de
elementos.

<div id="app"></div>

4. Renderiza en el DOM: Utiliza el método ReactDOM.render() para renderizar el

componente o elemento JSX en el elemento DOM de destino. Asegúrate de
que el tercer argumento sea el punto de montaje en el DOM.

S7. React 15
 import ReactDOM from 'react-dom';

ReactDOM.render(miElemento, document.getElementById('ap
p'));

Cuando se llama a ReactDOM.render() , React se encargará de actualizar

eficientemente el DOM virtual y el DOM real para que coincidan, asegurando que
tu interfaz de usuario refleje correctamente el estado de tu aplicación.

En resumen, JSX es una parte esencial de React que simplifica la creación de

componentes y la representación de la interfaz de usuario. Combina JavaScript y
sintaxis similar a XML o HTML para crear elementos declarativos y legibles.
Luego, puedes utilizar ReactDOM para renderizar estos elementos en el DOM y
construir tus aplicaciones de React.

7.5 Renderización condicional

En React, la renderización condicional se refiere a la capacidad de mostrar o
renderizar elementos JSX basados en ciertas condiciones o lógica de negocio.
Esto permite que las aplicaciones de React sean dinámicas y respondan a
diferentes estados y datos.
Hay varias formas de lograr la renderización condicional en React, y aquí se
explorarán algunas de las técnicas más comunes.

7.5.1 Uso de condicionales en JSX

Puedes usar declaraciones condicionales en JSX para decidir qué elementos se
renderizarán en función de una condición. Aquí hay un ejemplo de cómo hacerlo
utilizando una declaración if :

import React from 'react';

function MiComponente(props) {
if (props.mostrarMensaje) {
return <div>Este mensaje se muestra si mostrarMensaje es
verdadero.</div>;

S7. React 16
 } else {
return <div>Este mensaje se muestra si mostrarMensaje es
falso.</div>;
}
}

export default MiComponente;

En este ejemplo, el componente MiComponente muestra un mensaje diferente según

el valor de la prop mostrarMensaje .

7.5.2 El operador ternario

El operador ternario ( ? : ) es una forma concisa de lograr la renderización
condicional en JSX. Permite especificar una condición y, en función de si esa
condición es verdadera o falsa, devuelve un resultado u otro. Aquí hay un
ejemplo:

import React from 'react';

function MiComponente(props) {
return (
<div>
{props.mostrarMensaje ? (
<p>Este mensaje se muestra si mostrarMensaje es verda
dero.</p>
) : (
<p>Este mensaje se muestra si mostrarMensaje es fals
o.</p>
)}
</div>
);
}

export default MiComponente;

S7. React 17
 En este ejemplo, el operador ternario se utiliza para decidir qué elemento <p> se
renderizará según el valor de mostrarMensaje .

7.5.3 Uso de if en expresiones JSX

Dentro de expresiones JSX, no puedes usar directamente una declaración if . Sin
embargo, puedes usar el operador ternario o una expresión lógica para lograr la
renderización condicional. Aquí hay un ejemplo que utiliza una expresión lógica
&& para mostrar un elemento si una condición es verdadera:

import React from 'react';

function MiComponente(props) {
return (
<div>
{props.mostrarMensaje && (
<p>Este mensaje se muestra si mostrarMensaje es verda
dero.</p>
)}
</div>
);
}

export default MiComponente;

En este caso, si mostrarMensaje es true , se renderizará el elemento <p> . Si es

false , no se mostrará nada.

Estas son algunas de las técnicas comunes para lograr la renderización

condicional en React. La elección de la técnica depende de tu situación específica
y de cuál consideres más legible y apropiada para tu código.
La renderización condicional es una parte esencial de la construcción de
interfaces de usuario dinámicas y receptivas en aplicaciones de React.

7.6 Listas y Keys

S7. React 18
 En React, es común trabajar con listas de elementos, como elementos de una lista
desplegable, elementos de una tabla, publicaciones de blog o cualquier otro
conjunto de datos.
La renderización de listas y la iteración sobre un array de datos se realiza de
manera eficiente utilizando la función map() y es una parte fundamental del
desarrollo de aplicaciones React.

7.6.1 Renderización de listas de elementos

Para renderizar una lista de elementos en React, puedes utilizar la función map()

para mapear cada elemento de un array de datos a elementos JSX que se

representarán en el DOM. Aquí hay un ejemplo simple de cómo hacerlo:

import React from 'react';

function ListaDeElementos(props) {
const elementos = props.datos.map((elemento, index) => (
<li key={index}>{elemento}</li>
));

return <ul>{elementos}</ul>;
}

export default ListaDeElementos;

En este ejemplo, props.datos es un array que contiene los elementos que

deseamos mostrar en una lista. La función map() itera sobre el array y crea un
elemento <li> para cada elemento en el array.

7.6.2 Uso de la función map() para iterar sobre un array

La función map() es una función de array en JavaScript que permite iterar sobre
cada elemento de un array y realizar una operación en cada uno de ellos. En el
contexto de React, se utiliza para mapear los elementos de un array a elementos
JSX que se renderizarán en el DOM.
La sintaxis básica de map() es la siguiente:

S7. React 19
 const nuevoArray = arrayOriginal.map((elemento, index) => {
// Operaciones o transformaciones en cada elemento
return nuevoElemento;
});

Dentro de la función de mapeo, puedes realizar cualquier operación necesaria en

cada elemento antes de devolver el nuevo elemento que se incluirá en el nuevo
array.

7.6.3 Importancia de las keys en elementos iterados

Cuando renderizas una lista de elementos en React, es importante asignar una
"key" única a cada elemento dentro de la función map() .
Las keys ayudan a React a identificar de manera eficiente cada elemento de la
lista y a realizar actualizaciones en el DOM de manera precisa y eficaz cuando la
lista cambia (por ejemplo, cuando se agrega, elimina o reordena elementos).
Las keys deben ser únicas dentro del conjunto de elementos que estás
renderizando.
Idealmente, deberías utilizar un identificador único proporcionado por tus datos,
como un ID de base de datos. Sin embargo, si no tienes un identificador único,
puedes usar el índice del elemento en el array como clave. Aunque esto es menos
eficiente que usar identificadores únicos, es mejor que no asignar una key en
absoluto.
Aquí tienes un ejemplo de cómo asignar keys en una lista de elementos:

import React from 'react';

function ListaDeElementos(props) {
const elementos = props.datos.map((elemento, index) => (
<li key={elemento.id}>{elemento.nombre}</li>
));

return <ul>{elementos}</ul>;
}

S7. React 20
 export default ListaDeElementos;

En este ejemplo, asumimos que cada elemento en el array props.datos tiene una
propiedad única llamada id , que utilizamos como key.
En resumen, la renderización de listas y la iteración sobre arrays son tareas
comunes en React, y la función map() es una herramienta poderosa para lograrlo
de manera eficiente. Además, asignar keys únicas a los elementos iterados es
esencial para garantizar un rendimiento óptimo y una actualización precisa de la
interfaz de usuario cuando los datos cambian.

7.7 Manejo de eventos

En React, el manejo de eventos es fundamental para que las aplicaciones sean
interactivas y respondan a las acciones del usuario.
Puedes asociar eventos a elementos JSX y luego definir cómo responder a esos
eventos mediante funciones o métodos específicos.
A continuación, se describen los conceptos clave relacionados con el manejo de
eventos en React.

7.7.1 Asociación de eventos a elementos JSX

Para asociar eventos a elementos JSX, puedes utilizar la sintaxis de atributos en
camelCase, donde el nombre del atributo es el nombre del evento y el valor es la
función que se ejecutará cuando ocurra el evento.
Algunos ejemplos de eventos comunes incluyen onClick , onChange , onSubmit ,
onMouseOver , onKeyDown , entre otros.

import React from 'react';

function MiComponente() {
const handleClick = () => {
alert('Hiciste clic en el botón');
};

S7. React 21
 return (
<button onClick={handleClick}>Haz clic aquí</button>
);
}

export default MiComponente;

En este ejemplo, se asocia un evento onClick al elemento <button> y se especifica

la función handleClick que se ejecutará cuando se haga clic en el botón.

7.7.2 Manejo de eventos en componentes funcionales y de clase

El manejo de eventos se puede realizar tanto en componentes funcionales como
en componentes de clase en React.
Componentes funcionales:
En componentes funcionales, puedes declarar una función dentro del
componente y luego asignarla como manejador de eventos.

import React, { useState } from 'react';

function MiComponente() {
const [mensaje, setMensaje] = useState(''); // Estado inici
al

const handleClick = () => {

setMensaje('Hiciste clic en el botón');
};

return (
<div>
<p>{mensaje}</p>
<button onClick={handleClick}>Haz clic aquí</button>
</div>
);
}

S7. React 22
 export default MiComponente;

Componentes de clase:
En componentes de clase, puedes definir métodos dentro de la clase que actúen
como manejadores de eventos. Asegúrate de enlazar el contexto del componente
apropiadamente usando bind o mediante el uso de funciones flecha para que
this haga referencia al componente.

import React, { Component } from 'react';

class MiComponente extends Component {

constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
alert('Hiciste clic en el botón');
}

render() {
return (
<button onClick={this.handleClick}>Haz clic aquí</butto
n>
);
}
}

7.7.3 Eventos comunes como onClick, onChange, etc.

Existen varios eventos comunes en React, y su uso puede variar según el
elemento y el tipo de evento. Algunos eventos comunes incluyen:

S7. React 23
 onClick : Se dispara cuando se hace clic en un elemento, como un botón o un
enlace.

onChange: Se utiliza principalmente con elementos de formulario, como <input>

y <select> , y se dispara cuando el valor del elemento cambia.

onSubmit : Se utiliza con formularios y se dispara cuando se envía el formulario.

y onMouseOut : Se utilizan para gestionar eventos cuando el cursor

onMouseOver

del mouse entra o sale de un elemento.

y onKeyUp : Se utilizan para detectar pulsaciones de teclas en

onKeyDown

elementos como <input> o <textarea> .

Estos son solo algunos ejemplos de eventos comunes en React. Puedes consultar
la documentación de React para obtener una lista completa de eventos y sus
descripciones.
En resumen, el manejo de eventos es esencial en React para crear aplicaciones
interactivas y responder a las acciones del usuario.
Puedes asociar eventos a elementos JSX y definir funciones o métodos para
manejar esos eventos. Ya sea en componentes funcionales o de clase, el manejo
de eventos es una parte fundamental del desarrollo de aplicaciones React.

7.8 State y Ciclo de Vida de los Componentes en React

7.8.1 Concepto de Estado en React
El estado (state) en React se refiere a un objeto que contiene datos que pueden
cambiar durante el ciclo de vida de un componente.
El estado es uno de los conceptos más importantes en React porque permite que
los componentes sean dinámicos y reactivos. Cuando el estado de un
componente cambia, React se encarga automáticamente de volver a renderizar el
componente y actualizar la interfaz de usuario para reflejar esos cambios.
El estado es una característica exclusiva de los componentes de clase y
componentes funcionales basados en hooks, como useState .

7.8.2 Uso del Método setState

S7. React 24
 En los componentes de clase, puedes utilizar el método setState para actualizar el
estado de un componente. Este método acepta un objeto que representa el nuevo
estado y se utiliza para notificar a React que el componente debe volver a
renderizarse con el nuevo estado.

import React, { Component } from 'react';

class MiComponente extends Component {

constructor(props) {
super(props);
this.state = {
contador: 0
};
}

incrementarContador = () => {
this.setState({ contador: this.state.contador + 1 });
};

render() {
return (
<div>
<p>Contador: {this.state.contador}</p>
<button onClick={this.incrementarContador}>Incrementa
r</button>
</div>
);
}
}

export default MiComponente;

En este ejemplo, el método incrementarContador utiliza setState para actualizar el

valor del contador en el estado. Cuando el botón "Incrementar" se hace clic, el
estado se actualiza y la interfaz de usuario se vuelve a renderizar con el nuevo
valor del contador.

S7. React 25
 7.8.3 Ciclo de Vida de los Componentes de Clase
Los componentes de clase en React tienen un ciclo de vida que consta de varios
métodos que se ejecutan en momentos específicos durante la vida de un
componente. Algunos de los métodos de ciclo de vida más comunes son:

: Este método se ejecuta después de que el componente ha

componentDidMount

sido montado en el DOM. Es un buen lugar para realizar solicitudes a

servidores o inicializar variables.

: Se llama después de que el componente se ha actualizado,

componentDidUpdate

ya sea debido a un cambio en el estado o en las props. Es útil para realizar

acciones después de una actualización, como realizar ajustes en el DOM.

componentWillUnmount : Se ejecuta justo antes de que el componente sea

eliminado del DOM. Puedes utilizarlo para realizar limpieza, como la
eliminación de event listeners o cancelar solicitudes pendientes.

import React, { Component } from 'react';

class CicloDeVidaEjemplo extends Component {

componentDidMount() {
// Se ejecuta después del montaje del componente
console.log('El componente se ha montado.');
}

componentDidUpdate(prevProps, prevState) {
// Se ejecuta después de que el componente se ha actualiz
ado
console.log('El componente se ha actualizado.');
}

componentWillUnmount() {
// Se ejecuta antes de que el componente se desmonte
console.log('El componente se desmontará.');
}

render() {

S7. React 26
 return (
<div>
<p>Ciclo de Vida del Componente</p>
</div>
);
}
}

export default CicloDeVidaEjemplo;

Estos métodos de ciclo de vida te permiten realizar acciones específicas en

momentos clave durante el ciclo de vida de un componente de clase en React.
Sin embargo, ten en cuenta que los componentes funcionales basados en hooks
también proporcionan formas de replicar este comportamiento utilizando los
hooks useEffect , useLayoutEffect , y useEffect con dependencias.

7.9 Los Hooks en React

Los Hooks son una característica introducida en React 16.8 que permiten a los
desarrolladores de React utilizar el estado y otras características de React en
componentes funcionales, sin necesidad de escribir clases.
Los Hooks proporcionan una forma más concisa y legible de administrar el estado
y el ciclo de vida de los componentes funcionales. Uno de los Hooks más
utilizados y esenciales es useState() .

7.9.1 El Hook useState()

El Hook useState() es una de las características más importantes y utilizadas en
React. Permite a los componentes funcionales tener su propio estado interno y,
por lo tanto, gestionar y rastrear datos que pueden cambiar con el tiempo. Aquí
hay una explicación más detallada de cómo funciona y cómo se usa useState() :

7.9.2 Sintaxis de useState()

La función useState() se importa desde la biblioteca react . Su sintaxis básica es la
siguiente:

S7. React 27
 const [state, setState] = useState(initialState);

state : Es el estado actual. Inicialmente, se establece en el valor de

initialState .

setState : Es una función que se utiliza para actualizar el estado. Cuando se

llama con un nuevo valor, React volverá a renderizar el componente y
actualizará su estado.

: Es el valor inicial del estado. Puede ser cualquier tipo de dato,

initialState

como un número, una cadena, un objeto o incluso un arreglo.

7.9.3 Uso de useState()

Veamos un ejemplo de cómo utilizar useState() en un componente funcional:

import React, { useState } from 'react';

function Contador() {
// Inicializamos el estado "contador" en 0
const [contador, setContador] = useState(0);

const incrementarContador = () => {

// Utilizamos la función "setContador" para actualizar el
valor del contador
setContador(contador + 1);
};

return (
<div>
<p>Contador: {contador}</p>
<button onClick={incrementarContador}>Incrementar</butt
on>
</div>
);
}

S7. React 28
 En este ejemplo, hemos creado un componente funcional llamado Contador que
utiliza useState() para inicializar el estado contador en 0. Luego, hemos definido
una función incrementarContador() que utiliza setContador() para aumentar el valor
del contador en 1 cada vez que se hace clic en el botón "Incrementar".

7.9.4 Múltiples Estados en un Componente

Puedes utilizar useState() varias veces en un solo componente funcional para
gestionar múltiples estados independientes. Por ejemplo:

import React, { useState } from 'react';

function Formulario() {
const [nombre, setNombre] = useState('');
const [email, setEmail] = useState('');

const handleNombreChange = (event) => {

setNombre(event.target.value);
};

const handleEmailChange = (event) => {

setEmail(event.target.value);
};

return (
<div>
<input type="text" placeholder="Nombre" value={nombre}
onChange={handleNombreChange} />
<input type="email" placeholder="Email" value={email} o
nChange={handleEmailChange} />
</div>
);
}

En este ejemplo, hemos creado un componente Formulario que utiliza dos estados
distintos: nombre y email . Cada uno de ellos tiene su propia función setNombre y

S7. React 29
 setEmail para actualizar su valor.

7.9.5 Ventajas de useState()

Sintaxis clara y concisa: useState() proporciona una sintaxis más simple y
legible para administrar el estado en componentes funcionales en
comparación con los componentes de clase.

Mayor flexibilidad: Los Hooks, incluido useState() , permiten a los

componentes funcionales utilizar todas las características de los
componentes de clase, como el estado local, sin la necesidad de usar clases.

Mejora el rendimiento: React optimiza la actualización de componentes

funcionales con Hooks, lo que puede mejorar el rendimiento en comparación
con los componentes de clase.

En resumen, el Hook useState() es una herramienta poderosa para agregar y

gestionar el estado en componentes funcionales en React. Facilita la creación de
componentes más limpios y reutilizables y es una de las razones por las que los
Hooks se han vuelto tan populares en el desarrollo de aplicaciones React.

S7. React 30