Importar y exportar componentes

La magia de los componentes reside en su reutilización: puedes crear componentes que están compuestos por otros componentes. Pero a medida que anidas más y más componentes, a menudo tiene sentido empezar a separarlos en archivos diferentes. Esto te permite mantener tus archivos fáciles de escanear y reutilizar componentes en más lugares.

El archivo del componente raíz

EnTu primer componente, creaste un componenteProfiley un componenteGalleryque lo renderiza:

Actualmente, estos viven en unarchivo de componente raíz,llamadoApp.jsen este ejemplo. Dependiendo de tu configuración, tu componente raíz podría estar en otro archivo. Si usas un framework con enrutamiento basado en archivos, como Next.js, tu componente raíz será diferente para cada página.

Exportar e importar un componente

¿Qué pasa si quieres cambiar la pantalla de inicio en el futuro y poner allí una lista de libros de ciencia? ¿O colocar todos los perfiles en otro lugar? Tiene sentido moverGallery y Profilefuera del archivo del componente raíz. Esto los hará más modulares y reutilizables en otros archivos. Puedes mover un componente en tres pasos:

1. Creaun nuevo archivo JS para colocar los componentes.
2. Exportatu componente de función desde ese archivo (usando exportacionespor defecto o nombradas).
3. Importaen el archivo donde usarás el componente (usando la técnica correspondiente para importar exportacionespor defecto o nombradas).

Aquí, tantoProfilecomoGalleryhan sido movidos fuera deApp.jsa un nuevo archivo llamadoGallery.js. Ahora puedes cambiarApp.jspara importarGallerydesdeGallery.js:

Observa cómo este ejemplo ahora se divide en dos archivos de componentes:

1. Gallery.js:
   • Define el componenteProfile, que solo se usa dentro del mismo archivo y no se exporta.
   • Exporta el componenteGallerycomo unaexportación por defecto.
2. App.js:
   • ImportaGallerycomo unaimportación por defectodesdeGallery.js.
   • Exporta el componente raízAppcomo unaexportación por defecto.

Exportar e importar múltiples componentes desde el mismo archivo

¿Qué pasa si quieres mostrar solo unProfileen lugar de una galería? También puedes exportar el componenteProfile. Pero Gallery.jsya tiene una exportaciónpor defecto, y no puedes tenerdosexportaciones por defecto. Podrías crear un nuevo archivo con una exportación por defecto, o podrías agregar una exportaciónnombradaparaProfile.¡Un archivo solo puede tener una exportación por defecto, pero puede tener numerosas exportaciones nombradas!

Primero,exportaProfiledesdeGallery.jsusando una exportación nombrada (sin la palabra clavedefault):

Luego,importaProfiledesdeGallery.js a App.jsusando una importación nombrada (con llaves):

Finalmente,renderiza<Profile />desde el componenteApp:

AhoraGallery.jscontiene dos exportaciones: una exportación por defectoGalleryy una exportación nombradaProfile. App.jsimporta ambas. Intenta editar<Profile /> a <Gallery />y viceversa en este ejemplo:

Ahora estás usando una mezcla de exportaciones por defecto y nombradas:

• Gallery.js:
  • Exporta el componenteProfilecomo unaexportación nombrada llamadaProfile.
  • Exporta el componenteGallerycomo unaexportación por defecto.
• App.js:
  • ImportaProfilecomo unaimportación nombrada llamadaProfiledesdeGallery.js.
  • ImportaGallerycomo unaimportación por defectodesdeGallery.js.
  • Exporta el componente raízAppcomo unaexportación por defecto.

Recapitulación

En esta página aprendiste:

• Qué es un archivo de componente raíz
• Cómo importar y exportar un componente
• Cuándo y cómo usar importaciones y exportaciones por defecto y nombradas
• Cómo exportar múltiples componentes desde el mismo archivo