In this article, we are going to see how one can integrate any JavaScript library in the React project. ReactJS is itself a JavaScript library developed by Facebook. The ReactJS workflow is like first importing the thing or component then using it in your code, you can export your components and import wherever you like in your files. There are so many ReactJS libraries or JavaScript libraries available like uuid, toastify, etc. They can be easily integrated into your ReactJS app.
In the following example, we are going to integrate one JavaScript library known as uuid which is very popular, and it gives us the string of a unique ID every time we use the uuid so that we do not need to give the ID manually.
Creating React Application And Installing Module:
-
Step 1: Create a React application using the following command.
npx create-react-app foldername
-
Step 2: After creating your project folder i.e. foldername, move to it using the following command.
cd foldername
-
Step 3: After creating the ReactJS application, Install the uuid module using the following command.
npm install uuid
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code. We have generated the ID using the v4() method and displayed it to the user which changes on refresh.
App.js
import React from "react"import { v4 } from "uuid" export default function App() { const id = v4() return ( <div> <h1>Your unique id is :</h1> <h2>{id}</h2> <h3>Refresh for new id</h3> </div> ) } |
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output.
React with other libraries
Reference: https://www.npmjs.com/package/uuid
