NodeJS-React-Redux Tutorial Part 1: Environment Setup
In part 1 of this tutorial we are going to cover setting up the environment for building a simple React-NodeJS News SPA consisting of a React client and a NodeJS Rest API
The tutorial is intended to cover the following technologies
React, React-Redux, React Router V4, CORS NodeJS, Express, MongoDB, Mongoose, JWT
To follow the tutorial make sure you have at least version 6 of NodeJS installed.
- Part 1 Environment setup
- Part 2 React Router V4 + Redux
- Part 3 NodeJS REST API Server + CORS
- Part 4 MongoDB + Mongoose
- Part 5 JWT / Authentication / Encryption + Comments
- Part 6 …Not yet done
1.1 Repo setup
To begin, lets create a repo from our project on github. Signup if you haven’t already, click the new repository button, enter a name from the tutorial and click Create repository.
Next we will pull and init the repo locally
1.2 React client & create-react-app
For the purposes of this tutorial I am going to use Facebook’s create-react-app to build the starter project. It is however advisable that at some point you start a new project and learn to build an app from scratch yourself manually using Webpack and Babel. Doing this will mean that in the long run you will understand what is going on better. I’ve got a post somewhere in which I run through how Babel/Webpack can be manually setup for a React environment - if you click posts on the top right, you’ll find it.
First we will install create-react-app globally, create a folder for our client and cd into the spawned folder and start up npm.
You will now have a skeleton react app created and running on localhost:3000.
We need to clean up some files before continuing. First delete the .gitignore file from our /client folder and then in the root folder /reactnodedemo/ create a new .gitignore file with the following contents to ensure our node_modules folder doesn’t enter the repo
The next stage is to setup the folder structure in the client. create-react-app should have spawned a src folder. Within this folder create a folder called components.
Finally within the components folder create 3 sub folders, containers , presentation and layouts for seperating our components.
The folder structure should look as follows:
With this done, next create a file called Home.js within /src/components/layouts/ with the following
Next we need to tell the application to render our component
Alter app.js , removing the generated JS and replace with the following
Once this has compiled in NPM you should see the Home component outputting on your localhost demo site
Now lets add more content to the Home.js file
In the /components/containers folder create a News.js file containing the following:
After this, edit the /components/layouts/Home.js to include the News Component and render it beneath our Home page text.
Next, lets create a presentation component for our News Item listing in /components/presentation/NewsItemListing.js
First we need to install some more dependencies
PropTypes, previously part of the main React component, is now a package. This allows us to validate at runtime, the props passed into our components.
Next, lets put some NewsItemListing components into our News.js container to simulate some news.
Now we should have a Homepage and a list of news stories. Before going further we need to add some routing…