Que fait «exporter par défaut» dans JSX?

Je veux demander ce que signifie et ce que fait la dernière phrase (exporter HelloWorld par défaut;) mais je ne trouve aucun tutoriel à ce sujet.

// hello-world.jsx

import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld;

Exportez comme export default HelloWorld;et importez , comme import React from 'react'font partie du système de modules ES6 .

Un module est une unité autonome qui peut exposer des actifs à d'autres modules en utilisant export et acquérir des actifs à partir d’autres modules en utilisant import.

Dans votre code:

import React from 'react'; // get the React object from the react module

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld; // expose the HelloWorld component to other modules

Dans ES6, il existe deux types d'exportations:

Exportations nommées - par exemple, export function func() {}une exportation nommée portant le nom de func. Les modules nommés peuvent être importés en utilisant import { exportName } from 'module';.Dans ce cas, le nom de l'importation doit être le même que le nom de l'exportation. Pour importer la fonction dans l'exemple, vous devrez utiliserimport { func } from 'module'; . Il peut y avoir plusieurs exportations nommées dans un module.

Exportation par défaut - est la valeur qui sera importée du module, si vous utilisez l'instruction d'importation simpleimport X from 'module' . X est le nom qui sera donné localement à la variable assignée pour contenir la valeur, et il n'a pas besoin d'être nommé comme l'exportation d'origine. Il ne peut y avoir qu'une seule exportation par défaut.

Un module peut contenir à la fois des exportations nommées et une exportation par défaut, et ils peuvent être importés ensemble à l'aide de import defaultExport, { namedExport1, namedExport3, etc... } from 'module';.

export default est utilisé pour exporter une seule classe, fonction ou primitive à partir d'un fichier de script.

L'export peut également être écrit comme

export default class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

Vous pouvez également l'écrire en tant que composant de fonction comme

export default const HelloWorld = () => (<p>Hello, world!</p>);

Ceci est utilisé pour importer cette fonction dans un autre fichier de script

import HelloWorld from './HelloWorld';

Vous ne l'importez pas nécessairement car HelloWorldvous pouvez lui donner n'importe quel nom car c'est une exportation par défaut

Un peu sur l'exportation

Comme son nom l'indique, il est utilisé pour exporter des fonctions, des objets, des classes ou des expressions à partir de fichiers de script ou de modules

Utiliites.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

Cela peut être importé et utilisé comme

App.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

Ou

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

Lorsque l'exportation par défaut est utilisée, c'est beaucoup plus simple. Les fichiers de script n'exportent qu'une chose. cube.js

export default function cube(x) {
  return x * x * x;
};

et utilisé comme App.js

import Cube from 'cube';
console.log(Cube(3)); // 27

En mots simples -

L'instruction d'exportation est utilisée lors de la création de modules JavaScript pour exporter des fonctions, des objets ou des valeurs primitives à partir du module afin qu'ils puissent être utilisés par d'autres programmes avec l'instruction import.

Voici un lien pour bien comprendre: MDN Web Docs

Compréhension la plus simple pour default exportest

Export est la fonctionnalité d'ES6 qui est utilisée pour exporter un module (fichier) et l'utiliser dans un autre module (fichier).

Exportation par défaut:

1. default export est la convention si vous souhaitez exporter un seul objet (variable, fonction, classe) du fichier (module).
2. Il ne peut y avoir qu'une seule exportation par défaut par fichier, mais pas limitée à une seule exportation .
3. Lors de l'importation de l'objet exporté par défaut, nous pouvons également le renommer.

Exportation ou exportation nommée:

1. Il permet d'exporter l'objet (variable, fonction, cals) du même nom.

2. Il est utilisé pour exporter plusieurs objets à partir d'un fichier.

3. Il ne peut pas être renommé lors de l'importation dans un autre fichier, il doit avoir le même nom que celui utilisé pour l'exporter.

Dans React, Vue et de nombreux autres frameworks, l'exportation est principalement utilisée pour exporter des composants réutilisables afin de créer des applications modulaires.