React is an Open Source, client-side web library for building composable user interfaces developed by Facebook and Instagram. The Instagram website, Facebook’s comment and like components are  developed with React.

React home page provides code samples that run live and give results just next to it.

The getting started page provides necessary documentation and has a download link for the Starter Kit that’s a convenient package that includes HTML templates, the React libraries and this set of examples.

Advantages
– Speed: React renders user interfaces faster.
– Declarative: React is a set of components , each of which declaratively defines a mapping between some state and the desired UI. The interface is only changed by changing the state. This make it easier to prevent bugs and reason.
– Composable: React components are self-contained units of functionality. Publishes a simple interface that defines inputs as properties and their outputs as callbacks. By implementing the interface, React components can be freely nested within each other.

Hello World Component

The React.Js Component can be described as below where HTML is the output while state and properties are the inputs.

State,Properties –> var Component = React.CreateClass  –> HTML

A component can change its state but not its properties value. The component triggers a re-render event when state changes.

JsFiddle provides an interface to experiment with JavaScript code including React Library.

JsFiddle Hello World component is similar code to the one on React Homepage.

The React.createClass function is used to define components. In the example above, the “Hello” component is created and property “name” is assigned to it. The render method is used to generate HTML code with  variable interpolation.

React.render functions take a reference to the component defined and value of the property name and renders the HTML based on the second argument  “document.body” which tells React where to render the “Hello” component.

When React re-computes and re-renders component, it uses the virtual DOM(written in JavaScript). It finds the difference between previous DOM and end DOM and writes the difference only to the Browser’s DOM which makes React fast at rendering the UI.

Building a Factorial React component using Plunker

Plunker is another playground tool similar to JS Fiddle to try code without downloading the libraries.

1. Click on Launch the Editor and click on “Live Preview”.

The first tab shows the files available. The second tab shows the code and the third tab shows the results.

2.  Add reference to react library to the HTML page

https://fb.me/react-0.14.3.js

3. Change the extension of the script file to jsx. This will tell React to parse the file as JSX and can be referenced as a js file from within the HTML page.

4.  Add reference to the script.js file into the index.HTML file

5.  Replace the h1 element with a div element with id root. This is the element which will tie React with the DOM coexisting with other elements in the DOM.

Also add a h1 element with value Factorial.

6. Add the following to the Script jsx

var NextFactorialButton = React.createClass({
getInitialState: function() {
return {fac:1, counter:1};
},
generateNextFac: function() {
this.setState ({ fac: this.state.fac * (this.state.counter+1) ,  counter: this.state.counter + 1 });
},
render: function() {
return (
<button onClick={this.generateNextFac}>{this.state.fac}</button>
)
}
});
React.render(<NextFactorialButton />,document.getElementById("root"));


The factorial component displays a button with a click event which generates the next factorial number when clicked. The factorial number displayed in the browser DOM belongs to the state of the component. The component needs to re-render itself each time the value of factorial changes. Properties could not be used here as they are immutable.

The getInitialState function initialises and returns the state object of the component. The state of the component has two elements “counter” and “fac” initialised to 1.

The value of the state element is referenced within curly braces from the vitual DOM.

{this.state.fac}

The method “generateNextFac” is tied to the onClick event of the button.  The method this.setState allows to change the state of the elements.  The “counter” element is incremented by 1 while the “fac” element is multiplied by “counter” element  added to 1.

The React.render method takes the “NextFactorialButton” component and the root DOM element where the React will display the virtual DOM which is a button displaying the state of the factorial number.

When the factorial component initially loads, the button displays 1 and on each click displays  1, 2, 6, 24, 120, 720, 5040,etc…