Header Ads Widget

Ticker

6/recent/ticker-posts

Módulos ES6: Importación, Exportación y Predeterminado para React Native Devs

 He estado explorando React Native para crear aplicaciones móviles con React y JavaScript . Después de generar mi primer proyecto y comenzar a mirar el código, noté el uso de las características modernas de ES6 como las declaraciones importexportpara importar y exportar módulos y funciones de flecha , etc.

En este artículo, nos centraremos en la comprensión de los importexportdefaultpalabras clave.

En el App.jsarchivo, tenemos el siguiente código, truncado en aras de la brevedad:

import React, {Fragment} from 'react';
/* [...] */

const App = () => {
  return (
    <Fragment>
        <!-- [...] -->
    </Fragment>
  );
};

/* [...] */

export default App;

En este archivo, primero importamos las API ReactFragmentdel reactpaquete, a continuación, definimos un componente React basado en funciones que genera un montón de componentes React Native. Finalmente, exportamos el Appcomponente usando la export defaultdeclaración.

El exportdefaultpalabras clave

La exportpalabra clave se utiliza para exportar el símbolo, pero ¿qué pasa con la defaultpalabra clave?

En pocas palabras, cuando exporta un símbolo por defecto, no necesita especificar su nombre (preste atención aquí, este es el nombre que se usa dentro del módulo para el símbolo) cuando necesita importarlo.

Ahora, si miramos el index.jsarchivo, veremos el siguiente código:

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

Aquí es donde Appse importa nuestro componente exportado usando la importpalabra clave:

import App from './App';

Podemos usar cualquier nombre en lugar de Appy seguiremos importando el Appcomponente. Porque se exporta de forma predeterminada. Por ejemplo, podemos escribir lo siguiente en su lugar:

import MyApp from './App';

MyAppserá un alias para el Appsímbolo (que se exporta de forma predeterminada, por lo que no es necesario especificar su nombre "interno" para importarlo).

Espero que comprenda el significado de predeterminado porque puede ser confuso, ya que los desarrolladores generalmente usan el mismo nombre que se usa dentro del módulo para importar desde otro archivo JS. En nuestro ejemplo, usamos el Appnombre para importar el Appcomponente desde el App.jsarchivo.

Si desea obtener más información sobre los módulos ES6, continúe leyendo a continuación.

Módulos ES6

ES6 ha introducido soporte integrado para módulos en JavaScript, por lo que no necesitamos usar los otros sistemas utilizados en ES5 como:

  • Módulos CommonJS utilizados en Node.js (los módulos CommonJS se utilizan module.exportspara exportar código e require(path)importar código),
  • Definición de módulo asíncrono (AMD) utilizada en RequireJS .

Para obtener más información, lea Cómo escribir JavaScript modular con AMD, CommonJS & ES Harmony y ExploringJS: Módulos de Axel Rauschmayer .

Ahora, ¿qué es un módulo?

Un módulo es un fragmento de código que encapsula el código para una funcionalidad específica. Facilita la escritura de código desacoplado y fácil de mantener y comprobar.

Puede crear un módulo JavaScript simplemente creando un archivo JavaScript con la jsextensión y usar la exportpalabra clave para exportar un fragmento de código (un símbolo) como una función, objeto o variable. .

Nota : A diferencia de los módulos CommonJS que se cargan sincrónicamente, los módulos ES6 se cargan de forma asincrónica, lo que es más adecuado para el código de la interfaz.

En ES6, puede exportar un símbolo de dos formas:

  • Usando exportaciones con nombre,
  • Exportaciones predeterminadas.

Puede usar ambos dentro del mismo módulo, pero no se recomienda.

Exportación predeterminada

Al igual que hemos visto anteriormente, puede realizar una exportación predeterminada utilizando las palabras clave exportdefaultdelante del símbolo. Dado que es la exportación predeterminada, no es necesario que la importe con el mismo nombre en sus otros archivos JavaScript, pero es un caso común importar exportaciones predeterminadas con los mismos nombres que se usaron para definirlas dentro de sus módulos.

Exportación nombrada

Puede utilizar exportaciones con nombre en un módulo para exportar varios símbolos simplemente utilizando la exportpalabra clave delante de cada símbolo. Estas exportaciones se pueden distinguir entre sí mediante sus nombres y se denominan exportaciones con nombre .

Podemos cambiar nuestro App.jsarchivo de la siguiente manera:

import React, {Fragment} from 'react';
/* [...] */

export const App = () => {
  return (
    <Fragment>
        <!-- [...] -->
    </Fragment>
  );
};

/* [...] */

Simplemente eliminamos la defaultpalabra clave para realizar una exportación con nombre en lugar de una exportación predeterminada .

Luego podemos importar el Appcomponente en el index.jsarchivo de la siguiente manera:

import { App } from  './App';

Primero, usamos las llaves (asignación de desestructuración de ES6) y segundo, necesitamos especificar el mismo nombre usado en el módulo contenedor, es decir App.

Si tiene más de un archivo export. Por ejemplo, AppHeaderFooter, se puede escribir la siguiente instrucción para importarlos:

import { App, Header, Footer } from  './App';

Si tiene una exportación predeterminada (por ejemplo, la Appfunción) y exportaciones con nombre (por ejemplo, los componentes HeaderFooter), puede importarlos de la siguiente manera:

import App, { Header, Footer } from  './App';

También puede importar todos los símbolos exportados usando *as:

import * as app from './App';

Luego puede acceder a cada exportación nombrada como una propiedad:

console.log(app.App);
console.log(app.Header);
console.log(app.Footer);

Conclusión

Como resumen, hemos visto cómo usar las palabras clave importexportdefaultpara trabajar con módulos ES6 en React Native.


Publicar un comentario

0 Comentarios