O que o "padrão de exportação" faz no JSX?

Quero perguntar o que a última frase significa e faz (padrão de exportação HelloWorld;), mas não consigo encontrar nenhum tutorial sobre isso.

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;

Exporte como export default HelloWorld;e importe , como import React from 'react'fazem parte do sistema de módulos ES6 .

Um módulo é uma unidade independente que pode expor ativos a outros módulos usando exporte adquirir ativos de outros módulos usando import.

No seu código:

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

No ES6, existem dois tipos de exportação:

Exportações nomeadas - por exemplo, export function func() {}é uma exportação nomeada com o nome de func. Módulos nomeados podem ser importados usando import { exportName } from 'module';.Nesse caso, o nome da importação deve ser o mesmo que o nome da exportação. Para importar a função no exemplo, você precisará usar import { func } from 'module';. Pode haver várias exportações nomeadas em um módulo.

Exportação padrão - é o valor que será importado do módulo, se você usar a instrução de importação simples import X from 'module'. X é o nome que será dado localmente à variável atribuída para conter o valor e não precisa ser nomeado como a exportação de origem. Pode haver apenas uma exportação padrão.

Um módulo pode conter exportações nomeadas e uma exportação padrão e elas podem ser importadas juntas usando import defaultExport, { namedExport1, namedExport3, etc... } from 'module';.

export default é usado para exportar uma única classe, função ou primitiva de um arquivo de script.

A exportação também pode ser escrita como

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

Você também pode escrever isso como um componente de função como

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

Isso é usado para importar esta função em outro arquivo de script

import HelloWorld from './HelloWorld';

Você não necessariamente o importa, pois HelloWorldpode atribuir qualquer nome, pois é uma exportação padrão

Um pouco sobre exportação

Como o nome diz, é usado para exportar funções, objetos, classes ou expressões de arquivos ou módulos de script

Utiliites.js

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

Isso pode ser importado e usado como

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

Quando o padrão de exportação é usado, isso é muito mais simples. Arquivos de script apenas exporta uma coisa. cube.js

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

e usado como App.js

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

Em palavras simples -

A instrução de exportação é usada ao criar módulos JavaScript para exportar funções, objetos ou valores primitivos do módulo, para que possam ser usados ​​por outros programas com a instrução de importação.

Aqui está um link para obter um entendimento claro: MDN Web Docs

O entendimento mais simples para default exporté

Export é o recurso do ES6 que é usado para exportar um módulo (arquivo) e usá-lo em algum outro módulo (arquivo).

Exportação padrão:

1. default export é a convenção se você deseja exportar apenas um objeto (variável, função, classe) do arquivo (módulo).
2. Pode haver apenas uma exportação padrão por arquivo, mas não restrito a apenas uma exportação .
3. Ao importar o objeto exportado padrão, podemos renomeá-lo também.

Exportação ou Exportação Nomeada:

1. É usado para exportar o objeto (variável, função, calss) com o mesmo nome.

2. É usado para exportar vários objetos de um arquivo.

3. Não pode ser renomeado ao importar em outro arquivo, ele deve ter o mesmo nome que foi usado para exportá-lo.

No React, Vue e em muitas outras estruturas, o Export é usado principalmente para exportar componentes reutilizáveis ​​para criar aplicativos modulares.