Curso react nivel medio

El estado y los eventos son fundamentales en React para crear aplicaciones interactivas. El estado nos permite almacenar y actualizar datos dentro de un componente, mientras que los eventos nos permiten capturar las acciones del usuario, como clics o escritura en campos de texto.

1. Uso del estado con useState

El estado en un componente de función se maneja con el Hook useState, que nos permite definir una variable de estado y una función para actualizarla.

Ejemplo básico de uso de useState:

1<div id="app"></div>
1import React, { useState } from "https://cdn.skypack.dev/react";
2import ReactDOM from "https://cdn.skypack.dev/react-dom";
3
4function Contador() {
5  // Definimos una variable de estado "contador" inicializada en 0
6  const [contador, setContador] = useState(0);
7
8  return (
9    <div>
10      <p>Contador: {contador}</p>
11      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
12    </div>
13  );
14}
15
16function App(){
17  return <Contador/>
18}
19
20ReactDOM.render(<App />, document.getElementById('app'));

En este ejemplo:

  • useState(0) crea una variable de estado contador inicializada en 0.
  • setContador es la función que actualiza el estado.
  • Cada vez que se hace clic en el botón, setContador(contador + 1) incrementa el valor del contador en 1.

2. Manejo de eventos en React

Los eventos en React son similares a los de JavaScript, pero se escriben en formato camelCase. Algunos eventos comunes incluyen onClick, onChange, onSubmit, entre otros.

Ejemplo de evento onClick:

1<div id="app"></div>
1function Boton() {
2  const mostrarMensaje = () => {
3    alert("¡Has hecho clic!");
4  };
5
6  return <button onClick={mostrarMensaje}>Haz clic aquí</button>;
7}
8
9function App(){
10  return <Boton/>
11}
12
13
14const $app = document.getElementById("app");
15ReactDOM.render(<App/>, $app);

Ejemplo de evento onChange en un input:

1<div id="app"></div>
1import React, { useState } from "https://cdn.skypack.dev/react";
2import ReactDOM from "https://cdn.skypack.dev/react-dom";
3
4function InputTexto() {
5  const [texto, setTexto] = useState("");
6
7  return (
8    <>
9      <div>Has escrito: {texto}</div>
10      <input
11        type="text"
12        value={texto}
13        onChange={(e) => setTexto(e.target.value)}
14        placeholder="Escribe algo"
15      />
16    </>
17  );
18}
19
20function App(){
21  return <InputTexto/>
22}
23
24ReactDOM.render(<App />, document.getElementById('app'));

Aquí, el evento onChange actualiza el estado texto cada vez que el usuario escribe algo en el input.

3. Lifting State Up (elevación de estado)

A veces, varios componentes necesitan compartir un mismo estado. En este caso, podemos elevar el estado al componente padre para que todos los componentes hijos tengan acceso a él. Esto se conoce como lifting state up.

Ejemplo de lifting state up:

1<div id="app"></div>
1import React, { useState } from "https://cdn.skypack.dev/react";
2import ReactDOM from "https://cdn.skypack.dev/react-dom";
3
4function Padre() {
5  const [mensaje, setMensaje] = useState("");
6
7  return (
8    <div>
9      <Hijo1 setMensaje={setMensaje} />
10      <Hijo2 mensaje={mensaje} />
11    </div>
12  );
13}
14
15function Hijo1({ setMensaje }) {
16  return (
17    <button onClick={() => setMensaje("Toma un número:"+Math.floor(Math.random()*10))}>
18      Enviar mensaje desde el hijo 1
19    </button>
20  );
21}
22
23function Hijo2({ mensaje }) {
24  return <p>Mensaje recibido en el hijo 2: {mensaje}</p>;
25}
26
27function App(){
28  return <Padre/>
29}
30
31ReactDOM.render(<App />, document.getElementById('app'));

En este ejemplo:

  • Padre tiene el estado mensaje y la función setMensaje para actualizarlo.
  • Hijo1 recibe setMensaje como prop y lo usa para enviar un mensaje al hacer clic en el botón.
  • Hijo2 muestra el mensaje actualizado de Padre.

4. Ejercicio práctico: Contador de clics

Creemos una aplicación simple que cuenta los clics que hace el usuario.

1<div id="app"></div>
1import React, { useState } from "https://cdn.skypack.dev/react";
2import ReactDOM from "https://cdn.skypack.dev/react-dom";
3
4
5function ContadorDeClics() {
6  const [clics, setClics] = useState(0);
7
8  // Incrementar clics
9  const incrementarClics = () => {
10    setClics(clics + 1);
11  };
12
13  // Reiniciar contador
14  const reiniciarContador = () => {
15    setClics(0);
16  };
17
18  return (
19    <div>
20      <h1>Contador de Clics</h1>
21      <p>Clics: {clics}</p>
22      <button onClick={incrementarClics}>Incrementar</button>
23      <button onClick={reiniciarContador}>Reiniciar</button>
24    </div>
25  );
26}
27
28
29function App(){
30  return <ContadorDeClics/>
31}
32
33ReactDOM.render(<App />, document.getElementById('app'));

En este ejercicio:

  • clics es una variable de estado que almacena el número de clics.
  • incrementarClics es una función que aumenta el contador en 1 cada vez que se hace clic en el botón "Incrementar".
  • reiniciarContador restablece el contador a 0 cuando se hace clic en el botón "Reiniciar".

Este ejercicio nos ayuda a entender cómo manejar el estado y los eventos en React, ¡además de reforzar los conceptos de useState y la interacción con el usuario!

  • Loading...
← Introducción rápida a los componentesVolver al cursoLas props →