Welcome to the Part 2 of this new series on Cory House’s Pluralsight course Building Applications with React and Flux.

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.
Building Applications with React and Flux is the prequel to Cory’s course Building Applications with React and Redux in ES6.

If you are new to React JS or React-Router, or prefer to do your development in regular JavaScript without using Babel and other tools that you don’t necessarily need, then this course is for you. Alternatively, check out the review of his other React course above.

Also in this series:

Part 1 – Introductory topics.

Part 2 – Environment Setup

Part 3 – React Core Concepts

Part 4 – Creating Components Introduction

Part 5 – React Lifecycle

Part 6 – React Composition

Part 7 – React Router

Here we setup our environment:

Environment Setup

Introduction

Cory explains that we don’t need all of this technology in order to build a web application with React, but this environment will give you rapid feedback as you create your application.

After these steps are completed, every time we we type gulp, all of the following will happen:

• Compile React JSX
• Lint JSX and JS via ESLint
• Bundle JS and CSS files
• Migrate the built app to the dist folder
• Run a dev webserver
• Open the browser at your dev URL
• Reload the browser upon save

If you’re already familiar with these technologies, then you can skip this module of the course, and just download the goodies from https://github.com/coryhouse/react-flux-starter-kit/

Demo: NodeJS Install

This walks though how to:

• Installing Node,
• Checking the version of Node
• log to the console
• Use npm init to create a package.json file

Demo: Gulp Install

We install:

• Gulp – The streaming build system
• Gulp-connect – Gulp plugin to run a webserver (with LiveReload)
• gulp-open – Open files and URLs with gulp

Once installed, now typing “cat package.json” (or “type package.json” if you’re running windows) shows these have been added as dependencies.

Cory uses Sublime Text in this course. In his follow up course he recommends using either the Webstorm IDE or the Atom editor. I have recently switched to Atom and am very happy so far.

Demo: Gulp Configuration

In our gulpfile we require gulp, gulp-connect and gulp-open.

Cory creates a task called ‘connect’ for starting a local development server.

We are also introduced to globs

Near the end of this setup, we have a handy way to just type “gulp” in the command line and open up our index.html in the browser.

But one more trick is to create another task to watch files. It will automatically reload the page for us every time we make a change.

If you prefer using Grunt, rather than Gulp, then you may be interested in learning how to use it to create a TypeScript Build and Test Pipeline.

Demo: Browserify Configuration

We start off simple, with a main.js logging “Hello world from Browserify”.

We install three more packages:

• Browserify for bundling our JavaScript
• Reactify by Andrey Popp and Pete Hunt, for transforming our JSX into JS
• Vinyl-source-stream by Hugh Kennedy, for using conventional text streams with Gulp

Cory adds new tasks in our gulpfile for using these newly installed tools.

Now when we type “gulp” we can see all of our JavaScript is in a single minified bundle.js file

For more detailed information on Browserify, see Jeff Valore’s course Creating JavaScript modules with Browserify.

Demo: Bootstrap Install

We install three more packages:

• Bootstrap
• jquery
• gulp-concat by Eric Schoffstall and others from Fractal

Again Cory adds extra tasks to our gulpfile for using these newly installed tools.

He also updates main.js with a reference to jquery and bootstrap, and adds a reference to bundle.css in index.html

And we see “Hello world from Bootstrap” in our browser.

For more detailed information on Bootstrap, see Shawn Wildermuth’s course Bootstrap 3

Demo: ESLint Configuration

Just one more package to install here:

• gulp-eslint by Initial State Technology’s adametry

Cory updates gulpfile.js again to enable linting of JS files, including JSX

Don’t waste time typing out the eslint.config.json, get it from the starter kit.

When we run it we get no errors, so to demonstrate Cory creates a global variable, and we see ES Lint throw an error.

Demo: React, React Router, and Flux Install

Another trio of packages to install, all of which are from Facebook:

• React
• React-Router
• Flux