React Workshop Installation Notes (March 17, 18, & 24 2018)
Installation
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 essential 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.16.2. If you have it already, but your version is older than 2.6, please update it. Git is free.
Installing Node.js
Node.js is a JavaScript runtime, that is a fancy phrase which merely means it lets us execute JavaScript code from the command line. I am installing the current LTS or long-term support version, which is version 8.10.0. I highly recommend that you do the same. Don't download the latest version; it sometimes has bugs and incompatibilities. Go to: https://nodejs.org/en/download/. Click the button to download the LTS version, when complete double-click the file to begin the installation.
Usually, the site detects your operating system and the webpage changes to reflect it. If you don't see your operating system, click the "OtherDownloads," which is in small text below the download button.
Installing Node should only take a few minutes. To verify, open a new command prompt, or terminal instance. From the command line type:
node --version
Node.js should respond with its version number.
Install Atom/Nuclide
Atom is the free and hackable editor from the folks at GitHub. It is cross-platform and runs on Windows, Mac, and Linux. You are welcome touse whatever editor you like, but please know how to use it. I can give you help using Atom, but not much else. Download Atom
Once we have Atom installed and working, we can optionally install Nuclide. It is a package, which is an Atom add-on, from Facebook. It workswell other Facebook open-source projects, like React, React-Native, and Flow. Again, it is optional, but I will use it. Unfortunately, the Windowsversion is not complete. So while Nuclide has been thoroughly checked out on Mac and Linux, on Windows, it has not.
To install Nuclide:
Help >> Welcome Guide >> Install a Package >> Open Installer
Type "Nuclide" in the search bar.
"searching packages for nuclide"
After finding the package, verify that it is from Facebook, then click "Install."
It will take a bit of time for the package to download and install. Be patient.
Type "Nuclide" in the search bar.
"searching packages for nuclide"
After finding the package, verify that it is from Facebook, then click "Install."
It will take a bit of time for the package to download and install. Be patient.
Installing Yarn
Yarn is a package manager from Facebook. It is similar to npm but is faster and more secure. I highly recommend using Yarn over npmprimarily when working with React or React-Native. The easiest way to install Yarn is not safe, but it is via npm. It seems npm packages are notsigned which is a security risk when installing apps globally.
via npm
npm install -g yarnvia Homebrew on macOS
brew install yarn
Node.js is a prerequisite for Yarn, and brew installs it with Yarn. If you are using a tool like nvm, this can break it. You can install Yarn withoutNode.js with the following command:
brew install yarn --without-nodevia Chocolatey on Windows
Chocolatey is a Windows, package manager. You can get Chocolatey from https://chocolatey.org/.
You install Yarn with the following Chocolatey command:
choco install yarn
You can validate that Yarn was installed correctly by typing:
yarn --version
Yarn responds with its version information if installed correctly.
create-react-app
The create command is now part of Yarn. To create a new app, use:
yarn create react-app <app name>Firebase
Firebase is a cloud service which is now part of Google. Its initial function was their Firebase Real-Time Database, but now they offer many more services including hosting which we'll need to deploy our React app. So, if you don't already have an account, go tohttps://firebase.google.com/ and sign up. Don't worry you won't need a credit card if you sign up for the Spark Plan.
Firebase CLI
To make maximum use of Firebase, we will need to download its command line tools or CLI. To install type:
yarn global add firebase-tools
To verify that the tools have been installed correctly install type:
firebase --version
It should respond with the version number.
Summary
Now we have all of our development tools installed and are ready to begin developing React applications.
