Building a React app with an Node API server Part 1: Intro

In this tutorial we will set up an app with authentication, routing, a global Redux state, and a basic node express server. We will use React, Redux, auth0, Redux Thunk, express and node. This will be a minimal skeleton app which you will be able to build on top of.

Prerequisites: Basic HTML, CSS, and Javascript.

You should have node install, if not see the the official guide here:
(https://www.npmjs.com/get-npm)

We will create our Frontend with the create-react-app command. This is an officially supported command by Facebook and the standard way to start a React app.

Similarly, we can also create an express backend using only one command with the Express application generator. First install the express generator with the following command:


npm install express-generator -g.

The -g flag stands for “global” and allows you to create an express server app in any directory with only one command


express

For a more detailed explanation see the offical express docs:
https://expressjs.com/en/starter/generator.html

Redux Dev Tools
We will also be using the redux-dev-tools Chrome extension. This will make keeping track of our state changes very easy and allows us to see the state changes visually in real time.

Step 1:
First download the redux-dev-tools extension:
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en

Step 2:
We need to install the dev-tools npm package like so:
npm install -save redux-devtools-extension

Go to the index.js file in the src directory


https://gist.github.com/iqbal125/0fc17341fea1e4dac93b52367f99da07

source : http://extension.remotedev.io/#usage

Due to the countless beginner React tutorials on the internet, we will not be going over the basics of React in this tutorial. For a refresher on React fundamentals see the official React docs:
https://reactjs.org/

Leave a Comment

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