Construir una aplicación en React.js implica pensar en componentes desde el inicio. Saber dividir la interfaz en piezas reutilizables y organizarlas en archivos independientes es una habilidad fundamental que marca la diferencia entre un proyecto mantenible y uno caótico. Aquí se recorre paso a paso la creación de los componentes de Todo Machine, desde la estructura inicial hasta la exportación e importación de cada pieza.
¿Cómo definir la estructura de componentes antes de crearlos?
Una técnica muy útil consiste en escribir primero los componentes que necesitas dentro del componente principal, aunque todavía no existan [01:42]. La aplicación va a fallar, la consola se llenará de errores en rojo, pero eso está bien. La idea es visualizar la arquitectura completa antes de construir cada pieza.
La estructura de Todo Machine se compone de:
- TodoCounter: muestra un mensaje como "has completado 3 de 5 todos".
- TodoSearch: un campo input para filtrar tareas pendientes.
- TodoList: una lista que contiene los TodoItem por dentro.
- TodoItem: cada tarea individual dentro de la lista.
- CreateTodoButton: un botón para crear nuevas tareas.
Esta forma de trabajar, donde primero defines la estructura y después creas los componentes, fue una enseñanza del profesor Richard Kaufman [04:24]. Es completamente válido hacerlo al revés, pero definir la estructura primero ayuda a tener claridad sobre qué necesitas construir.
¿Cómo crear y exportar componentes en archivos separados?
Cada componente vive en su propio archivo dentro de la carpeta src. Por ejemplo, el componente TodoCounter se crea en un archivo llamado TodoCounter.js [05:15].
javascript
function TodoCounter() {
return (
<h1>Has completado 3 de 5 todos</h1>
);
}
export { TodoCounter };
Un detalle importante es la diferencia entre export default y export nombrado [05:55]. Con export default, puedes importar el componente con cualquier nombre, lo que abre la puerta a errores por typos. En cambio, con un export nombrado como export { TodoCounter }, si te equivocas en el nombre al importar, obtendrás un error inmediato que te avisa del problema.
¿Cómo importar componentes con exports nombrados?
La importación utiliza la sintaxis de desestructuración con llaves:
javascript
import { TodoCounter } from './TodoCounter';
import { TodoSearch } from './TodoSearch';
import { TodoList } from './TodoList';
import { TodoItem } from './TodoItem';
Esta práctica resulta especialmente valiosa en proyectos grandes donde un nombre incorrecto podría pasar desapercibido durante mucho tiempo [06:50].
¿Qué hace props.children en un componente?
El componente TodoList tiene una particularidad: no se cierra a sí mismo, sino que tiene etiqueta de apertura y cierre [02:52]. Dentro del componente App, los TodoItem se colocan como contenido interno de TodoList.
javascript
function TodoList(props) {
return (
<ul>
{props.children}
</ul>
);
}
export { TodoList };
La palabra children [08:28] permite que todo lo que escribas entre las etiquetas de apertura y cierre de un componente se renderice dentro de él. Es la forma en que React maneja la composición de componentes, y funciona de manera similar a cómo los elementos HTML anidan contenido.
¿Cómo se escriben comentarios en JSX?
Para comentar un componente dentro de JSX, se utilizan llaves con la sintaxis de comentario multilínea de JavaScript [10:08]:
jsx
{/* <CreateTodoButton /> */}
No puedes usar // directamente en JSX porque el compilador lo interpretaría como texto. Las llaves indican que estás escribiendo código JavaScript, y dentro de ellas aplicas el comentario con /* */.
Otro truco práctico es el autocompletado de imports en Visual Studio Code [12:10]. Presionando Ctrl + Espacio sobre un componente que aún no está importado, el editor sugiere automáticamente la importación correcta desde el archivo correspondiente.
La aplicación resultante muestra el título con el contador, el input con un placeholder que dice "cortar cebolla" y los tres TodoItem renderizados como elementos de lista. Todo funciona sin errores, cada componente en su archivo, exportado e importado correctamente.
El reto propuesto es crear el componente CreateTodoButton: un simple botón con un signo "+" que por ahora no hace nada, pero que en clases futuras activará un formulario para agregar tareas. ¿Cómo lo resolverías tú? Comparte tu solución en los comentarios.
