Cómo importar archivos en otro directorio ReactJS

Importar un archivo significa incorporarlo a un programa o aplicación desde una fuente externa, permitiéndole trabajar con su contenido dentro de ese entorno.Es un proceso fundamental en varios tareas digitales, que involucran diferentes tipos de archivos, aplicaciones y propósitos.

Importar archivos en ReactJS es un aspecto importante del desarrollo de aplicaciones. Le permite dividir su aplicación en fragmentos manejables de códigos conocidos como componentes.

En este tutorial aprenderemos cómo importar archivos en una carpeta que no sea ReactJS. 

Cómo importar un archivo en ReactJS

Tomemos un ejemplo. Supongamos que tiene un componente de React llamado 'Encabezado' en un archivo llamado 'Header.js'. Ahora desea utilizar este 'Encabezado' componente en su 'App.js' archivo. Para hacerlo, deberá importar el archivo 'Encabezado' componente de 'Header.js' en 'App.js'.

La sintaxis para importar un archivo en ReactJS es:

import { ComponentName } from './ComponentFile';

En nuestro ejemplo, para importar el 'Encabezado' componente de 'Header.js' en 'App.js', escribirás:

import { Header } from './Header';

Importar un archivo desde otro directorio

El ejemplo anterior supone que 'Header.js' y 'App.js' están en el mismo directorio. Pero ¿y si no lo son? ¿Qué pasa si 'Header.js' ¿Está en un directorio diferente?

Bueno, en ese caso, necesitaremos especificar la ruta relativa de 'Header.js' de 'App.js' en la declaración de importación. Supongamos que 'Header.js' está dentro de un directorio llamado 'componentes' que está en el mismo directorio que 'App.js'. Luego, importará el 'Encabezado' como esto:

import { Header } from './components/Header';

Exportaciones e importaciones predeterminadas

Existe otra forma de exportar e importar módulos en ReactJS conocida como exportaciones e importaciones predeterminadas. Una exportación predeterminada es solo una parte de un archivo que se exporta de forma predeterminada cuando se importa el archivo.

Digamos que 'Header.js' tiene una exportación predeterminada: el archivo 'Encabezado' componente. Así es como lo escribirás:

export default Header;

Y así es como lo importarás en 'App.js':

import Header from './components/Header';

¿Notas la diferencia? Con las exportaciones predeterminadas, no necesita las llaves alrededor del nombre del componente durante la importación.

Ahora supongamos que 'Header.js' no está en la sección 'componentes' directorio pero en un directorio llamado 'diseño' dentro de los 'componentes'. Luego, la declaración de importación en 'App.js' se verá así:

import Header from './components/layout/Header';

En este tutorial aprendiste cómo importar archivos en una carpeta que no sea ReactJS.