Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

ReactJS Integrating with Other Libraries

  • Last Updated : 28 Jun, 2021

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!