Módulos React ES6

Módulos

Los módulos de JavaScript le permiten dividir su código en archivos separados.

Esto facilita el mantenimiento del código base.

Los módulos ES se basan en las declaraciones importy export.

Exportar

Puede exportar una función o variable desde cualquier archivo.

Vamos a crear un archivo llamado person.jsy llenarlo con las cosas que queremos exportar.

Hay dos tipos de exportaciones: Nombradas y Predeterminadas.

Exportaciones con nombre

Puede crear exportaciones con nombre de dos maneras. En línea individualmente, o todos a la vez en la parte inferior.

export const name = "Jesse"
export const age = "40"

const name = "Jesse"
const age = "40"

export { name, age }

Exportaciones predeterminadas

Vamos a crear otro archivo, llamado message.js, y usarlo para demostrar la exportación predeterminada.

Solo puede tener una exportación predeterminada en un archivo.

const message = () => {
  const name = "Jesse";
  const age = "40";
  return name + ' is ' + age + 'years old.';
};

export default message;

Importar

Puede importar módulos a un archivo de dos maneras, en función de si se denominan exportaciones o exportaciones predeterminadas.

Las exportaciones con nombre deben desestructurarse utilizando llaves. Las exportaciones predeterminadas no.

import { name, age } from "./person.js";

import message from "./message.js";