Skip to content

Latest commit

 

History

History
309 lines (213 loc) · 8.93 KB

react-expressjs.md

File metadata and controls

309 lines (213 loc) · 8.93 KB

Full-Stack Web App Using React and Express

Projected Time

Total: 60 minutes

  • Lesson: 5 min
  • Guided Practice: 30 min
  • Independent Practice: 10 min
  • Check for Understanding: 10 min

Prerequisites

Motivation

Creating React app using ExpressJs server is very useful if you are creating a full stack app using Express, React, Node with any database. So you can run your React and Node app on the same port, avoiding the need of running two separate commands to start Node.js and React.js app.

Walmart was among the first large companies that benefited from using React with Node.js. In 2015, the company migrated about 25 apps that powered their eCommerce website from Java to the React and Node technology bundle.1

Objectives

Participants will be able to:

  • create Express.js for back-end
  • create React app for front-end

Specific Things To Learn

  • to integrate React with Express by proxying requests
  • to make the HTTP requests from React To Express

Materials

Lesson

React is a javascript library for building web apps and it doesn’t load itself in the browser. We need some kind of mechanism that loads the index.html (single page) of React application with all the dependencies(CSS and js files) in the browser. In this case, we are using node as the webserver which loads React assets and accepts any API calls from the React UI app.

If you look at the above diagram all the web requests without the /api will go to React routing and the React Router kicks in and loads components based on the path. All the paths that contain /api will be handled by the Node server itself.2

Guided Practice

Step 1: Creating a Backend using Node.js (Express Framework)

First, create a directory called react-express-app and move inside that directory

mkdir react-express-app && cd react-express-app

To create our Node project, run the following command in your terminal. This creates the package.json file which will allow us to keep track of all our app scripts and manage any dependencies our Node app needs.

npm init -y

leaving off the -y will allow you to manually enter that information

Next, create a folder called server and a file inside of it called index.js.

mkdir server && cd server
touch index.js

Let’s install Express and nodemon as a dependency to use it

npm install express
npm install nodemon

Let's go ahead and fill it with this in index.js file,

// server/index.js

const express = require('express');

const app = express();

//Set the port that you want the server to run on
const PORT = process.env.PORT || 5000;

//creates an endpoint for the route /api
app.get('/api', (req, res) => {
  res.json({ message: 'Hello from ExpressJS' });
});

// console.log that your server is up and running
app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

Next, go into the package.json scripts and add this start script. This help you to run server with a simple command.

// package.json

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server/index.js",
    "dev": "nodemon server/index.js"
  },

Let's run npm run dev on your terminal. You should see console output like this:

  server npm run dev

> [email protected] dev
> nodemon server/index.js

[nodemon] 2.0.15
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node server/index.js`
Server listening on 5000

Go to http://localhost:5000/api in your browser, you will see {"message":"Hello from ExpressJS"} message. Now let's move to the frontend.

Step 2: Create An App Frontend With React

First, open another terminal tab and use create-react-app to create a new React project with the name client

npx create-react-app client

Let's move inside the directory and start the server

cd client
npm start

Now go tohttp://localhost:3000/ in your browser, you will see the react logo.

Step 3: Connecting frontend and backend

In the development phase, the React app is running on port 3000 with the help of a create-react-app and nodejs API running on port 5000.

There should be some interaction between these two. You can proxy all the API calls to nodejs API. Create-react-app provides some inbuilt functionality and to tell the development server to proxy any unknown requests to your API server in development, add a proxy field to your package.json of the React.

// client/package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000", // add this code
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  ......
}

Step 4: Make HTTP Requests from React to Node

Now let's fetch data from the /api endpoint. To do so, you can navigate to the App.js component in the src folder and make an HTTP request.

Now make a simple GET request using the Fetch API to your backend and then the data returned as JSON.

Once you have the data returned, you will get the message property ({ message: "Hello from ExpressJS" }) and then put it in a state variable called data.

This will allow you to display that message in frontend.

// client/src/App.js
import { useState } from 'react';

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

  const connectToBackend = () => {
    fetch('/api')
      .then((res) => res.json())
      .then((data) => setData(data.message));
  };

  return (
    <div className="App">
      <h1>React Website with an Express backend</h1>

      <button onClick={connectToBackend}>Send Request to Backend</button>
      {/* Render the newly fetched data inside data */}
      <p>{data}</p>
    </div>
  );
}

export default App;

Test it by clicking the button in your react app. You will get the message Hello from ExpressJS from the server.

Independent Practice

  • Open your index.js file in server folder.

  • Create an endpoint /api/users' with some JSON data to get all users from the API.

    // server/index.js
...

const users = [
  { name: 'Ram', email: '[email protected]' },
  { name: 'Bob', email: '[email protected]' }
];

app.get('/api/users', (req, res) => {
  console.log('api/users called!');
  res.json(users);
});

...

  • In React app fetch API to make the API calls and gets the user from the API

  • Once you get the data/users from the API, set the state accordingly and renders the appropriate components again to pass the data down the component tree.

// client/src/App.js
import { useState, useEffect } from "react";

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

  const [users, fetchUsers] = useState([]);

  const getData = () => {
    fetch("/api/users")
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
        fetchUsers(res);
      });
  };

  useEffect(() => {
    getData();
  }, []);

 .....

  return (

 ......
  );
}

export default App;
// Do it in different component

 <h2>React Fetch API From Backend</h2>
      <ul>
        {users.map((item, i) => {
          return (
            <li key={i}>
              Name: {item.name} Email: {item.email}
            </li>
          );
        })}
      </ul>

Challenge

If you would like to explore more try to run the server and client with one npm command concurrently

Hint: Concurrently

Check for Understanding

  • Why Using React and Node.js For Developing Full Stack Web App?
  • Benefits of Using React with Node.js for Web App Development

NOTE: You can find complete source code HERE

Supplemental Materials

Footnotes

  1. https://proxify.io/articles/node-and-react ↩

  2. https://medium.com/bb-tutorials-and-thoughts/how-to-develop-and-build-react-app-with-nodejs-bc06fa1c18f3 ↩