Carpetas por funcionalidad y componentes UI frente a compuestos
Adopte carpetas por funcionalidad y divida los componentes: primitivas de UI pequeñas y reutilizables frente a componentes compuestos específicos de cada funcionalidad que coordinan estado y datos.
Carpetas por funcionalidad y componentes UI frente a compuestos es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 3 lecciones en total.
Por qué es importante la estructura
Objetivo: estructurar el código para que pueda crecer.
- Las carpetas de funcionalidades agrupan el código relacionado
- Las primitivas de UI son pequeños bloques de construcción visuales
- Los componentes compuestos los conectan
Carpetas organizadas por funcionalidad
- features/checkout/ (rutas, componentes compuestos, hooks y tests)
- ui/ (primitivas: Button, Input, Card)
- lib/ (helpers)
- assets/ (iconos y estilos)
Primitiva de UI: Button
Cree una primitiva Button pequeña: visual y reutilizable, sin obtención de datos.
<div id="root"></div>Componente compuesto: QuantityCard
Un componente compuesto conecta primitivas y estado para una tarea de funcionalidad.
<div id="root"></div>La carpeta de funcionalidad en acción
En una carpeta features/checkout, un componente CheckoutPanel combina primitivas y componentes compuestos.
<div id="root"></div>Consejos y lista de comprobación
- Mantenga las primitivas pequeñas y reutilizables
- Permita que los componentes compuestos contengan el estado de la funcionalidad
- Prefiera las carpetas de funcionalidades a los enormes contenedores globales
Comprobación: primitiva frente a componente compuesto
Repaso
Repaso: organice el código por funcionalidad, cree pequeñas primitivas de UI y combínelas en componentes compuestos que sean propietarios del estado de la funcionalidad.
Preguntas frecuentes
¿La lección «Carpetas por funcionalidad y componentes UI frente a compuestos» es gratis?
Sí — el texto completo de «Carpetas por funcionalidad y componentes UI frente a compuestos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Carpetas por funcionalidad y componentes UI frente a compuestos»?
Adopte carpetas por funcionalidad y divida los componentes: primitivas de UI pequeñas y reutilizables frente a componentes compuestos específicos de cada funcionalidad que coordinan estado y datos. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 3.
¿Cuánto tiempo toma la lección «Carpetas por funcionalidad y componentes UI frente a compuestos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Carpetas por funcionalidad y componentes UI frente a compuestos
- Convenciones para la carpeta de hooks y pruebas junto al código
- Directrices de refactorización