REACT Basic Concepts

React is a UI library.

Its focuses on  interactive, stateful & reusable UI components.

A Unique selling point about REACT  is that not only does it perform on the client side, but it can also be rendered in server side, and they can work together inter-operably.

React has the a concept of the Virtual DOM. Based on state changes, only selected subset of the dom elements are updated. (Least amount of dom manipulation is required, with the use of the Virtual DOM)

React uses JSX (Javascript XML syntax transform)  to write HTML Tags in Java Script. This is similar concept of Angular's Templates.

Rendering

var MyComponent = React.createClass({
    render: function(){
        return (
            <h1>Hello, world!</h1>
        );
    }
});

ReactDOM.render(
    <MyComponent/>,
    document.getElementById('myDiv')
);

ReactDOM’s render method above, our first argument is the component we want to render, and the second is the DOM node it should mount to.

State

Every component has a state object and a props object.
State is set using the setState method. Calling setState triggers UI updates.If we want to set an initial state before any interaction occurs we can use the getInitialState method.


In React, application data flows unidirectionally via the state and props objects, as opposed to the two-way binding of libraries like Angular.  This means that, in a multi component heirachy, a common parent component should manage the state and pass it down the chain via props.  

In a hierarchichal component structure, the state of the component should be updated using the setState method to ensure that a UI refresh will occur. The resulting values should be passed down to child components using attributes that are accessible in said children via this.props