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:
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.
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.
We haven’t created styles.css yet, so we do this here.
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