// Crea y exporta tu componente Header aquí
// Debe retornar un <header> con un <h1> dentro

Importar y exportar componentes

Un archivo, un componente

Hasta ahora hemos puesto todos los componentes en el mismo archivo. Eso funciona para practicar, pero en un proyecto real terminarías con archivos de miles de líneas. Inmantenible.

La convención profesional es clara: cada componente vive en su propio archivo. El nombre del archivo coincide con el nombre del componente.

export default: "esto es lo principal de este archivo"

Para que un componente sea accesible desde otros archivos, necesitas exportarlo:

export default le dice a JavaScript: "lo principal que este archivo ofrece es este componente". Un archivo solo puede tener un export default.

import: "tráeme ese componente"

Desde otro archivo, importas el componente:

El './Header' es la ruta relativa al archivo. El ./ significa "en la misma carpeta". No necesitas escribir la extensión .js — el sistema la añade automáticamente.

Named exports: exportar varias cosas

A veces un archivo exporta más de una cosa. Para eso existen los named exports:

Y se importan con llaves:

La diferencia clave:

• default export: se importa sin llaves, puedes ponerle el nombre que quieras
• named export: se importa con llaves, debes usar el nombre exacto

¿Cuándo usar cada uno?

La convención en React es simple:

• Componentes: export default (uno por archivo)
• Utilidades, constantes, hooks: export con nombre (pueden ser varios por archivo)

Tu desafío 🚀

1. En Header.js, crea un componente Header que retorne un <header> con un <h1> dentro. Expórtalo con export default
2. En App.js, importa Header con import Header from './Header' y úsalo

A partir de ahora, así es como organizarás tus componentes. Un archivo, una responsabilidad.

Separar componentes en archivos no es solo organización — es la diferencia entre un proyecto que escala y uno que colapsa.