Cosa fa "default esportazione" in JSX?

Voglio chiederti cosa significa e cosa fa l'ultima frase (esporta HelloWorld predefinito;) ma non riesco a trovare alcun tutorial a riguardo.

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;

Esporta come export default HelloWorld;e importa , ad esempio import React from 'react'fanno parte del sistema di moduli ES6 .

Un modulo è un'unità autonoma che può esporre risorse ad altri moduli utilizzando exporte acquisire risorse da altri moduli utilizzando import.

Nel tuo codice:

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

In ES6 ci sono due tipi di esportazioni:

Esportazioni con nome - ad esempio export function func() {}è un'esportazione con nome con il nome di func. I moduli con nome possono essere importati usando import { exportName } from 'module';.In questo caso, il nome dell'importazione dovrebbe essere lo stesso del nome dell'esportazione. Per importare la funzione nell'esempio, dovrai usare import { func } from 'module';. Possono esserci più esportazioni denominate in un modulo.

Esportazione predefinita : è il valore che verrà importato dal modulo, se si utilizza la semplice dichiarazione di importazione import X from 'module'. X è il nome che verrà assegnato localmente alla variabile assegnata per contenere il valore e non deve essere nominato come l'esportazione di origine. Può esserci una sola esportazione predefinita.

Un modulo può contenere sia esportazioni denominate che un'esportazione predefinita e possono essere importati insieme usando import defaultExport, { namedExport1, namedExport3, etc... } from 'module';.

export default viene utilizzato per esportare una singola classe, funzione o primitiva da un file di script.

L'esportazione può anche essere scritta come

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

Potresti anche scrivere questo come componente di funzione come

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

Viene utilizzato per importare questa funzione in un altro file di script

import HelloWorld from './HelloWorld';

Non devi necessariamente importarlo perché HelloWorldpuoi assegnargli un nome poiché è un'esportazione predefinita

Un po 'di esportazione

Come dice il nome, viene utilizzato per esportare funzioni, oggetti, classi o espressioni da file di script o moduli

Utiliites.js

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

Questo può essere importato e usato come

App.js

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

O

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

Quando si utilizza l'esportazione predefinita, questo è molto più semplice. I file di script esportano solo una cosa. cube.js

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

e usato come App.js

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

In parole semplici -

L'istruzione export viene utilizzata quando si creano moduli JavaScript per esportare funzioni, oggetti o valori primitivi dal modulo in modo che possano essere utilizzati da altri programmi con l'istruzione import.

Ecco un link per una chiara comprensione: MDN Web Docs

La comprensione più semplice default exportè

Export è la funzione di ES6 che viene utilizzata per esportare un modulo (file) e utilizzarlo in qualche altro modulo (file).

Esportazione predefinita:

1. default export è la convenzione se si desidera esportare solo un oggetto (variabile, funzione, classe) dal file (modulo).
2. Potrebbe esserci una sola esportazione predefinita per file, ma non limitata a una sola esportazione .
3. Quando si importa un oggetto esportato predefinito, è possibile rinominarlo.

Esporta o esporta denominata:

1. Viene utilizzato per esportare l'oggetto (variabile, funzione, calss) con lo stesso nome.

2. Viene utilizzato per esportare più oggetti da un unico file.

3. Non può essere rinominato durante l'importazione in un altro file, deve avere lo stesso nome utilizzato per esportarlo.

In React, Vue e molti altri framework, l'esportazione viene utilizzata principalmente per esportare componenti riutilizzabili per creare applicazioni modulari.