Welcome to Part 4 of this comprehensive and summary of Cory House’s course Building Applications with React and Redux in ES6.

Cory is a Microsoft MVP in C#, founder of OutlierDeveloper.com, avid tech reader, and speaker.

He believes in clean code, pragmatic development, and responsive native UIs.

Also in this series:

Part 1 – Introduction and Background

Part 2 – Environment Setup

Part 3 – React Component Approaches

Part 4 – Initial App Structure

Part 5 – Intro to Redux

Part 6 – Actions, Stores and Reducers

Part 7 – Connecting to Redux

Part 10 – Async Writes in Redux

Part 11 – Async Status and Error Handling

Part 12 – Testing React

Part 13 – Testing Redux

Part 14 – Production Build

Initial App Structure

Create Initial Components

We create our components directory, with home and about sub-directories.

In these we add HomePage.js and AboutPage.js, and both of these are React components.

Cory mentions Bootstrap for the first time here. If you haven’t used Bootstrap before, or would like to learn it in more detail, check out my review of Shawn Wildermuth’s Bootstrap 3 course.

Create App Layout

We create App.js in the root components directory.

Configure Routing

We add routes.js

This imports React from ‘react’, Route and IndexRoute from ‘react-router’, and our new App, HomePage and AboutPage components.

This will route from the home page to the about page and back.

Update Entry Point

We add index.js to the root src directory.

This imports the JS files ‘babel-polyfill’, React, render from ‘react-dom’, Router and browserHistory from ‘react-router’, and routes from ‘./routes’,

It’s very nice to see that webpack can also import styles.css and bootstrap.min.css and intelligently bundle them.

Create Styles

We haven’t created styles.css yet, so we do this here.

Create Header

We spin up our website to see what we have, and find the next thing we need to do is create a header section.

So we create a common directory and in it goes Header.js. We now import and reference this in App.js

We see our Hot Reloader working for the first time here. Just hit save in the editor and, bam, it’s already showing it in the browser!

Create Course Page

Now we create a coursesPage.js component, and update routes.js to import and reference it.

We see here that Hot Reloading is a bit glitchy, and might not work for you all of the time.

Continue to Part 5 – Intro to Redux