Welcome to the Part 1 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 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

Part 8 – React Forms

Part 9 – Flux

Part 10 – Flux Demos

In Part 1, we cover the introductory topics

Building Applications with React and Flux

Who is This Course For?

We learn that we’ll be building a Pluralsight administration tool, which will keep track of authors and courses.

Cory explains there are three types of audiences for this course:

• New to React
• New to React-Router
• New to Flux

Innovations in React and Flux

Cory explains there’s a huge amount of options for web components today, of which React is only one. Why choose React? We learn the innovations that React offers:

• JSX – writing your markup in JavaScript
• Virtual DOM – enhancing performance and efficiency
• Isomorphic Rendering – rendering your components on both the client and the server
• Unidirectional Flows – making your application easier to reason about

Cory urges you to keep an open mind, even about things that appear to go against best practices. In this course we will explore the following controversial ideas:

• HTML should be a projection of app state, not a source of truth
• JavaScript and HTML belong in the same file
• Unidirectional flow. No two-way binding
• Inline style can be good

Cory explains that despite the controversy, many big companies are using React to build large scale applications, including:

• Facebook and Instagram
• Netflix
• PayPal
• Reddit
• Yahoo
• Dropbox
• Airbnb
• Pinterest
• BBC
• Adobe
• The New York Times
• Flipboard

Technology Overview

React is merely a view layer, so it doesn’t dictate which other libraries you should use. In this course, we’ll be using:

• Node JS
• Browserify
• React
• React-Router
• Flux
• Gulp

Now let’s discuss each of these:

Node.JS Overview

Node makes our job easier, and Cory explains that it’s package manager, NPM, includes thousands of useful JavaScript libraries.

We can use NPM to download the libraries we need.

Node using the Common JS pattern. This is different to the AMD pattern that Require JS uses, but has the same goal of creating reusable modules.

Cory gives a quick introduction to how this design pattern works.

1. Get reference to dependency
2. Declare module
3. Expose to others

Browserify Overview

Browserify uses node modules in the browser, and by default it bundles dependencies together in a single file. Having a single file minimizes the number HTTP requests, and this typically improves performance.

For more detailed information, see Jeff Valore’s Creating JavaScript Modules with Browserify

React Overview

React is focused on packaging, composing and rendering HTML components.

Cory explains that it’s lightweight and encourages simple composition.

React utilizes the Virtual DOM, and can render on both the client and the server.

React Router Overview

As your app grows, you’ll want to split your application into multiple client-rendered pages with deep linking. This is where React Router becomes indispensable.

React Router was heavily inspired by the Ember JS approach to routing.

Flux Overview

Flux is a brand name for Facebook’s implementation of the uni-directional data flow pattern.

There are many alternatives, and the most popular one is currently Redux

Cory explains that uni-directional data flows make large applications easier to predict and reason about by avoiding complex interactions.

Gulp Overview

Gulp is a popular task runner, with a rich plugin ecosystem. It’s faster than Grunt JS because it’s stream based and tends to work in memory rather than writing to disk.

See Cory published this course, he switched to using NPM scripts.

Versions

At the time of writing Cory is looking to update this course to use the latest versions, so I won’t list the older version here.

What About Testing?

Cory introduces Jest here, but says that we won’t be doing unit testing in this course 😦

If you’re interested in doing unit testing with React, I recommend looking at Cory’s follow up course Building Applications with React and Redux in ES6.

What About ES2015?

Again this isn’t covered in this course, but is covered in his follow up course.