In modern web development, building full-stack applications often involves connecting a front-end framework like React with a database to store and manage data. MongoDB, a popular NoSQL database, pairs well with React for building scalable and flexible web apps. However, since React is a client-side framework, it can't directly interact with a database. That's where a back-end server—typically built with Node.js and Express—comes in.

In this article, we’ll explore the steps needed to connect a React app with MongoDB through an Express API. By the end of this guide, you’ll understand the process of setting up both the front-end and back-end for a full-stack React and MongoDB application.

1. Setting up the Back-end with Node.js and Express

To connect React with MongoDB, we need to establish a server that can interact with the database. Node.js is commonly used to set up this server, and Express.js, a minimalist web framework, makes it easy to create RESTful APIs that your React app can communicate with.

Step 1.1: Install Node.js and Set Up the Project

To get started, install Node.js from here. After installation, create a new directory for your project and initialize a Node.js app:

mkdir react-mongo-app
cd react-mongo-app
npm init -y

This initializes a basic Node.js project. Next, install Express to handle HTTP requests:

npm install express

Step 1.2: Set Up an Express Server

In the root of your project, create a file called server.js to define your server:

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const app = express();
const PORT = 5000;

// Middleware
app.use(cors());
app.use(express.json());

// MongoDB Connection
mongoose.connect('mongodb://localhost:27017/mydatabase', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
});

const db = mongoose.connection;
db.on('error', (error) => console.error(error));
db.once('open', () => console.log('Connected to MongoDB'));

// Routes
app.get('/', (req, res) => {
    res.send('Hello from Express');
});

app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

Here, we’re setting up a basic Express server that connects to a MongoDB database running locally. If you don’t have MongoDB installed, you can either install it locally or use MongoDB Atlas, a cloud-hosted version of MongoDB.

Step 1.3: Install Mongoose and MongoDB

MongoDB requires a way to interact with your Express server. Mongoose, an Object Data Modeling (ODM) library, makes it easy to define schemas and interact with MongoDB. Install Mongoose with the following command:

npm install mongoose

Make sure MongoDB is running by either starting it locally with mongod or by setting up a cloud instance with MongoDB Atlas.

Step 1.4: Define a Mongoose Model

Mongoose allows you to define schemas that represent the structure of the data you’ll store in MongoDB. For example, let’s create a schema for a simple item with a name and price:

const mongoose = require('mongoose');

const itemSchema = new mongoose.Schema({
    name: {
        type: String,
        required: true,
    },
    price: {
        type: Number,
        required: true,
    }
});

module.exports = mongoose.model('Item', itemSchema);

This Item model defines how data will be stored in MongoDB, with each item having a name and a price.

Step 1.5: Create API Routes

Now, let’s set up the API routes to handle requests from the React app. Add the following routes to your server.js to enable basic CRUD operations:

const Item = require('./models/Item');

// Create Item
app.post('/items', async (req, res) => {
    const item = new Item({
        name: req.body.name,
        price: req.body.price,
    });

    try {
        const newItem = await item.save();
        res.status(201).json(newItem);
    } catch (err) {
        res.status(400).json({ message: err.message });
    }
});

// Get all Items
app.get('/items', async (req, res) => {
    try {
        const items = await Item.find();
        res.json(items);
    } catch (err) {
        res.status(500).json({ message: err.message });
    }
});

These routes allow you to create new items and fetch all items from MongoDB. The React front-end will interact with these routes to manage data.

2. Setting up the Front-end with React

Now that the back-end is ready, we’ll move to the front-end, which is where React comes in. The React app will communicate with the back-end API to display data and handle user inputs.

Step 2.1: Create a React App

First, create a new React app using the create-react-app command:

npx create-react-app react-mongo-client
cd react-mongo-client

Step 2.2: Install Axios for API Calls

Axios is a promise-based HTTP client that simplifies making requests to the back-end. Install Axios in your React project:

npm install axios

Step 2.3: Fetch Data from the Express API

In your App.js, use Axios to fetch data from your Express server. Here’s an example of how to get all items from the /items route we set up earlier:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
    const [items, setItems] = useState([]);

    useEffect(() => {
        axios.get('http://localhost:5000/items')
            .then((response) => {
                setItems(response.data);
            })
            .catch((error) => {
                console.error('There was an error fetching the items!', error);
            });
    }, []);

    return (
        <div className="App">
            <h1>Items</h1>
            <ul>
                {items.map((item) => (
                    <li key={item._id}>{item.name}: ${item.price}</li>
                ))}
            </ul>
        </div>
    );
}

export default App;

This code sends a GET request to the back-end API and displays the items retrieved from MongoDB.

3. Running the Full-Stack Application

Once both the back-end and front-end are set up, you can run the app:

Step 3.1: Start the Express Server

In the back-end folder, run the Express server:

node server.js

Step 3.2: Start the React App

In the React app folder, start the development server:

npm start

At this point, your React app should be able to communicate with the Express API and MongoDB, displaying data retrieved from the database.

4. Deploying the App

To deploy this full-stack app, you can use platforms like Netlify or Vercel for the React front-end and services like Heroku or AWS for the back-end. MongoDB Atlas can handle the database in the cloud, allowing for scalability and easy management.

Conclusion

Connecting a React app with MongoDB requires a back-end server to handle database operations. In this guide, we walked through setting up a Node.js and Express back-end, connecting it to MongoDB via Mongoose, and building a React front-end to interact with the data. With this architecture, you can build powerful full-stack applications that scale and adapt to various use cases.