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>Manzanap>;
}

function App() {
  return (
    <div>
      <h1>Carritoh1>
      <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 - $300p>;
}

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

🧠 FRASE PARA RECORDAR

Un componente React es una función con nombre en mayúscula que devuelve JSX. Podés usarlo como si fuera una etiqueta.