Estado de React con Hooks

Introducción

En React, el "estado" (state) se refiere a datos que pueden cambiar con el tiempo dentro de un componente. Cuando el estado de un componente cambia, React vuelve a renderizar automáticamente el componente para reflejar el nuevo estado. Los Hooks son funciones que te permiten "conectarte" (hook into) a las características de estado y ciclo de vida de React desde componentes funcionales.

En este laboratorio, aprenderás a usar uno de los Hooks más fundamentales, useState, para gestionar el estado en un componente funcional de React. Construiremos una aplicación de contador simple para demostrar cómo inicializar, mostrar y actualizar el estado en respuesta a la interacción del usuario.

Importar useState de react en el archivo del componente

Primero, preparemos nuestro entorno de desarrollo. El script de configuración ya ha creado un nuevo proyecto de React para ti en ~/project/my-app usando Vite.

Tu primera tarea es instalar las dependencias necesarias e iniciar el servidor de desarrollo. Abre una terminal en el WebIDE y ejecuta los siguientes comandos uno por uno.

Navega a tu directorio de proyecto:

cd my-app

Instala las dependencias del proyecto:

npm install

Inicia el servidor de desarrollo:

npm run dev -- --host 0.0.0.0 --port 8080

Después de ejecutar el último comando, verás una salida que indica que el servidor se está ejecutando. Ahora puedes ver tu aplicación en vivo haciendo clic en la pestaña "Web 8080" en la interfaz de LabEx. A lo largo de este laboratorio, modificaremos el archivo ~/project/my-app/src/App.jsx.

En este paso, comenzaremos importando el Hook useState de la biblioteca React. Los Hooks son funciones especiales y, para usarlos, primero debes importarlos desde el paquete react.

Usando el explorador de archivos en el WebIDE, navega y abre el archivo ~/project/my-app/src/App.jsx.

Primero, limpiemos el contenido predeterminado para tener un punto de partida mínimo. Reemplaza todo el contenido de App.jsx con el siguiente código:

function App() {
  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

Ahora, agrega la declaración de importación en la parte superior del archivo para que el Hook useState esté disponible dentro de nuestro componente.

import { useState } from "react";

function App() {
  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

Esta línea le dice a JavaScript que queremos usar la función useState, que es una exportación nombrada de la biblioteca 'react'.

Inicializar el estado con const [count, setCount] = useState(0)

En este paso, llamaremos al Hook useState para crear una nueva pieza de estado en nuestro componente.

La función useState toma un argumento: el valor inicial del estado. Devuelve un array que contiene dos elementos:

1. El valor actual del estado.
2. Una función que te permite actualizar el estado.

Usamos una sintaxis llamada "desestructuración de arrays" para obtener estos dos valores en variables distintas. Es una convención nombrar estas variables como [algo, setAlgo].

Dentro de la función del componente App, antes de la declaración return, agrega la siguiente línea para inicializar nuestro estado. Nombraráremos nuestra variable de estado count y estableceremos su valor inicial en 0.

Actualiza tu archivo ~/project/my-app/src/App.jsx con el siguiente código:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

Ahora, nuestro componente tiene una pieza de estado llamada count que se inicializa en 0, y una función setCount que podemos usar para cambiar su valor más adelante.

Mostrar el valor del estado en JSX con {count}

En este paso, mostraremos el valor actual de nuestra variable de estado count en la interfaz de usuario.

En JSX, puedes incrustar cualquier expresión JavaScript válida directamente dentro de tu marcado envolviéndola en llaves {}. Esto nos permite renderizar datos dinámicos, como nuestra variable de estado.

Agreguemos una etiqueta de párrafo <p> para mostrar un mensaje que incluya el valor actual de count.

Modifica el JSX dentro de la declaración return en ~/project/my-app/src/App.jsx:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
    </>
  );
}

export default App;

Después de guardar el archivo, cambia a la pestaña "Web 8080". Deberías ver el texto "The current count is: 0" mostrado en la página, confirmando que nuestro valor de estado inicial se está renderizando correctamente.

Actualizar el estado con setCount(count + 1)

En este paso, definiremos la lógica para actualizar nuestro estado. Es importante recordar que nunca debes modificar el estado directamente (por ejemplo, count = count + 1). En su lugar, siempre debes usar la función de establecimiento de estado proporcionada por useState, que en nuestro caso es setCount.

Llamar a la función de establecimiento le indica a React que el estado ha cambiado. React programará entonces una nueva renderización del componente con el nuevo valor de estado.

Creemos una función simple dentro de nuestro componente App que manejará la lógica para incrementar el contador. Llamaremos a esta función incrementCount.

Agrega la función incrementCount a tu archivo ~/project/my-app/src/App.jsx:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
    </>
  );
}

export default App;

Esta función, cuando se llame, tomará el valor actual de count, le sumará 1 y luego pasará el nuevo valor a setCount. Esto activará una nueva renderización del componente App.

Desencadenar la actualización en el evento click del botón

En este paso final, conectaremos nuestra lógica de actualización de estado a una acción del usuario. Agregaremos un botón a nuestro componente y, cuando el usuario haga clic en él, llamaremos a la función incrementCount que creamos en el paso anterior.

En React, puedes manejar eventos como clics proporcionando una función a atributos especiales como onClick.

Agreguemos un elemento <button> a nuestro JSX y establezcamos su manejador onClick a nuestra función incrementCount.

Actualiza tu ~/project/my-app/src/App.jsx con el código final:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </>
  );
}

export default App;

Observa que pasamos la función en sí (incrementCount) a onClick, no el resultado de llamarla (incrementCount()). React invocará esta función por nosotros cada vez que se haga clic en el botón.

Ahora, ve a la pestaña "Web 8080". Deberías ver el botón "Increment". ¡Haz clic en él y observa cómo el contador en la pantalla aumenta con cada clic!

Resumen

¡Felicitaciones! Has creado con éxito un componente de React con estado utilizando el Hook useState.

En este laboratorio, aprendiste los principios fundamentales de la gestión de estado en React moderno:

• Qué es el "estado" en un componente de React y por qué es esencial para crear interfaces de usuario interactivas.
• Cómo importar el Hook useState de la biblioteca react.
• Cómo inicializar una pieza de estado llamando a useState con un valor inicial.
• Cómo usar la desestructuración de arreglos para obtener la variable de estado y la función de establecimiento de estado.
• Cómo mostrar la variable de estado en tu JSX usando llaves {}.
• Cómo actualizar el estado en respuesta a un evento del usuario (como un clic de botón) llamando a la función de establecimiento.

Comprender el Hook useState es un primer paso crítico para dominar React. Ahora puedes usar este patrón para agregar comportamiento dinámico e interactivo a tus propios componentes de React.