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.

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.

Create repo

Next we will pull and init the repo locally

git clone https://github.com/dbbddb/reactnodedemo.git

cd reactnodedemo
echo "Beck React Node tutorial" > README.md
git add --all

git commit -m "Init repo"

git push origin master

Section 1.2

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.

npm install -g create-react-app

create-react-app client
cd client

npm start

You will now have a skeleton react app created and running on localhost:3000.

React loaded

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

# dependencies
/client/node_modules

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:

React loaded

With this done, next create a file called Home.js within /src/components/layouts/ with the following

import React, {Component} from 'react';

class Home extends Component {
    render() {
        return ( <div> Welcome to MadOwlNews.com </div>
        )
    }
}

export default Home;

Next we need to tell the application to render our component

Alter app.js , removing the generated JS and replace with the following

import React, {Component} from 'react';
import './App.css';
import Home from './components/layouts/Home';

class App extends Component {
    render() {
        return ( <Home/> );
    }
}

export default App;

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:

import React, {Component} from 'react'

class News extends Component {
    render() {
        return ( <div> News Items </div>
        )
    }
}

export default News

After this, edit the /components/layouts/Home.js to include the News Component and render it beneath our Home page text.

import React, {Component}
from 'react';
import News from '../containers/News';

class Home extends Component {
    render() {
        return ( 
        <div>
            <div>Welcome to MadOwlNews.com</div> 
            <div> 
                <News />
            </div> 
        </div>
        )
    }
}

export default Home;

Next, lets create a presentation component for our News Item listing in /components/presentation/NewsItemListing.js

First we need to install some more dependencies

	npm install prop-types --save

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.

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class NewsItemListing extends Component {
    render() {
        return (
            <div>
                <div><b>{this.props.title}</b></div>
                <div>{this.props.teaser}</div>
            </div>
        )
    }
}

NewsItemListing.propTypes = {
    id: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    teaser: PropTypes.string.isRequired
};

export default NewsItemListing

Next, lets put some NewsItemListing components into our News.js container to simulate some news.

import React, {Component} from 'react';
import NewsItemListing from '../presentation/NewsItemListing';

class News extends Component {
    render() {
        return (
            <div>
                <h2>News Items</h2>
                <ul>
                    <li><NewsItemListing id="1" title="Mad owl torments drivers" teaser="An owl has been seen chasing cars in Bridlington" /></li>
                    <li><NewsItemListing id="2" title="Owl steals post" teaser="Letters have gone missing in Wigan. Owl suspected." /></li>
                </ul>
            </div>
        )
    }
}

export default News

Now we should have a Homepage and a list of news stories. Before going further we need to add some routing…

[ To Part 2 ] »