Exporter les composants React

1. Types d’instructions d’exportation pour réutiliser les composants dans React
2. Utiliser l’exportation nommée pour exporter des composants dans React
3. Utiliser l’exportation par défaut pour exporter des composants dans React

Les développeurs adorent le framework React car il vous permet de créer des composants réutilisables et de les utiliser chaque fois que nécessaire. Dans la version de développement, les composants sont divisés en plusieurs fichiers différents, il est donc utile de connaître les conventions pour les importer et les exporter.

Cet article examinera différentes manières d’exporter des composants dans React.

Types d’instructions d’exportation pour réutiliser les composants dans React

Les instructions d’exportation et d’importation permettent aux développeurs de React de diviser les composants en plusieurs fichiers. Si nécessaire, les développeurs peuvent également placer plusieurs composants logiquement connectés dans un seul fichier.

Le type d’instructions d’exportation peut influencer la disponibilité des composants dans des fichiers externes. L’instruction export rend les liaisons dynamiques à partir d’un fichier spécifique disponibles partout ailleurs. D’autres fichiers peuvent charger les valeurs dans ces liaisons dynamiques à l’aide de l’instruction import.

Lors de l’importation d’une liaison, vous devez vous rappeler que sa valeur source peut changer à tout moment. Si la valeur est modifiée dans le fichier source qui exporte un module, il sera mis à jour partout où il est importé. L’instruction export fonctionne automatiquement selon les règles du mode strict par défaut.

On peut généralement différencier deux types d’exports : les exports nommés et par défaut. Les exportations nommées peuvent être utilisées pour exporter autant de liaisons que vous le souhaitez, ou aucune. Les exportations par défaut sont plus restrictives, car il ne peut y avoir qu’un seul type d’exportation par fichier.

Il existe des différences de syntaxe entre les deux types d’exportations. Nous en discuterons en détail dans les sections ci-dessous. Le type d’exportation influence également la syntaxe que vous devez utiliser lors de son importation.

Utiliser l’exportation nommée pour exporter des composants dans React

Webpack et ES6 ont simplifié le processus d’importation et d’exportation de fichiers. Néanmoins, une certaine confusion concernant les exportations nommées doit être dissipée.

Si un fichier comporte plusieurs composants, vous pouvez utiliser des exportations nommées. Il est probablement préférable d’utiliser des exportations nommées pour exporter plus d’un composant (ou d’autres liaisons) par fichier.

En outre, la syntaxe des exportations et des importations nommées est sans doute plus simple. Lors de l’importation d’une liaison qui a été exportée de cette manière, vous devez utiliser le même nom que le fichier source.

Regardons un exemple :

export function Greet() {
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}
export function Talk() {
  return (
    <div className="App">
      <h1>How are you?</h1>
    </div>
  );
}

Nous pourrions importer ces composants dans un autre fichier en utilisant la syntaxe suivante :

import {Talk, Greet} from "./components/source.jsx"

Cet exemple spécifie le chemin d’accès au fichier source entre les chaînes. Nous utilisons également les mêmes noms de liaison dans le fichier source et les mettons entre accolades.

Si vous n’utilisez pas la syntaxe des accolades, le document interprétera que vous essayez d’importer une liaison partagée avec l'exportation par défaut. Vous ne pouvez pas utiliser la syntaxe d’import d’un export par défaut pour importer un export nommé ; vous obtiendrez une erreur.

Si vous pensez que les noms de liaison ne sont pas clairs, vous pouvez les renommer avant d’exporter. Dans l’exemple ci-dessus, on pourrait faire :

export {Greet as Greeting}

Utiliser l’exportation par défaut pour exporter des composants dans React

La plupart des applications React suivent le modèle de création d’un fichier séparé pour chaque composant. Cette convention rend les exportations par défaut utiles pour exporter les composants.

Les composants exportés de cette manière sont beaucoup plus faciles à importer. Puisqu’il s’agit des seules exportations du fichier, vous pouvez les nommer comme vous le souhaitez tant que vous avez le bon chemin d’accès au fichier.

JavaScript comprendra quel fichier vous recherchez. Et vous n’êtes pas obligé d’utiliser des accolades. Jetons un coup d’œil à l’exemple :

export default function App() {
  return (
    <div className="App">
      <h2>Hello world!</h2>
    </div>
  );
}

Les exemples des deux types d’exportations sont disponibles ici.

Si nous voulions importer le composant App, nous n’avons qu’à faire ceci :

import Application from "./components/App.jsx"

Nous n’avons pas besoin d’utiliser des accolades, ni d’utiliser le même nom de liaison du fichier source. Nous avons la liberté d’improviser. De cette façon, la valeur sera renommée et, dans ce fichier, nous pourrons l’appeler Application au lieu de App.

Dans l’exemple ci-dessus, nous définissons le composant de fonction juste après l’instruction export default. Nous pourrions également le définir séparément et le référencer dans la déclaration.

Par exemple:

function App() {
  return (
    <div className="App">
      <h2>Hello world!</h2>
    </div>
  );
}
export default App

Pour certaines personnes, il s’agit d’une approche plus lisible. Le seul inconvénient pratique des exportations par défaut est qu’elles ne peuvent être appliquées qu’à un seul composant par fichier.