ReactJS Integrating with Other Libraries

Integrating React JS with other libraries is a common practice in web development to utilize the functionality of those libraries. React JS is itself a JavaScript library. ReactJS workflow is like first importing the thing or component and 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.

Prerequisites:

• NPM & Node.js
• React JS

Approach:

This approach includes the installation and usage of UUID JavaScripti library which is used to generate a random sequence to be used as a unique ID. To integrate this library we will first install the npm package in the react project and then import in the components to start using.

Step to Create 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 i uuid

Project Structure:

Project Structure

The Updated dependencies in package.json file will look like.

"dependencies": {
        "@material-ui/core": "^4.12.4",
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "uuid": "^9.0.1",
        "web-vitals": "^2.1.4"
}

Example: The example generates the ID using the v4() method and displayed it to the user which changes on refresh.

Javascript

// Filename - 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