Vamos con el Punto 3: Importing and Exporting Components

👉 Enfocado en lo que sí o sí necesitás saber para trabajo y entrevistas.

✅ 3. Importing and Exporting Components — Lo esencial

💡 CONCEPTO CLAVE

Para usar un componente en otro archivo, lo exportás desde uno y lo importás desde otro.

✅ PARA EL DÍA A DÍA

  • 📁 Cada componente debe ir idealmente en su propio archivo.
  • Usás export default para que sea fácil de importar.
  • Usás import Nombre from "ruta" para traerlo.

📄 src/components/ProductItem.tsx

export default function ProductItem() {
  return <p>Manzana - $500p>;
}

📄 app/page.tsx

import ProductItem from "@/components/ProductItem";

export default function Home() {
  return (
    <div>
      <h1>Carritoh1>
      <ProductItem />
    div>
  );
}

💼 PARA ENTREVISTAS TÉCNICAS

¿Cómo se comparten componentes entre archivos?

“Con export para exponer y import para usar. Normalmente usamos export default para un solo componente por archivo.”

¿Qué diferencia hay entre export default y export nombrado?

  • export default permite importar sin {}.
  • export nombrado requiere { Nombre } al importar.

🧠 FRASE PARA RECORDAR

Exportás para compartir, importás para usar.

Vamos con el Punto 4: Writing Markup with JSX