A Step-by-Step Guide to Developing a Full Stack Web Application using React.js and Express.js

Introduction

In this guide, we will walk you through the process of developing a full stack web application using React.js for the frontend and Express.js for the backend. By the end of this tutorial, you will have a solid understanding of how these two technologies work together to create a dynamic and responsive web application.

Prerequisites

Before we get started, make sure you have the following prerequisites:

• Basic knowledge of HTML, CSS, and JavaScript
• Node.js and npm installed on your machine
• A code editor such as Visual Studio Code or Sublime Text

Step 1: Setting Up the Project

First, let’s create a new directory for our project and navigate into it:

        
            mkdir fullstack-app
            cd fullstack-app
        
    

Next, initialize a new Node.js project by running the following command:

        
            npm init -y
        
    

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

Step 2: Setting Up the Backend with Express.js

Now, let’s set up the backend of our application using Express.js. First, install Express as a dependency:

        
            npm install express
        
    

Create a new file named server.js in the root of your project directory and add the following code:

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

            const PORT = process.env.PORT || 5000;

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

This code sets up a basic Express server that listens on port 5000. You can change the port number if needed.

Step 3: Creating the React Frontend

Next, let’s create the frontend of our application using React.js. We will use Create React App to set up our React project. Run the following command in your project directory:

        
            npx create-react-app client
        
    

This will create a new directory named client inside your project directory with a basic React project structure.

Step 4: Connecting the Frontend to the Backend

Now that we have both the backend and frontend set up, we need to connect them together. We will use a proxy to communicate between the frontend and backend. Update the package.json file in the client directory as follows:

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

This tells the React development server to proxy API requests to our Express server running on port 5000.

Step 5: Creating a Sample API

Let’s create a sample API endpoint in our Express server that the React frontend can call. Update the server.js file with the following code:

        
            app.get('/api/data', (req, res) => {
                res.json({ message: 'Hello from the API' });
            });
        
    

This code creates a GET endpoint at /api/data that returns a JSON response with a simple message.

Step 6: Fetching Data from the API in React

In the React frontend, let’s fetch data from our API endpoint. Update the App.js file in the client/src directory with the following code:

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

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

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

                return (
                    <div>
                        {data ? <p>{data.message}</p> : <p>Loading...</p>}
                    </div>
                );
            }

            export default App;
        
    

This code uses the fetch API to make a GET request to our API endpoint and updates the state with the response data. The message from the API will be displayed on the screen.

Step 7: Running the Application

Now that we have set up both the backend and frontend, let’s run our full stack web application. In one terminal, start the Express server by running:

        
            node server.js
        
    

And in another terminal, start the React development server by running:

        
            cd client
            npm start
        
    

You can now open your browser and navigate to http://localhost:3000 to see your full stack web application in action.

Conclusion

Congratulations! You have successfully developed a full stack web application using React.js and Express.js. You have learned how to set up the backend with Express, create a frontend with React, connect the two together, and fetch data from an API. This is just the beginning of what you can achieve with these powerful technologies. Keep exploring and building amazing web applications!