¿Cómo incluir una biblioteca de JavaScript externa en ReactJS?

Una biblioteca JavaScript es un archivo JavaScript preescrito con algunos fragmentos de código, objetos y funciones extremadamente útiles para que podamos reutilizar las funciones, los objetos y los fragmentos de código para realizar una tarea común. ReactJS en sí mismo es un ejemplo de una biblioteca de JavaScript. Pero la estructura del archivo y la sintaxis de codificación son un poco diferentes en ReactJS que en JavaScript normal. Entonces, en este artículo, vamos a aprender cómo agregar una biblioteca JavaScript externa a un proyecto ReactJS.

Vamos a crear una aplicación de reacción e incluir una biblioteca de JavaScript externa a ReactJS en tres enfoques. Estos son:

1. Usando el paquete react-script-tag.
2. Usando el paquete react-helmet.
3. Uso de métodos DOM de JavaScript.

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando dentro de su terminal o símbolo del sistema:

  npx create-react-app name_of_the_app

 

• Paso 2: después de crear la aplicación de reacción, muévase al directorio según el nombre de su aplicación usando el siguiente comando:

  cd name_of_the_app

Estructura del proyecto: La estructura de nuestro proyecto se verá así.

Ahora modifique el archivo App.js predeterminado dentro de su directorio de código fuente de acuerdo con cualquiera de los siguientes enfoques. 

Enfoque 1: uso del paquete react-script-tag

Este es el primer método y el método con la menor complejidad también. La etiqueta react-script es un paquete que viene con una etiqueta <script> que admite la representación universal. Con la ayuda de esta biblioteca, podemos agregar directamente la etiqueta <script> a nuestro documento. Y dentro del atributo ‘src’ de la etiqueta del script, podemos incluir la URL de la biblioteca JavaScript externa. 

Instalación: abra una terminal dentro de la carpeta de su proyecto ReactJS y escriba el siguiente código para instalar el paquete react-script-tag .

npm install --save react-script-tag

Importe el componente ‘ScriptTag’: Importe el componente ‘ScriptTag’ incorporado de la biblioteca de etiquetas de script de reacción en la parte superior del archivo donde queremos agregar la etiqueta de script.

import ScriptTag from 'react-script-tag';

Llame al componente <ScriptTag> dentro de nuestro App.js

• Ahora llame al componente <ScriptTag> dentro de nuestro componente App. Este es un componente JSX de cierre automático.
• Ahora analice la URL de nuestra biblioteca deseada con la ayuda del atributo ‘src’ .
• El atributo de hidratación toma una entrada booleana. Hágalo realidad si el cliente está hidratando el renderizado del servidor. El valor predeterminado es falso.

import React from 'react';
import './App.css';
import ScriptTag from 'react-script-tag';
  
function App() {
  
  return (
    <div className='App'>
      <h1>Geeksforgeeks : How to include an external 
      JavaScript library to ReactJS?</h1>
      <ScriptTag isHydrating={true} type="text/javascript" 
      src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" />
    </div>
  );
}
  
export default App;

Ejecute la aplicación: abra la terminal y escriba el siguiente comando en su terminal.

npm start

Salida: inspeccione la salida para verificar que nuestra biblioteca se haya agregado correctamente o no.

Enfoque 2: uso del paquete react-helmet

El casco de reacción también es un paquete npm bien conocido que se usa principalmente para agregar un elemento al principio de un documento de reacción. Podemos agregar una etiqueta de script dentro del encabezado del documento usando este paquete. Al analizar el CDN de la biblioteca como fuente de la etiqueta de secuencia de comandos, eventualmente se agregará esta secuencia de comandos a nuestro documento.

Instalación: abra el terminal dentro de la carpeta de su proyecto ReactJS y escriba el siguiente código para instalar el paquete react-helmet .

npm install --save react-helmet

Importar el componente ‘Helmet’: importe el componente ‘Helmet’ del paquete react-helmet en la parte superior del archivo de código fuente.

import {Helmet} from "react-helmet";

Llame al componente <Helmet> dentro de nuestro archivo App.js:

• El casco es un componente que no se cierra automáticamente. Básicamente se usa para agregar código HTML dentro del <head> del documento. Toma las etiquetas HTML que se desea que permanezcan dentro de <head> y las genera.
• El paquete Helmet admite la representación tanto del lado del servidor como del lado del cliente.
• Llame a este componente dentro de nuestro componente JSX llamado ‘Aplicación’ y cree una etiqueta HTML básica <script> dentro de él. En la etiqueta <script> agregue la URL de la biblioteca jQuery con el atributo ‘src’.

import React from 'react';
import './App.css';
import {Helmet} from "react-helmet";
  
function App() {
  
  return (
    <div className='App'>
    <h1>Geeksforgeeks : How to include an external 
    JavaScript library to ReactJS?</h1>
    <Helmet>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" 
    type="text/javascript" />
    </Helmet>
    </div>
  );
}
  
export default App;

Ejecute la aplicación: abra la terminal y escriba el siguiente comando en su terminal.

npm start

Salida: inspeccione la salida para verificar que nuestra biblioteca se haya agregado correctamente o no.

Enfoque 3: uso de métodos DOM de JavaScript

La instalación de tantos paquetes puede hacer que nuestra aplicación sea pesada y lenta también. Entonces, usar los métodos DOM de JavaScript es lo mejor. No tenemos necesidad de instalar ningún paquete externo en este método. Los pasos de este método son:

Crea la función:

• Cree una función que tome la URL de la biblioteca deseada como parámetro.
• El uso del método document.createElement crea una etiqueta de secuencia de comandos vacía.
• Establezca su atributo ‘ src ‘ como la URL analizada de nuestra biblioteca.
• Establezca ‘ async ‘ como verdadero, de modo que permita que el programa se ejecute inmediatamente donde el código síncrono bloqueará la ejecución adicional del código restante hasta que finalice el actual.
• Agregue la etiqueta de secuencia de comandos creada utilizando el método document.body.appendChild .
• Exporte la función y llámela cada vez que queramos agregar una biblioteca personalizada en nuestro código JSX.

Llame a la función: llame a la función dentro del componente de la aplicación encerrándolo entre corchetes. Pase la URL de nuestra biblioteca deseada como una string.

import React from 'react';
import './App.css';
  
// Create the function
export function AddLibrary(urlOfTheLibrary) {
  const script = document.createElement('script');
  script.src = urlOfTheLibrary;
  script.async = true;
  document.body.appendChild(script);
}
  
function App() {
  return (
    <div className="App">
      <h1>Geeksforgeeks : How to include an external 
      JavaScript library to ReactJS?</h1>
  
  {/* Call the function to add a library */}
  {AddLibrary(
  'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js')}
    </div>
  );
}
  
export default App;

Ejecute la aplicación: abra la terminal y escriba el siguiente comando en su terminal.

npm start

Salida: inspeccione la salida para verificar que nuestra biblioteca se haya agregado correctamente o no.