Monday, December 4, 2017

React Workshop Installation Notes (9 + 10 December 2017)

Our goal is to deploy a React app to Heroku by the end of Sunday. We will use Facebook's create-react-app tool to create the skeleton of our app. It should only take about 30 minutes to install everything below.

Install a web development IDE
For the workshop, I will be doing everything in WebStorm. You can use any IDE you are comfortable using for web development. WebStorm is a paid application, but it has a 30-day free trial version available.

There are other excellent IDEs available, most are free, including Atom, Bracket, and VS Code. Whichever editor you choose, please be sure you know how to use it.

Install Chrome
React is compatible with every modern browser, but Chrome is the best choice for development. In addition to its excellent developer tools, Chrome has two awesome extensions: React Developer Tools and 
Redux DevTools. Install Chrome at:

Then install React Developer Tools and Redux DevTools via the Chrome Web Store.

Install Git
The latest version of Git is 2.14.1. If you have it already, but your version is older than 2.6, please update it. Git is free.

Install Node.js
We need node.js installed on our development machines. If you have a version older than 6.9.4, please upgrade. I will be using node version 8.6.0. I would advise not to use the latest version which is 9.2.0 unless you know what you are doing.

Upgrade npm
NPM comes with node.js but the version installed is usually out of date with the current release. Please update it by entering the following command in the terminal:
npm install npm -g

Create React App
Facebook has an excellent tool for beginner React developers, create-react-app. It is a CLI which creates a complete React skeleton app. Install it with npm:
npm i -g create-react-app

We will deploy our finished app to Heroku, a cloud-based hosting platform. Developer accounts are free. Please sign up now. If you already have an account, please be sure to have at least one free application slot for the workshop.