Jerarquías de Componentes

Paso 2: Modularizar en Componentes

En este segundo paso romperemos el bloque monolítico de la función App para crear componentes independientes y reutilizables.

Un componente en React no es más que una función de JavaScript que retorna elementos de JSX y cuyo nombre siempre debe empezar con mayúscula inicial (por ejemplo: TodoForm en lugar de todoForm).

Código del Paso 2 (index.html)

Conceptos clave del paso 2:

  1. Jerarquía de componentes: Ahora App actúa como componente "Padre", el cual renderiza dentro a Header, TodoForm y TodoList. A su vez, TodoList es el Padre de múltiples componentes TodoItem (sus "Hijos").
  2. Mayúsculas obligatorias: Si nombras a un componente function todoItem(), React pensará que es una etiqueta nativa de HTML como <div> o <p> y dará un error. La inicial mayúscula (Upper CamelCase al nombrar TodoItem) es obligatoria.
  3. ¿Hasta dónde hemos llegado?: Al ejecutar index.html las 3 tareas tienen exactamente el mismo contenido. Esto sucede porque TodoItem tiene un texto literal (en informática, se llama hardcoded cuando se dejan fijos, textos que deberían ser dinámicos.). En el siguiente paso resolveremos esto usando Props para pasarle datos dinámicos a cada componente.