React Js -- Modern Framework

React.js (http://facebook.github.io/react/)

It’s a Library created by Facebook and Instagram to create views. It’s not a framework, so let’s not waste time in comparing it with Angular (Apples don’t get compared with Oranges J).it’s just concentrating on view layer ,which it’s good at.

Why it’s fast?

It uses a virtual DOM, and syncs only the changed parts with the underlying page (accessing the DOM is still the slowest part of a modern web application, which is why the framework gets a performance boost by optimizing it).

How to write React?

1.) Create a component using React.createClass and then render

var component = React.createClass({

//your code

}),

render: function() {};

2.) use React.render(<component/>.document.body);

JSX – Allows us to write HTML like syntax which gets transformed to lightweight JavaScript objects.

Virtual DOM  - A JavaScript representation of the actual DOM.

React.createClass – The way in which you create a new component.

render (method) – What we would like our HTML Template to look like.

React.render – Renders a React component to a DOM node.

state – The internal data store (object) of a component.

getInitialState – The way in which you set the initial state of a component.

setState – A helper method for altering the state of a component.

props – The data which is passed to the child component from the parent component.

propTypes – Allows you to control the presence, or types of certain props passed to the child component.

getDefaultProps – Allows you to set default props for your component.

Component LifeCycle

componentWillMount – Fired before the component will mount

componentDidMount – Fired after the component mounted

componentWillReceiveProps – Fired whenever there is a change to props

componentWillUnmount – Fired before the component will unmount

Events

onClick

onSubmit

onChange

simplest React example:

React.render(

        <h1>Hello, world!</h1>,

        document.getElementById('example')

      );

Note :check in Next Blog to Build React app with Grunt.