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.
Also in this series:
Part 2 – Environment Setup
Here we setup our environment:
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
- 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.
Demo: Gulp Configuration
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:
- 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.
Demo: Bootstrap Install
We install three more packages:
Again Cory adds extra tasks to our gulpfile for using these newly installed tools.
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:
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: