Componentes en React

Paso 1: El Frontend HTML puro

(Sin lógica de React)

Nuestro primer objetivo es construir únicamente la interfaz visual estática. Todavía no le agregaremos estado, ni funciones para añadir ni eliminar tareas, pero renderizaremos el HTML mediante JSX dentro del <div id="cuerpo">.

Este paso nos servirá para entender cómo JSX permite crear HTML usando el DOM.

Prueba el código del paso 1 y revisa bien el código.

En el Paso 2 modularizaremos en Componentes.

Código del Paso 1 (index.html)

Conceptos clave del paso 1:

  1. Atributos HTML en JSX: En JSX no se utiliza la palabra usamos class="..." sino className="...".
    Esto se debe a que JSX es JavaScript, y class es una palabra reservada del lenguaje JavaScript (para definir clases).
  2. Etiquetas auto-cerradas: En JSX, las etiquetas como <input> o <br>, deben cerrarse obligatoriamente con una barra: <input />, <br />.
  3. Monolito: Todo el bloque de la aplicación vive dentro de una sola función (App). En Paso 2, romperemos esta estructura para crear componentes reutilizables.