How to Connect Express with React: A Comprehensive Guide

Express.js and React are two powerful frameworks that are widely used in web development. Express.js is a backend framework for creating web applications in Node.js, while React is a frontend library for building user interfaces. When combined, they create a robust and efficient full-stack web application. This article will explore the step-by-step process of connecting Express with React.

Set Up a New Express Application The first step is to set up a new Express application. Make sure you have Node.js and npm (Node Package Manager) installed on your system. Open your terminal and create a new directory for your project. Navigate to the project directory and run the following command to initialize a new Node.js application:

$ npm init -y

This will create a package.json file in your project directory.

Install Express Next, install Express as a dependency for your project. Run the following command in your terminal:

$ npm install express

This will download and install Express in your project.

Create an Express Server Now, create a new file named server.js (or any other suitable name) in your project directory. This file will serve as the entry point for your Express application. Open server.js and add the following code:

const express = require('express');
const app = express();
const port = 5000;

app.get('/', (req, res) => {
  res.send('Hello from Express!');
});
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

In this code, we import the Express module, create an instance of the Express application, and define a route that responds with the text “Hello from Express!” when a GET request is made to the root URL (“/”). Finally, we start the server and listen on port 5000.

Test the Express Server To test your Express server, go to your terminal and run the following command:

$ node server.js

This will start the server, and you should see the message “Server is running on port 5000” in your terminal. Open your browser and navigate to http://localhost:5000, and you should see the "Hello from Express!" message displayed.

Create a React Application Now that your Express server is up and running, it’s time to create a React application. In your terminal, navigate to the project directory and run the following command to generate a new React application:

$ npx create-react-app client

This command will create a new directory containing the React application's code.

Start the React Development Server Navigate to the client directory by running cd client in your terminal. Inside the client directory, start the React development server with the following command:

$ npm start

This will start the development server, and your React application will be accessible at http://localhost:3000.

Proxy API Requests from React to Express By default, the React development server runs on port 3000, while your Express server is running on port 5000. To avoid cross-origin issues during development, we can proxy API requests from the React application to the Express server.

Open the package.json file in the client directory and add the following line:

"proxy": "http://localhost:5000"

This configuration tells the React development server to proxy all API requests to http://localhost:5000. Now, whenever you make an API request from the React application, it will be automatically redirected to the Express server.

Connect React with Express To connect your React application with the Express server, open the src/App.js file in the client directory. Replace the existing code with the following:

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

function App() {
  const [message, setMessage] = useState('');
  useEffect(() => {
    fetch('/')
      .then((res) => res.text())
      .then((data) => setMessage(data))
      .catch((err) => console.log(err));
  }, []);
  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
}

export default App;
In this code, we use the useEffect hook to fetch the data from the Express server when the component mounts. The fetched data is stored in the message state, which is then rendered in a h1 tag.

Test the Integration Go back to your terminal and make sure both the Express server and the React development server are running. Visit http://localhost:3000 in your browser, and you should see the message "Hello from Express!" displayed on the page. Congratulations! You have successfully connected Express with React.

Conclusion In this article, we explored the step-by-step process of connecting Express with React. We set up an Express server, created a React application, and established communication between the two. By following these steps, you can build powerful full-stack web applications with ease. Remember to refer to the official documentation of Express and React for more advanced features and techniques. Happy coding!