What Is ReactJS?

React (a.k.a. ReactJS or React.js) is a JavaScript library for creating user interfaces, open sourced to the world by Facebook and Instagram team in 2013. One might think of it as the “View” in the “Model-View-Controller” pattern.

React’s main goal is to be simple, declarative, and compassable, as it is intended to ease the process of building large applications using data that changes over time.

React was created by Jordan Walke, a software engineer at Facebook, with the influence of XHP, a PHP-based component system that is still in use at Facebook, but also by functional programming ideas. Pete Hunt wanted to use React at Instagram, so he pushed to extract React from Facebook-specific code and open source it. (Editor's note: Some have expressed concern about the React license; see discussions here, here, and most recently (Jan2016) here, with discussion of some alternatives here. We're not lawyers but figure it's important to be aware of this sort of thing.)

React has lately gained a lot of popularity for its concept of a “virtual-DOM,” which allows it to determine which parts of the DOM have changed by diffing the new version with the stored virtual DOM, and using the result to determine how to most efficiently update the browser's DOM.

Section 2

How the Magic Happens

To get an idea of what’s going on inside React, take a look at the following diagrams demonstrating how React.js rendering and the React Virtual DOM work:

Styling Your Components

In React, styles are mentioned in line, but unlike the traditional way of inline CSS strings, here we specify each style as an object whose key is the camelCased version of the style name, and whose value is the style's value (usually a string).

Most numeric values at the end of a style prop receive an automatic “px” specification added to them (e.g., “width: 10” is read as “width: 10px”). Here is a list of properties that won't get the automatic "px" suffix:

The spread operator is already supported for arrays in ES6. There is also an ES7 proposal for Object Rest and Spread Properties.

Section 9

The Flux Application Architecture

Flux plays a key role if your application use dynamic data.

Don't try to compare Flux to Model View Controller (MVC) architecture, Flux is just a term to describe smart uni -directional data flow.

Figure 3: An Overview of Flux Architecture

Keys ideas:

Views "Dispatch" "Actions".

"Store" Responds to Dispatched Events.

Store Emits a "Change" Event.

View Responds to the "Change" Event

Points to remember:

A "dispatcher" is essentially an event system.

There is at most one global dispatcher.

“Store” is specific collection of logic and data.

A “Store” is a singleton.

A store is not a model. A store containsmodels.

A store is the only entity in the application that is aware of how to update data.

Only stores registers to dispatcher callbacks. store emits an event, but not using the dispatcher!

When store data changes, your views shouldn't care if things were added, deleted, or modified but just re-render.

Section 10

React v0.14

React version 0.14 separated out all DOM related functionality into a separate dependency, which can be fetched from npm under the name `react-dom`

React version 0.14 separated out all DOM related functionality into a separate dependency, which can be fetched from npm under the name `react-dom`

Every new change in 0.14, including the major changes, is introduced with a runtime warning and will work as before until 0.15.

The react package contains React.createElement, .createClass, .Component, .PropTypes, .Children, and the other helpers related to elements and component classes

The react-dom package has ReactDOM.render, .unmountComponentAtNode, and .findDOMNode. In react-dom/server there is a server-side rendering support with ReactDOMServer.renderToString and .renderToStaticMarkup.

So, if you wanted to duplicate the example Hello component from earlier with react v0.14, it would look like this: