React Workshop Installation Notes

react

Our goal is to deploy a React web app to Firebase by the end of the workshop. 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.

  1. Install a web development IDE
    For the workshop, I will be doing everything in WebStorm. If you are accustomed to a different IDE for web development, you may use it, but please know how to use it. I, unfortunately, won’t be able to give you much advice on using any of IDEs there are available. WebStorm is a paid app but it has a 30-day free trial version available. Other options are VSCode, Atom, and Sublime.

    1. https://www.jetbrains.com/webstorm/download/
    2. https://code.visualstudio.com/download
    3. http://brackets.io/
    4. https://atom.io/
    5. https://www.sublimetext.com/3
  2. Install Git
    We will be using Git Bundles for the workshop. They will allow us to advance through the course together and recover from hard to find coding bugs. The latest version is 2.11.0. If you have it already, but your version is older than 2.6, please update it.

    1. Git is free.
    2. http://git-scm.com/downloads
  3. 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.

    1. https://nodejs.org/en/download/
  4. 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:

    1. npm install npm -g
  5. 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:

    1. npm i -g create-react-app
  6. Firebase
    Firebase is both a real-time database and a cloud hosting platform. They make it relatively easy to build “backend-less” websites. They have an FREE developer price tier called “Spark”. It is a perfect place to stash your experiments. They are will be accessible publicly over HTTPS.

    1. Go to https://firebase.google.com
    2. Click “Pricing” from the top menu.
    3. Scroll down to the bottom of the page.
    4. On the first column, “SPARK” click the button, “START NOW”.
    5. Complete the sign up for the free account.
    6. Use your Google/Gmail account to sign up
    7. Don’t create a project yet
    8. Install the firebase command line tools
    9. npm install -g firebase-tools
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s