Exportar predeterminado en React

Presentaremos los tipos de exportación en React y lo que hacen.

Tipos de exportaciones en React

Las exportaciones como export default ReactApp; y las importaciones como import logo from './logo.svg' son parte del sistema de Módulos ES6.

Hay dos tipos de exportaciones en ES6: exportaciones con nombre y exportaciones predeterminadas.

Exportaciones con nombre en React

Las exportaciones que se exportan utilizando el nombre de la función se conocen como exportaciones con nombre, como export Function ExFunc(){}.

Los módulos con nombre se pueden importar usando import { ExFunc } from 'module';. El nombre de la importación debe ser el mismo que el nombre de la exportación, como en este ejemplo ExFunc.

Podemos tener múltiples exportaciones con nombre en un módulo.

Exportaciones predeterminadas en React

La export predeterminada se utiliza para exportar una sola clase, primitiva o función desde un módulo. Hay diferentes formas de usar la export predeterminada.

Por lo general, la export predeterminada se escribe después de la función, como en el ejemplo a continuación.

# react
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;

Pero también se puede escribir como a continuación.

# react
export default class ReactApp extends React.Component {
  render() {
    return <p>Exported Using Default Export</p>;
  }
}

Y para funciones, se puede escribir como.

# react
export default function ReactApp() {
  return <p>Exported Using Default Export</p>
}

Una vez que hemos utilizado una export predeterminada, no necesariamente necesitamos importarla como ReactApp; podemos darle cualquier nombre.

# react
import Y from './ReactApp';

Y es el nombre que se le dará localmente a la variable asignada para contener el valor, y no tiene por qué llamarse el origen de la exportación.

Una cosa importante para recordar al usar la default export es que solo puede haber una default export, a diferencia de named export. Un módulo puede tener tanto el named export como una exportación predeterminada, y se pueden importar juntos.

# react
import Y, { ExFunc1, ExFunc2, etc... } from 'module';