Cosa fa "export default" in JSX?

Question

Desidero chiedere cosa significhi e cosa faccia l'ultima sentanza (esportazione predefinita HelloWorld;) non riesca a trovarlo nei tutorial su di esso.

// hello-world.jsx 

import React from 'react'; 

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

export default HelloWorld; 

Answer 1

Export come export default HelloWorld; e import, come import React from 'react' fanno parte della ES6 modules system.

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

Nel 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:

Named esportazioni - per esempio export function func() {} è un'esportazione chiamato 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, come il nome dell'esportazione, quindi per importare la funzione nell'esempio, sarà necessario utilizzare import { func } from 'module';. Possono esserci più esportazioni con nome in un modulo.

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

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