Comment importer un fichier dans un autre répertoire ReactJS

Importer un fichier signifie l'importer dans un programme ou une application à partir d'une source externe, vous permettant ainsi de travailler avec son contenu dans cet environnement. Il s'agit d'un processus fondamental dans divers tâches numériques, impliquant différents types de fichiers, applications et objectifs.

L'importation de fichiers dans ReactJS est un aspect important du développement d'applications. Il vous permet de diviser votre application en morceaux de codes gérables appelés composants.

Dans ce tutoriel nous apprendrons comment importer des fichiers dans un dossier autre que ReactJS. 

Comment importer un fichier dans ReactJS

Prenons un exemple. Supposons que vous ayez un composant React nommé « Header ». dans un fichier nommé « Header.js ». Maintenant, vous souhaitez utiliser cet « en-tête » composant dans votre 'App.js' déposer. Pour ce faire, vous devrez importer le fichier « En-tête » dans le fichier « En-tête ». composant de « Header.js » dans « App.js ».

La syntaxe pour importer un fichier dans ReactJS est :

import { ComponentName } from './ComponentFile';

Dans notre exemple, pour importer le fichier 'Header'. composant de « Header.js » dans « App.js », vous écrirez :

import { Header } from './Header';

Importer un fichier depuis un autre répertoire

L'exemple ci-dessus suppose que « Header.js » et 'App.js' sont dans le même répertoire. Mais que se passe-t-il si ce n’est pas le cas ? Et si « Header.js » ? est dans un autre répertoire ?

Eh bien, dans ce cas, nous devrons spécifier le chemin relatif de « Header.js ». à partir de « App.js » dans la déclaration d'importation. Supposons que « Header.js » ; se trouve dans un répertoire nommé « composants » qui se trouve dans le même répertoire que « App.js ». Ensuite, vous importerez le fichier « En-tête » comme ça:

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

Exportations et importations par défaut

Il existe une autre façon d'exporter et d'importer des modules dans ReactJS, connue sous le nom d'exportations et d'importations par défaut. Une exportation par défaut n'est qu'une partie d'un fichier qui est exportée par défaut lors de l'importation du fichier.

Disons que « Header.js » a une exportation par défaut - l'"En-tête" ; composant. Voici comment vous allez l'écrire :

export default Header;

Et voici comment vous allez l'importer dans 'App.js' :

import Header from './components/Header';

Vous remarquez la différence ? Avec les exportations par défaut, vous n'avez pas besoin d'accolades autour du nom du composant lors de l'importation.

Supposons maintenant que « Header.js » ; n'est pas dans les « composants » répertoire mais dans un répertoire nommé 'layout' à l'intérieur des « composants ». Ensuite, l'instruction import dans 'App.js' ressemblera à ceci :

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

Dans ce tutoriel, vous avez appris à importer des fichiers dans un dossier autre que ReactJS