Proyecto de demostración progresiva de React. Cada versión introduce nuevos conceptos sobre la anterior, desde lo más básico hasta el uso de Redux Toolkit con RTK Query.
npm installnpm run devLa app estará disponible en http://localhost:5173.
La versión activa se controla desde index.html. Edita la línea del <script> al final del <body> y cambia el path a la versión que quieras:
<!-- Cambia "v1" por la versión deseada: v1, v1plus, v2, v3, v3plus, v4, v5, v5plus --><scripttype="module" src="/src/v1/main.jsx"></script>Guarda el archivo y Vite recargará la app automáticamente.
Contador con botones + y – implementado íntegramente en App.jsx.
Conceptos: useState, manejo de eventos.
La UI del contador se mueve a un componente hijo Counter.jsx. El estado sigue viviendo en App.
Conceptos: composición de componentes, paso de props.
Cuando el contador es múltiplo de 5 aparece un botón que llama a la API icanhazdadjoke. El chiste se imprime por consola.
Conceptos: fetch, eventos condicionales.
Igual que v2, pero el chiste se guarda en un segundo estado y se renderiza en pantalla.
Conceptos: múltiples useState, renderizado condicional.
El chiste se carga automáticamente cada vez que el contador alcanza un múltiplo de 5, sin necesidad de botón.
Conceptos: useEffect, dependencias del efecto.
La lógica de la API y el efecto se extraen al hook useJokes.js. La app acumula todos los chistes cargados en una lista.
Conceptos: custom hooks, separación de lógica y presentación.
Se introduce Redux como gestor de estado global. Las peticiones a la API se gestionan con RTK Query (store.js + api/jokesApi.js).
Conceptos: Redux Toolkit, configureStore, RTK Query, createApi.
Sobre v5, el hook useJokes expone también isLoading y error, mostrando feedback visual al usuario durante la carga y en caso de fallo.
Conceptos: manejo de estados asíncronos (isLoading, error) con RTK Query.