Welcome to Part 2 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 React to Redux

Part 8 – Redux Flow

Part 9 – Async in 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

Here we cover the necessary environment setup.

Environment Setup

Intro

Cory introduces his Github project React Slingshot, which has already attracted over 3,000 stars.

He explains that we will be using a modified version of it in this course. You can find it here: Pluralsight Redux Starter

If you are already familiar with Webpack, NPM Script, ES6 and Mocha, you can just download this and skip on ahead to the next module.

Environment Overview

Cory runs through the tech that we’ll be using:

• Babel
• Babel-Polyfill
• Webpack
• Mocha
• ESLint

Cory warns that it’s best to only pull in the polyfills that you actually need. Good advice.

Versions Used in this Course

• React: 15.0.2
• Redux: 3.5.2
• ReactRouter: 2.4.0
• Webpack: 1.1.3
• Babel: 6.*

Cory says that he will update this slide if he updates the versions used in this course. If these versions are no longer accurate please let me know.

Hot Reloading

In this course we will be using Daniel Martinez’s Babel preset for React HMR and Error Catching. Cory explains what this is and a bit about how it works.

He gives some warnings and hints that a better solution may be developed in the not too distant future.

After giving these warnings however, Cory says this is currently his favorite way of doing hot reloading, and this is not a technology that is likely to affect end users if it doesn’t work correctly.

Install Node

I never knew until I watched this that Node v6 loads modules 4x faster than v4! Any version from v4 onwards will work, but I am with Cory in liking to have all of the latest features 🙂

Create package.json

Manually adding tons of dependencies is time consuming and can be tiring. Thankfully Cory has created a package.json for you with everything that you need to download.

Pluralsight Redux Starter

Before this course came out, I beta tested this code, and was surprised by how easy it was. Just follow the github instructions and it should all just work. At least that was my experience.

In JetBrain’s WebStorm, Cory removes the Scripts section.

Editors

Cory used to prefer Sublime Text, but he’s become a WebStorm convert. In this clip he explains a couple of the features that he loves most about it.

He also loves Atom, and if you want to use that for this course, he recommends installing the following plugins:

• React
• Terminal Plus

Install npm Packages

Cory explains a bug in WebStorm using the terminal in Windows. Make sure you watch this if this matches your editor and OS preferences.

It’s quite normal to see some warnings when installing lots of npm packages so don’t worry too much if you see them. They are there for information, not panic!

Introduce npm Scripts

Cory explains 6 reasons why he switched from Gulp to NPM Scripts:

1. Easy to learn
2. Simple
3. No extra layer of abstraction
4. No dependence on separate plugins
5. Simpler debugging
6. Better documentation

For more on this you can read his article Why I Left Gulp and Grunt for NPM Scripts

Create src Directory

We see how to create a new src directory and index.html with some starter HTML in it.

Set up Webpack

Cory explains that Webpack has become more popular than Browserify in the React community.

If you’d like to learn Webpack in more detail, see the WebPack Fundamentals series which reviews the Webpack Fundmentals course by Joe Eames.

Cory shows how to setup Webpack in WebStorm. This involves changing the JavaScript language version to JSX Harmony.

There’s a whole bunch of configuration code that Cory describes here, including entries, outputs, plugins and module loaders.

You can find this code in the webpack.config.dev.js file in Cory’s Pluralsight Redux Starter on Github

Set up editorconfig

Take a look at .editorconfig in the Pluralsight Redux Starter.

Cory adds this into the project, setting spaces instead of tabs!

Set up Babel

We create our .babelrc file here. We’re working with both the react and ES6 presets, and setup react-hmre to run only in our development environment.

Set up Express

There are multiple ways to setup a dev server. Cory chose Express JS because it’s popular and easy to work with.

We begin by creating a tools directory, and in here we create srcService.js which is 30 lines of code.

Create Start Script

Remember we removed the Scripts section from packages.json?

Now’s the time to get this setup correctly:

"scripts": {
"start": "babel-node tools/srcServer.js"
},

npm start -s

We see that our linter has already found a possible problem for us: a console.log statement that we wouldn’t want going into production.

We also have our bundling and minification working. And we are transpiling from ES6 to ES5 JavaScript.

Create Start Message

Sometimes what amazes me most are the times when I discover really basic things that I never knew before. Seeing console.log statements in a specified color is one of those things I’ve just never seen before I watched this.

Cory puts this code into startMessage.js are references it from package.json:

"scripts": {
"preStart": "babel-node tools/startMessage.js",
"start": "babel-node tools/srcServer.js"
},

Set up ESLint

Cory adds the .eslintrc file to the root of our project.

In here we have a bunch of JSON that you can find in the Pluralsight Redux Starter project.

Each of the rules have a number at the end of them:

• 0 – Off
• 1 – Warning
• 2 – Error

Cory gives some advice on these settings.

We also add a couple of extra script settings to package.json here:

"scripts": {
"preStart": "babel-node tools/startMessage.js",
"start": "babel-node tools/srcServer.js",
 "lint": "node_modules/.bin/esw webpack.config.* src tools",
 "lint:watch": "npm run lint -- --watch"
},

To run, just type “npm run lint”

Create Parallel Scripts

The next objective is to get the linting running automatically every time we run the app.

"scripts": {
"preStart": "babel-node tools/startMessage.js",
"start": "npm-run-all --parallel open:src lint:watch",
 "open:src": "babel-node tools/srcServer.js",
"lint": "node_modules/.bin/esw webpack.config.* src tools",
"lint:watch": "npm run lint -- --watch"
},

With npm-run-all we can run our scripts one at a time, or in parallel.

Set up Testing

The two modules on testing are near the end of the course, but if you’re interested in doing test driven development throughout the course, you’re want to pay attention here.

The file of interest is testSetup.js which you can find here on github.

Cory explains that there are 5 things going on in this file:

1. Setting the Node environment to Test to disable Dev environment setting
2. Registering Babel to transpile our tests, allowing us to write them in ES6
3. Disable webpack specific features
4. Setup JS DOM
5. Setup global variables to help simulate the browser environment

As mentioned at the end of Webpack fundamentals – Adding CSS to your Build, I have found this useful.

Add Test Scripts

We add another two script settings in package.json for mocha:

"scripts": {
"preStart": "babel-node tools/startMessage.js",
"start": "npm-run-all --parallel open:src lint:watch test:watch",
"open:src": "babel-node tools/srcServer.js",
"lint": "node_modules/.bin/esw webpack.config.* src tools",
"lint:watch": "npm run lint -- --watch"
"test": "mocha --reporter progress tools/testSetup.js \"src/**/*.test.js"
"test:watch": "npm run test -- --watch"
},

Cory explains that we also must create at least one test file, otherwise we will get an error.

Just for the purposes of checking that our setup is correct, we add a simple true equals true test, using Michael Jackson’s expect library.

The purpose of the test:watch additions is so that we don’t need to keep manually asking for our tests to be run.

Continue to Part 3 – React Component Approaches