Importar archivo JavaScript en ReactJS

Este tutorial demuestra el uso de importación/exportación (módulo ES6) y exportaciones predeterminadas para importar archivos JavaScript a ReactJS.

Importar archivo JavaScript en ReactJS

Usando el sistema nativo de módulo ES6, podemos incluir un archivo JavaScript en otro archivo JavaScript. Nos permite crear modularidad de código y compartir código entre varios archivos JavaScript.

Varias técnicas incluyen un archivo JS, como JavaScript include y Node JS require.

El sistema nativo del módulo ES6 ofrece un mecanismo para dividir el código en varios archivos y directorios al tiempo que garantiza que todas las piezas individuales del código puedan comunicarse.

Podemos importar un archivo JS de dos maneras en React:

1. Utilice importar/exportar | módulo ES6
2. Utilice las exportaciones predeterminadas

Utilice importar/exportar (módulo ES6) para importar un archivo JS a ReactJS

Comencemos importando y exportando usando el método ES6. Pero, primero, cree el método y las constantes que se enumeran a continuación en un archivo llamado helper.js.

export function greetFunction(name) {
  return `Hello, ${name}`;
}
export const appMessage = 'Hello World! Welcome to DefltStack!';

Verá que declaramos que la función y la variable podrían ser utilizadas por otros archivos usando la palabra clave exportar antes que ellos.

Sintaxis:

import {object1, object2, ...} from 'filename.js'

Cree otro archivo, asígnele el nombre main.js y luego pegue el siguiente código dentro de él:

import {appMessage, greetFunction} from './helper.js';

export default function App() {
  const greetDelftStack = greetFunction('DelftStack');
  return (
    <Fragment>
      {appMessage}
      <br>
      {greetDelftStack}
    </Fragment>
  )
}

Producción :

Hello World! Welcome to DefltStack!
Hello, DelftStack

Al definir greetFunction y appMessage entre llaves en la primera línea, los estamos importando desde helper.js. Ahora podemos usar los objetos importados porque están definidos en el mismo archivo después de esta línea.

Luego, la salida de ambos objetos se registró en la consola.

Use exportaciones predeterminadas para importar archivos JS a ReactJS

La palabra clave predeterminada nos permite exportar automáticamente un objeto de un archivo. ¿Por qué importa esto? Veamos una ilustración. Agregue predeterminado antes de la función greetingFunction (nombre) en helper.js para convertirlo en una exportación predeterminada:

export default function greetFunction(name) {
  return `Hello, ${name}`;
}

Ahora puede importarlo a main.js similar a esto:

import anyFnName from './helper.js';
export default function App() {
  const greetDelftStack = anyFnName('DelftStack');
  return (
    <main>
      {greetDelftStack}
    </main>
  )
}

Producción :

Hello, DelftStack

El proceso exacto funcionará como antes. AnyFnName se importa desde helper.js durante la exportación predeterminada. Debido a la ausencia de anyFnName en helper.js, la exportación predeterminada es greetFunction(), en este caso se exporta como nombre aleatorio.

Puede encontrar la demostración de estos códigos de ejemplo aquí y practicar. Pero, primero, hablemos de algunos aspectos cruciales relacionados con el módulo ES6 que los usuarios deben tener en cuenta al utilizarlos:

• Las llaves deben eliminarse al importar exportaciones predeterminadas. Se habría generado un error indicando que no existe dicha exportación.
• Múltiples exportaciones pueden estar presentes en un archivo. Sin embargo, un archivo solo puede tener una exportación “predeterminada”.
• No se puede importar una exportación estándar utilizando un nombre de alias. Por lo tanto, debemos usar el mismo nombre al importar una exportación típica.
• Podemos combinar exportaciones predeterminadas y regulares. Por ejemplo, para exportaciones estándar o con nombre, use {} y deje {} para la exportación predeterminada.
• Utilizando el *, podemos importar el contenido de un módulo. A continuación, el módulo se utilizará como un espacio de nombres para acceder a todas las exportaciones.
• Podemos exportar todos los objetos simultáneamente al final del archivo.

Por lo tanto, puede elegir cualquiera de los enfoques anteriores para importar archivos JavaScript a ReactJS.