Uma Biblioteca JavaScript é um arquivo JavaScript pré-escrito com alguns trechos de código, objetos e funções extremamente úteis para que possamos reutilizar as funções, objetos e trechos de código para realizar uma tarefa comum. O próprio ReactJS é um exemplo de biblioteca JavaScript. Mas a estrutura do arquivo e a sintaxe de codificação são um pouco diferentes no ReactJS do que no JavaScript vanilla normal. Portanto, neste artigo, aprenderemos como adicionar uma biblioteca JavaScript externa a um projeto ReactJS.

Vamos criar um aplicativo react e incluir uma biblioteca JavaScript externa no ReactJS em três abordagens. Estes são:

  1. Usando o pacote react-script-tag.
  2. Usando o pacote de capacete react.
  3. Usando métodos JavaScript DOM.

Criando o aplicativo React:

  • Etapa 1: crie um aplicativo React usando o seguinte comando dentro de seu terminal ou prompt de comando:

    npx create-react-app name_of_the_app

     



  • Etapa 2: depois de criar o aplicativo react, vá para o diretório de acordo com o nome do seu aplicativo usando o seguinte comando:

    cd name_of_the_app

Estrutura do projeto: Nossa estrutura de projeto será semelhante a esta.

Agora modifique o arquivo App.js padrão dentro do diretório do código-fonte de acordo com qualquer uma das seguintes abordagens. 

Abordagem 1: usando o pacote react-script-tag

Este é o primeiro método e também o método com a menor complexidade. A tag react-script é um pacote que vem com uma tag <script> que suporta renderização universal. Com a ajuda desta biblioteca, podemos anexar diretamente a tag <script> ao nosso documento. E dentro do atributo 'src' da tag de script, podemos incluir a URL da biblioteca JavaScript externa. 

Instalação: Abra um terminal dentro da pasta do projeto ReactJS e escreva o seguinte código para instalar o pacote react -script-tag .

npm install --save react-script-tag

Importar componente 'ScriptTag': Importe o componente 'ScriptTag' embutido da biblioteca react -script-tag na parte superior do arquivo onde queremos adicionar a tag de script.

import ScriptTag from 'react-script-tag';

Chame o componente <ScriptTag> dentro de nosso App.js

  • Agora chame o componente <ScriptTag> dentro de nosso componente App. Este é um componente JSX de fechamento automático.
  • Agora analise a URL de nossa biblioteca desejada com a ajuda do atributo 'src' .
  • O atributo hidratante recebe uma entrada booleana. Faça com que seja verdade se o cliente estiver hidratando a renderização do servidor. O valor padrão é 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;

Execute o aplicativo: Abra o terminal e escreva o seguinte comando em seu terminal.

npm start

Saída: inspecione a saída para verificar se nossa biblioteca foi adicionada corretamente ou não.

Abordagem 2: usando o pacote de capacete react

O capacete de reação também é um pacote npm bem conhecido, usado principalmente para adicionar um elemento no cabeçalho de um documento de reação. Podemos adicionar uma tag de script dentro do cabeçalho do documento usando este pacote. Analisar o CDN da biblioteca como uma fonte da tag do script irá eventualmente adicionar este script ao nosso documento.

Instalação: Abra o terminal dentro da pasta do projeto ReactJS e escreva o seguinte código para instalar o pacote react -helmet .

npm install --save react-helmet

Importar componente 'Capacete': Importe o componente 'Capacete' do pacote react-Helmet na parte superior do arquivo de código-fonte.

import {Helmet} from "react-helmet";

Chame o componente <Helmet> dentro de nosso arquivo App.js:

  • O capacete é um componente que não fecha automaticamente. É basicamente usado para adicionar código HTML dentro do <head> do documento. Ele pega as tags HTML que devem permanecer dentro do <head> e as exibe.
  • O pacote Helmet suporta renderização do lado do servidor e do lado do cliente.
  • Chame esse componente dentro de nosso componente JSX chamado 'App' e crie uma tag HTML <script> básica dentro dele. Na tag <script>, adicione a URL da biblioteca jQuery com o 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;

Execute o aplicativo: Abra o terminal e escreva o seguinte comando em seu terminal.

npm start

Saída: inspecione a saída para verificar se nossa biblioteca foi adicionada corretamente ou não.

Abordagem 3: usando métodos JavaScript DOM

Instalar tantos pacotes pode tornar nosso aplicativo pesado e lento também. Portanto, é melhor usar métodos JavaScript DOM. Não precisamos instalar nenhum pacote externo neste método. As etapas deste método são:

Crie a função:

  • Crie uma função que tenha como parâmetro o URL da biblioteca desejada.
  • O uso do método document.createElement cria uma tag de script vazia.
  • Defina seu atributo ' src ' como a URL analisada de nossa biblioteca.
  • Defina ' async ' como true, de modo que permite que o programa seja executado imediatamente onde o código síncrono bloqueará a execução do código restante até que termine o atual.
  • Anexe a tag de script criada usando o método document.body.appendChild .
  • Exporte a função e chame-a sempre que quisermos adicionar uma biblioteca personalizada em nosso código JSX.

Chame a função: chame a função dentro do componente App, colocando-a entre chaves. Passe o URL da nossa biblioteca desejada como uma 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;

Execute o aplicativo: Abra o terminal e escreva o seguinte comando em seu terminal.

npm start

Saída: inspecione a saída para verificar se nossa biblioteca foi adicionada corretamente ou não.