¿Cómo funcionan los eventos y el estado en React?

En React, los componentes son funciones que toman props como argumentos y retornan un elemento JSX que define la interfaz de usuario. El flujo de trabajo en React se basa en el concepto de "estado" y "eventos", y su manejo adecuado es clave para desarrollar aplicaciones interactivas.

Un evento común en una aplicación React es el clic sobre un botón, pero cualquier otro elemento del DOM también puede ser interactivo. Por ejemplo, al hacer clic en un botón, es posible ejecutar una función que cambie algún valor o realice alguna acción en la aplicación. React permite gestionar estos eventos de manera eficiente utilizando un sistema de "eventos sintéticos" que garantiza la compatibilidad entre diferentes navegadores.

Imaginemos que queremos crear un botón en un componente que, al hacer clic, registre un mensaje en la consola. El código básico para esto sería:

jsx
Copy code
const Button = () => {

  const handleClick = () => {
    console.log("click");
  };
  return (
    <button className="bg-white text-purple-800 hover:bg-gray-300 p-3 rounded-md" onClick={handleClick}>
      Button
    </button>
  );
};
export default Button;

En este caso, el evento onClick se asocia con la función handleClick, la cual se ejecuta cuando el usuario hace clic en el botón. Al importar este componente en App.jsx y hacer clic sobre el botón, veremos el mensaje en la consola.

Este es un ejemplo básico de cómo manejar eventos en React, pero la potencia de React se despliega cuando comenzamos a interactuar con el estado de los componentes. En React, el estado es una representación de los datos que el componente maneja y controla su renderizado. Un componente puede tener un estado que cambie con el tiempo, y este cambio de estado desencadenará una actualización de la interfaz de usuario.

Uso de useState para manejar el estado

React proporciona varios hooks para interactuar con el ciclo de vida de los componentes, pero uno de los más fundamentales es useState. Este hook permite crear variables de estado en un componente funcional y actualizarlas cuando sea necesario.

jsx
Copy code
import { useState } from "react";

export default function App() {

  const data = [
    { id: 1, name: "Fiat", year: 2023, model: "Panda", price: 12000 },
    { id: 2, name: "Peugeot", year: 2018, model: "308", price: 16000 },

    { id: 3, name: "Ford", year: 2022, model: "Mustang", price: 25000 },

    { id: 4, name: "Renault", year: 2019, model: "Clio", price: 18000 },

    { id: 5, name: "Citroen", year: 2021, model: "C3 Aircross", price: 22000 },

    { id: 6, name: "Toyota", year: 2020, model: "Yaris", price: 15000 },

    { id: 7, name: "Volkswagen", year: 2021, model: "Golf", price: 28000 },

    { id: 8, name: "BMW", year: 2022, model: "M3", price: 45000 },
    { id: 9, name: "Mercedes", year: 2021, model: "A-Class", price: 35000 },
    { id: 10, name: "Audi", year: 2022, model: "A6", price: 40000 },
  ];
  const [budget, setBudget] = useState(20000);
  return (
    <div>
      <p>Your budget is {budget}</p>
      <input
        type="number"
        value={budget}
        onChange={(e) => setBudget(e.target.value)}
      />
      <div>
        {data
          .filter((car) => car.price <= budget)
          .map((car) => (
            <div key={car.id}>
              <p>{car.name} - {car.year} - {car.model} - ${car.price}</p>
            </div>
          ))}
      </div>
    </div>
  );
}

En este ejemplo, se utiliza el useState para crear una variable llamada budget que representa el presupuesto disponible. Además, se define una función setBudget que permite actualizar este valor cuando el usuario modifica el campo de entrada. Cada vez que el valor del presupuesto cambie, React vuelve a renderizar el componente y muestra únicamente los coches que se ajustan al presupuesto seleccionado.

El ciclo de vida de los componentes y el uso de useEffect

Mientras que useState es ideal para manejar y actualizar el estado dentro de los componentes, useEffect permite realizar efectos secundarios, como la obtención de datos o la suscripción a eventos. Este hook se ejecuta después de que el componente haya sido renderizado, lo que lo convierte en una herramienta esencial cuando se necesitan realizar tareas como la obtención de datos desde un servidor o la suscripción a eventos externos.

Es fundamental comprender que useEffect se ejecuta por defecto después de cada renderizado, pero puede ser configurado para que solo se ejecute en ciertas circunstancias, dependiendo de las dependencias que se le pasen.

La importancia de los eventos sintéticos

En React, los eventos no son eventos nativos del DOM, sino eventos sintéticos. Esto significa que React crea una envoltura alrededor de los eventos nativos del navegador para garantizar que el código funcione de manera consistente entre diferentes navegadores. Los eventos en React se pasan en formato "camelCase", y no en el formato tradicional de minúsculas que se usa en el HTML estándar. Por ejemplo, el evento de clic se escribe como onClick en lugar de onclick. Además, es necesario pasarle a estos eventos una función de manejo como argumento, lo que difiere ligeramente del manejo tradicional de eventos en JavaScript.

¿Cómo implementar un sistema de autenticación con React y FastAPI?

Para implementar un sistema de autenticación en una aplicación web moderna, es necesario comprender cómo React maneja el estado y la interacción con el backend, así como cómo integrar correctamente un sistema de autenticación basado en JWT (JSON Web Token) utilizando FastAPI. A continuación, te explico cómo construir un sistema sencillo de autenticación y autorización que incluya registro, inicio de sesión, visualización de mensajes de estado y la gestión de usuarios.

El primer paso consiste en crear los componentes básicos de la aplicación, comenzando con el registro. En React, el componente Register.jsx maneja el formulario de registro y permite que el usuario se registre en el sistema. A través de la función handleSubmit, se realiza una llamada a la API del backend para registrar al usuario y limpiar los campos del formulario. Este formulario también previene el comportamiento predeterminado del formulario HTML, lo que es crucial para evitar que la página se recargue al enviar los datos.

De manera similar, se crea el componente Login.jsx, que gestiona el inicio de sesión del usuario. Este componente también se apoya en el contexto de autenticación para realizar el inicio de sesión utilizando el login proporcionado por el AuthContext. La estructura es casi idéntica a la de registro, pero en lugar de enviar los datos para crear un nuevo usuario, realiza una solicitud para autenticar al usuario con las credenciales ingresadas.

Una vez que el usuario se ha autenticado, es común mostrar un mensaje de estado. Este mensaje puede indicar si la autenticación fue exitosa o si ocurrió algún error durante el proceso de inicio de sesión. El componente Message.jsx se encarga de leer el estado del mensaje del contexto de autenticación y mostrarlo en la interfaz del usuario.

El siguiente paso es gestionar la visualización de los usuarios registrados en la aplicación. El componente Users.jsx es el encargado de hacer una llamada al backend para obtener la lista de usuarios. Este componente también maneja el estado de la sesión a través del JWT. Si el JWT es válido, se obtienen los datos de los usuarios y se muestran en una lista. En caso contrario, se le solicita al usuario que inicie sesión para acceder a los datos. Además, este componente también proporciona la opción de cerrar sesión mediante un botón que ejecuta la función logout del contexto de autenticación.

Finalmente, el componente App.jsx es el componente raíz que agrupa todos los anteriores y gestiona la visualización condicional de las vistas de registro e inicio de sesión. Dependiendo de si el usuario está autenticado, se mostrará el formulario de login o la lista de usuarios. Este componente también facilita la prueba de la aplicación, permitiendo al usuario registrarse, iniciar sesión, y verificar el comportamiento al ingresar datos incorrectos.

El siguiente paso clave en la implementación de un sistema de autenticación es asegurar que el usuario permanezca autenticado incluso después de actualizar o cerrar el navegador. Para ello, se puede utilizar el almacenamiento local (localStorage), una API que permite almacenar datos en el navegador. Esta solución es más adecuada que las cookies, ya que tiene un límite de almacenamiento mayor y no se envía automáticamente con cada solicitud HTTP, lo que mejora el rendimiento.

Para implementar esta persistencia, es necesario modificar el AuthContext.jsx. En este archivo, se configura un useEffect que se ejecuta al inicio de la aplicación para verificar si existe un token JWT en el localStorage. Si el token está presente, se valida a través de una llamada al endpoint /me de FastAPI para verificar la autenticidad del token. Si la respuesta es válida, se actualiza el estado del usuario y se muestra un mensaje de bienvenida.

Este enfoque no solo garantiza que el usuario siga autenticado después de cerrar y reabrir la aplicación, sino que también mejora la experiencia de usuario al reducir la necesidad de iniciar sesión repetidamente.