How to Use React with Node.js Express.js

React is a popular front-end JavaScript library that is used for building user interfaces. Node.js is a popular back-end JavaScript runtime that is used for building server-side applications. Express.js is a popular web framework for Node.js. In this article, we will learn how to use React with Node.js and Express.js to build a full-stack web application.

Prerequisites

Before we get started, make sure you have the following installed on your system:

• Node.js
• npm (Node Package Manager)
• React
• Express.js

Creating a New React App

To get started, we need to create a new React app. Open your terminal and run the following command:

npx create-react-app my-app

This will create a new React app in a folder named my-app. Navigate to the my-app folder by running the following command:

cd my-app

Installing Express.js

Next, we need to install Express.js. Run the following command in your terminal:

npm install express --save

This will install Express.js and save it as a dependency in your package.json file.

Creating a New Express.js App

Now, we need to create a new Express.js app. Create a new file named server.js in the root of your React app. Open the server.js file and add the following code:

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

app.listen(3001, () => {
  console.log('Server running on port 3001');
});

This code imports the Express.js library, creates a new Express.js app, and starts a server on port 3001.

Connecting React with Express.js

To connect our React app with our Express.js app, we need to install the http-proxy-middleware package. Run the following command in your terminal:

npm install http-proxy-middleware --save

This package allows us to proxy requests from our React app to our Express.js app.

Next, open the src/setupProxy.js file in your React app and add the following code:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3001',
      changeOrigin: true,
    })
  );
};

This code creates a proxy middleware that forwards requests to /api to our Express.js server running on localhost:3001.

Building the Front-end

Now, we can start building our front-end React app. Open the src/App.js file and replace the code with the following:

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

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetch('/api/message')
      .then((res) => res.json())
      .then((data) => setMessage(data.message));
  }, []);

  return (
    <div>
      <h1>Hello World!</h1>
      <p>{message}</p>
    </div>
  );
}

export default App;

This code uses the useState and useEffect hooks to fetch a message from our Express.js server and display it in our React app.

Building the Back-end

Next, we need to build our back-end Express.js app. Open the server.js file and replace the code with the following:

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

app.get('/api/message', (req, res) => {
  res.json({ message: 'Hello from Express.js!' });
});

app.listen(3001, () => {
  console.log('Server running on port 3001');
});

This code creates a new route for our Express.js app that responds to GET requests to /api/message with a JSON object containing a message.

Running the App

To run the app, open two terminal windows. In the first terminal window, navigate to the root of your React app and run the following command:

npm start

This will start the React development server on port 3000.

In the second terminal window, navigate to the root of your React app and run the following command:

node server.js

This will start the Express.js server on port 3001.

Now, open your web browser and navigate to http://localhost:3000. You should see a web page that says "Hello World!" and displays a message from our Express.js server.

Conclusion

In this article, we learned how to use React with Node.js and Express.js to build a full-stack web application. We created a new React app, installed Express.js, created a new Express.js app, connected our React app with our Express.js app, and built the front-end and back-end of our app. We also learned how to run the app and test it in our web browser. With this knowledge, you can now start building your own full-stack web applications using React, Node.js, and Express.js.