Learn React - Your First Component

Vamos con el Punto 2: Your First Component

👉 Enfocado en lo que sí o sí tenés que dominar para el trabajo profesional y entrevistas técnicas.

✅ 2. Your First Component — Lo esencial

💡 CONCEPTO CLAVE

Un componente es una función que devuelve JSX y empieza con mayúscula.

Es la unidad mínima de construcción en React.

✅ PARA EL DÍA A DÍA

Cada componente es una función pura (sin efectos colaterales).
Siempre empieza con mayúscula (ProductItem, no productItem).
Se puede usar dentro de otro componente (composición).

function ProductItem() {
  return <p>Manzana</p>;
}

function App() {
  return (
    <div>
      <h1>Carrito</h1>
      <ProductItem />
    </div>
  );
}

💼 PARA ENTREVISTAS TÉCNICAS

¿Qué es un componente funcional?

“Es una función en React que devuelve JSX. Debe comenzar con mayúscula y puede usarse dentro de otros componentes.”

¿Qué es composición en React?

“Es usar componentes dentro de otros, formando una UI como un árbol.”

🧩 EJEMPLO aplicado a tu carrito

function ProductItem() {
  return <p>🍌 Banana - $300</p>;
}

function ProductList() {
  return (
    <div>
      <ProductItem />
      <ProductItem />
    </div>
  );
}