¿Qué hace “exportar por defecto” en JSX?

Solución:

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

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

En tu 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 nombradas – por ejemplo export function func() {} es una exportación con nombre con el nombre de func. Los módulos nombrados se pueden importar usando 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 la función en el ejemplo, tendrá que usar import { func } from 'module';. Puede haber varias exportaciones con nombre en un módulo.

Exportación predeterminada – es el valor que se importará del módulo, si usa la declaración de importación simple import X from 'module'. X es el nombre que se le dará localmente a la variable asignada para contener el valor, y no tiene que ser nombrado como la exportación de origen. Solo puede haber una exportación predeterminada.

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

export default se utiliza para exportar una sola clase, función o primitiva desde un archivo de secuencia de comandos.

La exportación también se puede escribir como

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

También puede 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 lo importa necesariamente como HelloWorld puede darle cualquier nombre ya que es una exportación predeterminada

Un poco de exportación

Como su nombre lo indica, se utiliza 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 utilizar 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 la exportación predeterminada, 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 usado como
App.js

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

Comprensión más simple para default export es

Export es la función de ES6 que se utiliza 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) del archivo (módulo).
2. Solo puede haber una exportación predeterminada por archivo, pero no se limita a una sola exportación.
3. Al importar un 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 varios objetos de un archivo.

3. No se puede renombrar al importar en otro archivo, debe tener el mismo nombre que se usó para exportarlo, pero podemos crear su alias usando as operador.

En React, Vue y muchos otros marcos, la exportación se usa principalmente para exportar componentes reutilizables para crear aplicaciones de base modular.

---

---

Utiliza Nuestro Buscador