JavaScript library is pre-written collection of code snippets, objects, and functions so that we can reuse the functions, objects, and code snippets to perform a common task. It is generally use as the scripts in the <script> tags. We can use different methods to include external JavaScript libraries in ReactJS.
Table of Content
Steps to create the application:
Step 1: Create a React application using the following command inside your terminal or command prompt:
npx create-react-app name_of_the_app
Step 2: After creating the react application move to the directory as per your app name using the following command:
cd name_of_the_app
Project Structure
Now modify the default App.js file inside your source code directory according to any of the following approaches.
Approach 1: Using react-helmet Package
The react-helmet is also a well-known npm package mostly used for adding an element at the head of a react document. We can add a script tag inside the head of the document using this package. Parsing the CDN of the library as a source of the script tag will eventually add this script to our document.
Installation: Open the terminal inside your ReactJS project folder and write the following code to install react-helmet Package.
npm install --save react-helmet --legacy-peer-deps
Import ‘Helmet’ component: Import the ‘Helmet’ component from react-helmet package at the top of the source code file.
import {Helmet} from "react-helmet";
Call the <Helmet> component inside our App.js file:
- Helmet is a non-self closing component. It is basically used to add HTML code inside the <head> of the document. It takes the HTML tags which are desired to remain inside <head> and outputs them.
- The Helmet package supports both server-side and client-side rendering.
- Call this component inside our JSX component named ‘App’ and create a basic HTML <script> tag inside it. Into the <script> tag add the URL of the jQuery library with the ‘src’ attribute.
Example: This example use react-helmet npm package to add external script in the react-app
App.js
import React from "react";import "./App.css";import { Helmet } from "react-helmet";function App() { return ( <div className="App"> <h1> Geeksforneveropen : How to include an external JavaScript library to ReactJS? </h1> <Helmet> <script src= type="text/javascript" /> </Helmet> </div> );}export default App; |
Run the application: Open the terminal and write the following command in your terminal.
npm start
Output: Inspect the output to check that our library is properly added or not.
Approach 2: Using JavaScript DOM Methods
Installing that many packages can make our application heavy and slow as well. So using JavaScript DOM methods is best. We have no need to install any external packages in this method. The steps of this method are:
- Create a function that takes the cdn link/ url of the desired library
- Create an emplty script element using dom method document.createElement.
- Assign the url to src attribute and set async true to load the script immediatly when program starts.
- Use document.body.appendChild method to add this script to the html body.
- Call the function inside the App component enclosing it inside curly brackets. Pass the URL of our desired library as a string.
App.js
import React from "react";import "./App.css";// Create the functionexport 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> Geeksforneveropen : How to include an external JavaScript library to ReactJS? </h1> {/* Call the function to add a library */} {AddLibrary( )} </div> );}export default App; |
Run the Application: Open the terminal and write the following command in your terminal.
npm start
Output: Inspect the output to check that our library is properly added or not.
Approach 3: Using <scirpt> tag in index.html of public directory
We can also add the scripts directly in the ReactJS using the index.html file in the public directory. Go to the public directory and add the CDN/script link using the script tag inside the body tag as shown
Example: In this example script tag is added with the script url in the body tag in html file.
Javascript
// App.jsimport React from "react";import "./App.css";import { Helmet } from "react-helmet";function App() { return ( <div className="App"> <h1> Geeksforneveropen : How to include an external JavaScript library to ReactJS? </h1> </div> );}export default App; |
HTML
<!-- public/index.html--><!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <title>React App</title></head><body> <div id="root"></div> <script type="text/javascript"></script></body></html> |
Run the Application: Open the terminal and write the following command in your terminal.
npm start
Output: Inspect the output to check that our library is properly added or not.
