Crear componentes en React parte de una idea simple: primero defines la estructura de tu aplicación y luego construyes cada pieza por separado. Aquí vas a aprender a montar la arquitectura de una app de tareas pendientes (TodoMachine) usando componentes reutilizables, exports nombrados y archivos independientes para cada uno.

Esta guía es para ti si estás dando tus primeros pasos con React y quieres entender cómo se organiza un proyecto real, sin perderte entre archivos ni imports.

¿Cómo planificar la estructura de componentes en React?

Antes de escribir un solo archivo nuevo, conviene mirar la interfaz y preguntarte qué pieza es cada cosa. En TodoMachine identificamos cuatro bloques visuales que se traducen directo a componentes.

• TodoCounter: el mensaje que indica cuántos to-dos has completado.
• TodoSearch: el input que filtra tus tareas pendientes.
• TodoList: la lista que envuelve cada tarea.
• TodoItem: cada tarea individual dentro de la lista.
• CreateTodoButton: el botón flotante para crear nuevos to-dos.

En el componente App llamas a todos estos componentes como si ya existieran, aunque todavía no los hayas creado. Esta técnica, que enseña el profesor Richard Kaufman, te obliga a pensar primero en la arquitectura y luego en la implementación.

¿Por qué llamar componentes que aún no existen? Porque te permite visualizar la estructura completa antes de programar. El linter mostrará errores, pero esos errores son tu lista de tareas: vas creando cada componente hasta que la consola quede limpia.

¿Cómo se diferencia un componente con children de uno autocerrado?

La mayoría de tus componentes se cierran a sí mismos, igual que las etiquetas <img /> en HTML. Pero TodoList es distinto: necesita una etiqueta de apertura y otra de cierre porque va a contener a los TodoItem por dentro.

jsx <TodoList> <TodoItem /> <TodoItem /> <TodoItem /> </TodoList>

Esa diferencia es clave: cuando un componente envuelve a otros, recibe esos hijos a través de una propiedad especial llamada children.

¿Cómo crear archivos separados para cada componente?

Tener todos los componentes en un solo archivo funciona, pero ensucia el proyecto rápidamente. La buena práctica es darle a cada componente su propio archivo dentro de la carpeta src.

Para TodoCounter, por ejemplo, creas TodoCounter.js, defines la función y dentro retornas un <h1> con el mensaje:

jsx function TodoCounter() { return <h1>Has completado 3 de 5 TODOs</h1>; }

export { TodoCounter };

Fíjate en el detalle del export: en lugar de usar export default, exportamos un objeto con la propiedad TodoCounter. Esto se conoce como named export y tiene una ventaja enorme.

¿Por qué usar named exports en lugar de export default?

Cuando usas export default, puedes importar el componente con cualquier nombre, incluso uno equivocado, y JavaScript no te avisará. Si por error escribes TodoCount en vez de TodoCounter, tu app seguirá funcionando con un nombre incorrecto.

Con named exports, el nombre tiene que coincidir exactamente. Si te equivocas en una letra, obtienes un error inmediato.

¿Qué es un named export en React? Es una forma de exportar usando llaves { } para nombrar explícitamente lo que exportas. Te protege de typos y hace tu código más predecible en proyectos grandes.

La importación queda así:

jsx import { TodoCounter } from './TodoCounter';

¿Qué es props.children y para qué sirve en React?

Cuando defines TodoList como un componente que envuelve a otros, necesitas decirle a React dónde renderizar ese contenido interno. Ahí entra props.children.

Dentro del componente TodoList, recibes props como parámetro y usas las llaves { } para insertar JavaScript dentro del JSX:

jsx function TodoList(props) { return ( <ul> {props.children} </ul> ); }

Esa palabra mágica, children, representa todo lo que pongas entre la etiqueta de apertura y la de cierre del componente. Es la manera natural de componer interfaces en React.

Las props son un tema central que merece su propia clase, así que por ahora basta con saber que children te permite anidar componentes de forma flexible.

¿Cómo comentar código en JSX?

Los comentarios en JSX no funcionan como en HTML ni como en JavaScript puro. Tienes que combinar las dos sintaxis: llaves de JavaScript más la sintaxis de comentario de bloque.

jsx {/* Esto es un comentario en JSX */}

Es útil cuando quieres dejar fuera temporalmente un componente que aún no has creado, como CreateTodoButton, sin borrarlo del todo.

¿Cómo importar componentes rápido en Visual Studio Code?

Un truco que ahorra tiempo: cuando escribes el nombre de un componente que existe en tu proyecto, presiona Ctrl + Espacio y Visual Studio Code te sugiere el import automáticamente. Aceptas con Tab y la línea de importación aparece sola al inicio del archivo.

Este pequeño detalle hace que mover componentes entre archivos sea casi instantáneo.

¿Qué sigue después de armar la estructura?

Con los archivos TodoCounter.js, TodoSearch.js, TodoList.js y TodoItem.js creados, exportados e importados, tu aplicación ya muestra la estructura completa en el navegador: el contador, el campo de búsqueda y los tres ítems de la lista.

Falta un último componente: CreateTodoButton. Es un <button> simple con un signo más dentro, sin funcionalidad por ahora. El reto es que lo crees siguiendo los mismos pasos: archivo nuevo, named export, import en App y úsalo dentro del JSX.

¿Cómo lo resolverías tú? Cuéntame en los comentarios tu versión del CreateTodoButton.