Chapter 1 : Introduction

The widespread use of React on large websites shows that it is stable enough to use at scale. React is ready.

Installing Node.js and NPM

When working with Node and React, you will need to use the command line. On the Mac, this is called the terminal. On a PC, it is called the command prompt. Run the following commands to check your current version on node and npm. If needed, instructions on how to install or upgrade are below.

First, Check to see if you have Node JS installed

$ node -v

Then, if needed, install or update Node.js from the Node.js website. Download the installer, run it, and follow the instructions.

---

Next, check your version of npm:

$ npm -v

Then, if you are running anything less than version 3, you will need to update npm:

Update NPM on Mac

$ sudo npm update -g npm

Update NPM on PC

Make sure to run the command prompt with administrator privileges:

$ npm update -g npm

Optionally install Yarn

Yarn is a package manager created at Facebook. It is a compatible alternative to npm. Yarn's use is not required, but you can optionally install it if you like:

$ sudo npm install -g yarn

Finally, there are some nice options for switching Node versions. This is not required, but you can optionally install one of these version mangers:

• Install Node Version Manager - mac only (optional)
• Install NVM-Windows - pc only (optional)

---

Installing the React Tools

Next, install the React developer tools:

• Development Tools (Chrome | Firefox)

Working with JSBin

This repository links to samples hosted on JSBin so that you can immediately begin changing each sample and checking output to see how each sample has changed.

Here is a Hello World sample that JSBin has assigned the identifier gosabo. There are 3 available versions of this sample in JSBin under the same identifier.

Note: All JSBin links throughout this repository use React 15. To update, change the script tag CDN links to version 16.

Change

  <script src="https://fb.me/react-with-addons-15.1.0.js"></script>
  <script src="https://fb.me/react-dom-15.1.0.js"></script>

To

  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

A preview of the latest version in a sample:

http://output.jsbin.com/gosabo

The sample in the editor:

http://output.jsbin.com/gosabo/edit

The sample in the editor with JavaScript and output tabs open:

http://jsbin.com/gosabo/edit?js,output

A pure preview of the sample:

http://output.jsbin.com/gosabo/quite

Version 1 of the sample as output:

http://output.jsbin.com/gosabo/1

Version 1 of the sample in the editor:

http://output.jsbin.com/gosabo/1/edit

Version 2 of the sample as output:

http://output.jsbin.com/gosabo/2

Version 3 of the sample in the editor with html and javascript tabs open:

http://output.jsbin.com/gosabo/3/edit

CDN's for JavaScript libraries

Ultimately, we will be working with webpack and npms, but to get running quickly, here are some CDN links that can be included in JSBin with this syntax: <script src="https://[CDN LINK]"></script>

• React
• React DOM
• Babel Inline Transpiler
• fetch
• Redux
• React Router Source

React Resources

Finally, we have some links to resources and official documentation for the libraries that we will be using:

• React Documentation
• React Source
• React NPM
• Webpack Documentation
• Flux Documentation
• Redux Documentation
• Jest Documentation
• React Router Documentation