¿Qué hace "export default" en JSX?

Quiero preguntar qué significa y hace la última oración (exportar HelloWorld predeterminado;) pero no puedo encontrar ningún tutorial al respecto.

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;

Exportar como export default HelloWorld;e importar , como import React from 'react'parte del sistema de módulos ES6 .

Un módulo es una unidad autónoma que puede exponer activos a otros módulos usando exporty adquirir activos de otros módulos usandoimport .

En su 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

En ES6 hay dos tipos de exportaciones:

Exportaciones con nombre : por ejemplo, export function func() {}una exportación con nombre con el nombre de func. Los módulos con nombre se pueden importar utilizando import { exportName } from 'module';.En este caso, el nombre de la importación debe ser el mismo que el de la exportación. Para importar el func en el ejemplo, tendrá que usar import { func } from 'module';. Puede haber múltiples exportaciones con nombre en un módulo.

Exportación predeterminada : es el valor que se importará desde el módulo, si utiliza la instrucción de importación simple import X from 'module'. X es el nombre que se asignará localmente a la variable asignada para contener el valor, y no tiene que nombrarse como la exportación de origen. Solo puede haber una exportación predeterminada.

Un módulo puede contener exportaciones con nombre y una exportación predeterminada, y se pueden importar juntas usando import defaultExport, { namedExport1, namedExport3, etc... } from 'module';.

export default se utiliza para exportar una sola clase, función o primitivo desde un archivo de script.

La exportación también se puede escribir como

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

También podría escribir esto como un componente de función como

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

Esto se usa para importar esta función en otro archivo de script

import HelloWorld from './HelloWorld';

No necesariamente lo importa, ya HelloWorldque puede darle cualquier nombre, ya que es una exportación predeterminada

Un poco sobre exportación

Como su nombre lo indica, se usa para exportar funciones, objetos, clases o expresiones desde archivos de script o módulos

Utiliites.js

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

Esto se puede importar y usar como

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

Cuando se usa el valor predeterminado de exportación, esto es mucho más simple. Los archivos de script solo exportan una cosa. cube.js

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

y se usa como App.js

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

En palabras simples

La declaración de exportación se usa al crear módulos JavaScript para exportar funciones, objetos o valores primitivos del módulo para que otros programas puedan usarlos con la declaración de importación.

Aquí hay un enlace para obtener una comprensión clara: MDN Web Docs

La comprensión más simple para default exportes

Export es la característica de ES6 que se usa para exportar un módulo (archivo) y usarlo en algún otro módulo (archivo).

Exportación predeterminada:

1. default export es la convención si desea exportar solo un objeto (variable, función, clase) desde el archivo (módulo).
2. Podría haber solo una exportación predeterminada por archivo, pero no restringida a una sola exportación .
3. Al importar el objeto exportado predeterminado, también podemos cambiarle el nombre.

Exportación o exportación con nombre:

1. Se utiliza para exportar el objeto (variable, función, calss) con el mismo nombre.

2. Se utiliza para exportar múltiples objetos desde un archivo.

3. No se puede renombrar al importar en otro archivo, debe tener el mismo nombre que se utilizó para exportarlo.

En React, Vue y muchos otros marcos, la exportación se utiliza principalmente para exportar componentes reutilizables para hacer aplicaciones modulares.