Este repositorio reúne ejemplos y prácticas sobre el uso de componentes funcionales en React, con foco en una estructura clara, el manejo de estado mediante hooks nativos y la reutilización de lógica a través de custom hooks.
El proyecto está organizado de forma modular para facilitar la lectura, el mantenimiento y la escalabilidad, siguiendo los principios de:
- Componentes desacoplados: Piezas de interfaz independientes y reutilizables.
- Separación de conceptos: Clara distinción entre la lógica de negocio y la presentación (UI).
- Organización Semántica: Carpetas dedicadas a hooks y custom hooks.
- Convenciones React: Uso de estándares modernos de la comunidad.
Se aplican los hooks principales de React para gestionar el ciclo de vida, el estado y el acceso al DOM:
| Hook | Propósito |
|---|---|
useState |
Manejo de estado local de forma sencilla. |
useEffect |
Gestión de efectos secundarios y sincronización. |
useContext |
Paso de datos a través del árbol de componentes sin prop drilling. |
useReducer |
Control de estado complejo y lógica de transiciones predecible. |
useRef |
Persistencia de valores entre renders y acceso directo a elementos del DOM. |
El repositorio pone especial énfasis en la abstracción de lógica para evitar la duplicación de código mediante Custom Hooks.
Ejemplos incluidos:
- 👤 Manejo de estado compartido: Lógica centralizada para múltiples componentes.
- 📝 Lógica de formularios: Abstracción de inputs y validaciones.
- 🔢 Contadores y efectos: Implementaciones de lógica matemática y temporizadores reutilizables.
El objetivo principal de este espacio es practicar y demostrar buenas prácticas en React, profundizando en el cuándo y el por qué de cada herramienta, para construir aplicaciones basadas en componentes funcionales sólidos y escalables.