MÓDULO 1: UI MODERNA

Pensando en LEGO

Antes, hacíamos webs escribiendo un archivo HTML gigante de 2000 líneas. Era un caos. React cambió eso. Con React, construyes piezas pequeñas (Componentes) y luego las armas para crear tu web.

1. ¿Qué es un Componente?

Técnicamente, un componente de React es solo una Función de JavaScript que devuelve HTML.

Para diferenciarlo de una función normal, React exige que su nombre empiece con Mayúscula.

// Esto es un componente (Pieza de Lego)
function BotonMeGusta() {
    // Esto parece HTML, pero se llama JSX
    return (
        <button className="btn-rojo">
            Me Gusta
        </button>
    );
}

2. Usando el Componente

Una vez creada la pieza, la puedes usar cuantas veces quieras como si fuera una etiqueta HTML nueva inventada por ti.

export default function App() {
  return (
    <div>
       <h1>Mis Fotos</h1>
       
       <!-- Usamos nuestro botón 3 veces -->
       <BotonMeGusta />
       <BotonMeGusta />
       <BotonMeGusta />
    </div>
  );
}