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.
Also in this series:
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:
- 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
- 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
- The New York Times
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
Now let’s discuss each of these:
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.
- Get reference to dependency
- Declare module
- Expose to others
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.
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 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 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.
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.