How to Create a React Frontend, Express Backend and Connect Them Together

Express Nodejs React1 Comment on How to Create a React Frontend, Express Backend and Connect Them Together

How to Create a React Frontend, Express Backend and Connect Them Together

Express is a popular unopinionated web framework, written in JavaScript and hosted within the Node.js runtime environment. It is also a modern backend technology and popular among new developers.

React, a simple and powerful library is gaining huge popularity among developers nowadays. The component architecture is making react an easier way of making the complicated web application UIs in record time. Also, the maintenance and bug fixes are simpler because the codes are divided into components.

So, if we learned JavaScript, we can develop both backend and frontend with it. This makes things easier to be a full-stack developer.

Other than Express, there is a list of frameworks which helps us in backend development.

Other backend frameworks:-

Because of browser support javascript, there is a huge list of front-end JavaScript development frameworks/libraries. But the popular among them are listed below,

Other front-end frameworks/libraries

But we are choosing Express as our backend technology and React as our front-end technology to build a sample application.

Before continuing this tutorial, I am assuming that you learned JavaScript.

If are a beginner in React, it’s recommended that you’d start with creating a basic counter app, todo list application or an attendance management app that’ll help you get started with React concepts.

Here we are going to make a simple React application and connect it to Nodejs/Express backend.

Creating a Node/Express Backend

First, we need to create a Backend to take requests from frontend and send responses according to it.

To get an idea about the express project we are going to build, I have shown the complete file structure of our project below.

1. Install Nodejs

Node.js actually provides a runtime environment to execute JavaScript code from outside a browser. NPM, the default package manager for Nodejs is used for managing and sharing the packages for any JavaScript projects.

Node.js and NPM are used by Express for the management of dependencies and runtime.

Installing Nodejs on our system may differ with our Operating System.

  • For macOS and Windows systems, use the below link to download and install Nodejs.
https://nodejs.org/en/download/
  • For Ubuntu users, Nodejs can be installed with the below commands.
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs
  • For others, the installation instructions are available in the below link.
https://nodejs.org/en/download/package-manager/

2. Install Nodemon

Nodemon is a tool that helps develop node.js based applications by enabling the live reloading feature.

npm i -g nodemon

3. Create a Project Directory

Create a project directory and navigate to it using our Command Prompt/Terminal. This can also be done using the Graphical User Interface(GUI).

mkdir express-backend
cd express-backend

4. Initialize a Node.js Project

It requires a package.json file inside our project directory to work with Node.js projects. So we need to initialize a Node.js project using the below command.

npm init

5. Install Express

In this project, we are going to make REST APIs using Express.js framework. So we need to install Express for our project.

npm i express --save

6. Install Cors

CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options.

npm i cors --save

7. Install Body-Parser

To handle HTTP POST request in Express.js version 4 and above, we need to install the middleware module called body-parser. When we don’t use it, we get the raw request, and your body and headers are not in the root object of the request parameter.

npm i body-parser --save

8. Install Morgan

Morgan is basically a logger, on any requests being made, it generates logs automatically.

npm i morgan --save

So after creating and installing 4 packages, the package.json file looks like the below.

9. Configure the Root File (index.js)

When initializing NPM, we selected index.js as our entry point(root file). So the app directs to index.js first and so we need to create and configure it.

9.1 Create index.js

We can create a file named index.js in our project directory using GUI or using our terminal.

touch index.js

9.2 Import all packages installed

Import all the packages we have installed earlier to our index.js file.

const express = require("express");
const app = express();
const cors = require("cors");
const bodyParser = require("body-parser");
const logger = require("morgan");

9.3 Define port number

Now define a port number in which our app needs to be started.

const port = process.env.PORT || 3001;

9.4 Use Logger

Use the logger package we have imported to get the log details of our application if needed.

app.use(logger('dev'));

9.5 Use Cors

Now use cors to enable Cross-Origin Resource Sharing.

app.use(cors());

9.6 Use Body-Parser

Also, use body-parser to handle HTTP POST requests.

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

9.7 Import and use players route

Yes. We did not create any route yet. But in the future steps, it will be made and configure. So just add the below lines in our root file.

const playersRouter = require("./routes/players");
app.use("/players", playersRouter);

9.8 Listen to the port we defined

We already defined a port number and it needs to be used when starting our project. So this port number must listen to our application.

app.listen(port, function() {
  console.log("Runnning on " + port);
});

9.9 Export the app module.

Now export the module app we have created.

module.exports = app;

10. Create a dummy database

Some data needs to sent to the frontend with a GET request. So it needs to create a dummy database. So first create a file named dummyDatabase.js, feed some data and export it.

touch dummyDatabase.js

The above command will generate a file named dummyDatabase.js. Open it and paste the array of objects players in it and export it.

let players = [
  { _id: 1, name: "Sachin", runs: "18426" },
  { _id: 2, name: "Dhoni", runs: "10500" },
  { _id: 3, name: "Virat", runs: "10843" }
];
module.exports = players;

11. Create Routes

Now we can create routes to handle the requests from front-end. In this project, we are only dealing with getting the list of players and getting single-player details. So we need two routes.

11.1 Create players.js route

We need to create a route file where all the functions of players are defined. So create a players.js file inside a directory named routes.

mkdir routes
cd routes
touch players.js

11.1 Define router

Import express package and put express.Router() in a variable called router.

const express = require("express");
const router = express.Router();

11.2 Import dummy database

Now import the dummy database file we have created earlier.

let players = require("../dummyDatabase");

11.3 Create a route to get the complete list of players

We want to get the complete list of players in our database. So we need to create a router for GET request to /list.

router.get("/list", async (req, res) => {
  try {
    res.status(200).json({
      data: players
    });
  } catch (err) {
    res.status(400).json({
      message: "Some error occured",
      err
    });
  }
});

Now, if we run our project, the below link will return the complete list of players.

http://localhost:3001/players/list

11.4 Create a route to get a single-player details

We got the full player list. Now we need each player details. This can be done by passing the id of each player as the API parameter from the frontend.

:id is the player_id passed as the URL parameter. It is used to find a single-player with the _id.

Note:-

The id that we are passing from frontend can be accessed from here as req.params.id and it needs to convert to the number type before comparing with database _id because the _ids in the database are in the form of numbers.

router.get("/list/:id", async (req, res) => {
  let { id } = req.params;
  id = Number(id);
  try {
    let player = players.find(player => player._id === id);
    res.status(200).json({
      data: player
    });
  } catch (err) {
    res.status(400).json({
      message: "Some error occured",
      err
    });
  }
});

So, the below link returns the details of player 3.

 http://localhost:3001/players/3

11.5 Export the module

Now export the router module we have created.

module.exports = router;

So the complete players.js file will look like below.

12. Running our Backend

So we have created a RESTful API using Nodejs and Express. Now we can run our backend using Nodemon. Nodemon can watch the changes we are adding to our project and update the live server itself.

nodemon index.js

13. Testing the APIs

So our server is running on port 3001. The recommended method of testing our APIs is with Postman and it can be downloaded using the link below.

https://www.getpostman.com/downloads/

But here, our backend only dealing with GET requests without headers. So we can simply test it within our browser.

13.1 GET the complete list of players

The API URL below will show the complete list of players as JSON.

http://localhost:3001/players/list

This will return the data of players from our Express backend without a specific format. I am using the JSON formatter extension in my chrome browser to format the JSON data.

13.2 GET a single-player details

To get the details of a single player, we need to pass the id with our API URL. So the below URL will return the single-player( _id: 2) details.

http://localhost:3001/players/list/2

Creating a React Application(Frontend)

Now it’s time to create the React application for our frontend.

To get an idea about the React project we are going to build, I have shown the complete file structure of our project below.

1. Install and Set Up React

We have already installed Nodejs on our system. So we can create a React application using NPX easily.

npx create-react-app react-frontend

If it hit with any errors, refer the detailed guides.

After creating a React application, open the project using a code editor. I recommend the VS code for this.

2. Adding Bootstrap(optional)

This is an optional step for styling our React application by adding Bootstrap CDN to the index.html file inside /public directory.

Under index.html file, add the below lines between <header></header> section.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>

So the complete index.html file will look like as below.

3. Configure App.js

Now our working area is App.js under /src directory. First of all, Clear all the contents in App.js first. We can start coding from line 0 onwards.

3.1 Import React and Component

At first, we need to import React and Component from react package.

import React, { Component } from "react";

3.2 Create a class App and export it

We need to create a class named App and export it. We are going to code everything inside this class. Because our react app is small, it does not need to divide our project as components.

export default class App extends Component {

}

3.3 Initialize all the states inside the constructor

So we need states to store data. The below states needs to be initialized.

list: if the state list is true, the list of players component will be displayed.

card: if the state card is true, the single-player card will be displayed.

players: this state stores the list array of players from the backend.

player: this stores a single-player detail from the backend.

constructor(props) {
    super();
    this.state = {
      list: true,
      card: false,
      players: [],
      player: {}
    };
}

3.4 Fetch the list of players from API and store it in the state

Now we need to fetch the list of players from the API we have created using Express earlier. This data needs to be stored in the state players. These operations must be done before mounting the component. So fetch the players list and store it inside a state before component mounts. So this has to be done inside componentDidMound().

componentDidMount() {
  fetch("http://localhost:3001/players/list")
  .then(response => response.json())
  .then( responseJson=> {
    this.setState({ players:responseJson.data });
  },
)}

3.5 Create a function to handle the view of a single-player card

Now we need to create a function showCard() which handles the view of single-player detail card. Inside this, it needs to fetch each player detail with the id and store it in a state named player.

This function can also be used for UI functions. Here we make list value false and card value true. This will hide players list view and show single-player card view.

Note:-

We can also implement this feature using React Navigation, but I not willing to complicate this small project.

showCard=id=> {
  fetch(`http://localhost:3001/players/${id}`)
  .then(response => response.json())
  .then(
  responseJson=> {this.setState({ player:responseJson.data })},
);
this.setState({
  list:false,
  card:true
});
};

3.6 Create a function to handle the view of players list

We have a Back button in card view and pressing it will call a function named showList() where it makes card value false and list value true. This will show players list view and hide the single-player card view.

showList = () => {
   this.setState({
     card: false,
     list: true
   });
};

3.7 Start Render function and return the view

Now we can start the render() function and return our views.

render(){
return(
<div className ="container">

</div>
)
}

This will show up a blank page in our browser window if the project is started.

So, before starting our react application, we need to add two UI components. The list view and the card view.

3.8 Set up the list view to show players list

Show this list view only if the state list if true. In this situation, map through the array stored in the state players and show each player name inside the map function. Also, when clicking each name, there have to execute the function showCard(). We have to pass the player id with this function because the data needs to be fetched from backed and shown in the card.

        {this.state.list ? (
          <div className="list-group">
            {this.state.players.map(player => (
              <li
                onClick={() => this.showCard(player._id)}
                className="list-group-item list-group-item-action"
              >
                {player.name}
              </li>
            ))}
          </div>
        ) : null}

3.9 Set up the card view to show a player detail

Show this card view only if the state card is true. In this situation, show details in the player state.

        {this.state.card ? (
          <div class="card" style={{ width: "18rem" }}>
            <div class="card-body">
              <h5 class="card-title">{this.state.player.name}</h5>
              <p class="card-text">{this.state.player.runs}</p>
              <div onClick={() => this.showList()} class="btn btn-primary">
                Back
              </div>
            </div>
          </div>
        ) : null}

So the complete App.js file will look like below.

4. Running our Frontend

We created a React frontend successfully and now it can be started using the following command.

npm start

This opens up our application in port 3000 and can be accessed with the below URL.

http://localhost:3000

GitHub

The complete project here I made is uploaded in GitHub for reference.

Backend

https://github.com/syamjayaraj/SimpleExpressBackend

Frontend

https://github.com/syamjayaraj/SimpleReactFrontend

Have a nice code!

Hi, I'm Syamlal, the co-founder of Redmonark. I'm a developer, writer and also have a little bit of experience in graphic designing.
Website https://syam.me

One thought on “How to Create a React Frontend, Express Backend and Connect Them Together

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top
%d bloggers like this: