How to use React with MongoDB

React and MongoDB are two potent technologies that can be used in tandem to create scalable and efficient web applications. React is a well-known JavaScript library for creating user interfaces, whereas MongoDB is a document-oriented NoSQL database capable of handling large amounts of data. In this article, we’ll look at how to use React with MongoDB.

Prerequisites

Before we begin, make sure you have Node.js and MongoDB installed on your system.

Step 1: Begin by creating a new React project.

We need to create a new React project to use with MongoDB. Run the following command in your terminal:

npx create-react-app my-app
cd my-app
npm start

This will generate a new React project named my-app and launch the development server using npm start.

Step 2: Set up the MongoDB driver.

To connect to MongoDB, we must first install the MongoDB Node.js driver. To install the driver, type the following command:

npm install mongodb

Step 3: Set up a MongoDB database.

We must now create a new MongoDB database. To start the MongoDB server, open a new terminal window and type the following command:

mongod

This will start your system’s MongoDB server.

To connect to the MongoDB shell, open another terminal window and run the following command:

mongo

Run the following command in the MongoDB shell to create a new database called my-database:

use my-database

Step 4: Create a React component.

Let’s build a new React component that will display data from the MongoDB database. Create a new file called Data.js in your React project’s src folder. Include the following code in the file:

import React, { useState, useEffect } from 'react';
import { MongoClient } from 'mongodb';

function Data() {
  const [data, setData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const client = await MongoClient.connect('mongodb://localhost:27017');
      const db = client.db('my-database');
      const collection = db.collection('my-collection');
      const result = await collection.find().toArray();
      setData(result);
    }
    fetchData();
  }, []);

  return (
    <div>
      <h1>Data from MongoDB:</h1>
      <ul>
        {data.map((item) => (
          <li key={item._id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default Data;

This component fetches data from the my-collection collection in the my-database database and displays it in a list.

Step 5: Compile the component

Let’s use our React app to render the Data component. Add the following code to the App.js file in the src folder:

import React from 'react';
import Data from './Data';

function App() {
  return (
    <div className="App">
      <Data />
    </div>
  );
}

export default App;

Step 6: Launch the app

Finally, let’s launch the React app and view the MongoDB data in our browser. Run the following command in your terminal:

npm start

This will launch the React application in your default browser. The data from the MongoDB database should be displayed in a list on the screen.

Conclusion

Combining React and MongoDB is an effective way to create scalable and efficient web applications. You can easily connect to MongoDB and fetch data to display in your React app by following the steps in this article. Remember to keep your code clean and organized at all times for easier maintenance and scalability. Have fun coding!