Book Image

Getting Started with React

By : Doel Sengupta, Manu Singhal, Danillo Corvalan
Book Image

Getting Started with React

By: Doel Sengupta, Manu Singhal, Danillo Corvalan

Overview of this book

ReactJS, popularly known as the V (view) of the MVC architecture, was developed by the Facebook and Instagram developers. It follows a unidirectional data flow, virtual DOM, and DOM difference that are generously leveraged in order to increase the performance of the UI. Getting Started with React will help you implement the Reactive paradigm to build stateless and asynchronous apps with React. We will begin with an overview of ReactJS and its evolution over the years, followed by building a simple React component. We will then build the same react component with JSX syntax to demystify its usage. You will see how to configure the Facebook Graph API, get your likes list, and render it using React. Following this, we will break the UI into components and you’ll learn how to establish communication between them and respond to users input/events in order to have the UI reflect their state. You’ll also get to grips with the ES6 syntaxes. Moving ahead, we will delve into the FLUX and its architecture, which is used to build client-side web applications and complements React’s composable view components by utilizing a unidirectional data flow. Towards the end, you’ll find out how to make your components reusable, and test and deploy them into a production environment. Finally, we’ll briefly touch on other topics such as React on the server side, Redux and some advanced concepts.
Table of Contents (18 chapters)
Getting Started with React
About the Authors
About the Reviewers

Downloading ReactJS

Before we start coding some ReactJS, we need to download it. You can download ReactJS through their website,

At the time of writing this book, ReactJS is currently at version 0.14.7. Two versions of ReactJS scripts are provided—one is for development, which has all the core code with comments if you want to debug or even contribute to them. The other one is for production, which includes extra performance optimizations. Here are the links of the versions of the script for downloading:

Versions of 0.13.0 and higher contain a huge set of enhancements. There is a support for the ES6 class syntax and removal of mix-ins, which are covered in Chapter 5, Component Life Cycle and Newer ECMAscript in ReactJS.

Inside the ReactJS downloads page, there are other versions of the ReactJS script with add-ons. This script extends the ReactJS library to support animations and transitions, and also provides some other utilities that are not part of core React. There is no need to download this version for now because we're not going to use those features in the following examples.

There is also the JSX transformer script for download. You can download it at

It should only be used in the development environment and not in production. JSX will be covered in more detail in the Chapter 2, Exploring JSX and the ReactJS Anatomy.

If you are using a tool to control your dependencies, such as Node Package Manager (NPM) or Bower, it's also possible to download ReactJS through these tools. Details can be found at

Installing ReactJS with NPM

Check whether node is already installed on your machine using node -v.

Otherwise, install the node packages from their website (, based on your operating system.

We cover installing packages through NPM in Chapter 8, Testing React Components and Chapter 9, Deployment.

If you have Node and NPM configured on your machine, execute the following command inside your application's folder from any console tool to install react-tools:

npm install react-tools

Once installed, you can reference React dependency as follows:

Var React = require('react');

From now on, you can use the React variable and its methods, such as React.createClass({…});. Remember that because you've installed it using NPM, it's required that you bundle your code or transform it to a static asset before testing your application. In Chapter 2, Exploring JSX, we're going to cover some transform tools that you might use. You can check for more details about deployment in Chapter 8, Preparing Your Code for Deployment.

Installing ReactJS with Bower

Unlike NPM, Bower controls browser-ready packages, so it's also the same. Apart from using the NPM packages, we can also use Bower-ready packages ( Bower helps to maintain all the packages by installing and maintaining the correct versions of the necessary packages (

First, make sure that you have Bower installed and configured. After this, execute the following command:

bower install --save react

This will save ReactJS as a dependency in you Bower configuration file. Now you just need to reference that in your HTML code. By default, it's provided at ./bower_components/react/react.js. The minified version is also provided in the same folder at react.min.js.