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.