Calling Express API in React using react-script

Actually, I am new in React and I am trying to fetch backend API using ‘fetch’ method which is already included in create-react-app.
Here, I will tell you how to fetch data from the server side and display it on the Frontend.

Example : express-react

Step 1: Create the Express app and configure the port.

First, install the express-generator, create the express app and install all its dependencies. I used template engine as .ejs and -g for global installation, i for install.

$ npm i -g express-generator
$ express — view=ejs express-react
$ cd express-react && npm install

Change the port 3000 to 3005 or any other port.
Because, By default, Express is running on port 3000 and create-react-app is also run on the same 3000 port. To avoid the conflict between them, start Express on port 3005.

• Edit the ‘express-react/bin/www’ and change the port from 3000 to 3005.

Step 2. Create the React app in express-react directory and configure its proxy.

Install the create-react-app globally, and create ‘client’ inside the ‘express-react’ where all the react stuff is installed and at last create a proxy in a ‘package.json’ file.

Proxy use:
React makes an API request to localhost:3000, React development server And then the development server simply proxies that request to the API server, and negating any CORS(Cross-Origin Resource sharing) issues.

$ npm i -g create-react-app

Inside the express-react, run this command

$ create-react-app client

Configure the proxy in ‘express-react/client/package.json’.

• “proxy” : “http://localhost:3005"

Step 3. To Run the express and react server concurrently.

Install the ‘concurrently’ module inside the express-react.
Remember it is installed in express-react, not in the express-react/client directory.

$ npm i -D concurrently

To run both servers with 1 command ‘npm start’, Edit the ‘express-react/package.json’ , In “script” change, “start” to

• “start”: “concurrently \”node ./bin/www\” \”cd client && npm start\””

At this point there are 2 servers ,
1- express server by ‘node ./bin/www’
2- react server by ‘cd client && npm start’

Step 4. Fetch the data from express and display it on React component.

Edit the ‘express-react/client/src/App.js’.

import React, { Component } from 'react';
//import logo from './logo.svg';
import './App.css';
class App extends Component {
   constructor(){
       super();
       this.state ={users: []};
   }
   componentDidMount() {
          fetch('/users')
            .then(res => {
                console.log(res);
                return res.json()
             })
            .then(users => { 
                console.log(users); 
                this.setState({ users })
             });
         }
   render() {
        return (
            <div className="App">
                <h1>Users</h1>
                {this.state.users.map(user =>
                <div key={user.id}>user: {user.name} Password: {user.password}</div>
              )}
            </div>
        );
    }
}
export default App;

Edit the ‘express-react/routes/users.js’ and Remeber it is ‘users.js’ not ‘index.js’.

var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
 // res.send('respond with a resource');
  res.json([{
    id: 1,
    name: "Hiccup",
    password: 'hiccup'
  }, {
    id: 2,
    name: "King Arthur",
    password: 'king-arthur'
  }]);
});
module.exports = router;

Step 5. Run the server

In ‘express-react’ terminal, run the server

$ npm start

Here 2 servers are running,
1- express server at port 3005.
2- react server at port 3000.