Learn React - Importing and Exporting Components

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 - $500</p>;
}

📄 app/page.tsx

import ProductItem from "@/components/ProductItem";

export default function Home() {
  return (
    <div>
      <h1>Carrito</h1>
      <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.