Why React JS Before answering this question, I want to tell its history, this will give slight idea ‘Why React”, React JS is created by Facebook, it is an open source project maintained by Facebook and 100+ other contributors. React JS is used in Facebook and popular photo sharing website Instagram. React JS is a User Interface library. React use Virtual DOM instead of Real DOM, This help us to create more Fast and Scalable web applications. One of the main attractions is, React JS is reusable components, HTML elements are reusable components in React, and we can use same for other places. Another features are high speed Virtual DOM, Browser independent etc. Latest React JS is 0.014 beta which does not require separate JSX file, we can directly write JSX in scripts, but it will be good if we convert this to real JS in production environment (We can reduce browser load) React JS supports different states, we can easily bind our vanila JS events to React, like onClick, Hover, etc. We can download React JS file from Github, it is free and open source Download Link React : http://facebook.github.io/react/index.html Example React JS It is better to look on some examples React use render method to get input and it return what to display Example
var HelloWorld = React.createClass({
render : function(){
return <div> Hello World </div>
}
})
This has one drawback, it only return one node, if we want to multiple item we need to wrap it by another element, for example
var HelloWorldReturnmany = React.createClass({
render: function(){
return <div>
<section></section>
<section></section>
<section></section>
</div>
}
})
In this example we return 3 sections which has an outer div element.
We use React.render() method to display it on web page, which require two parameter( We can pass third parameter but it is optional), first one is react component which created by React.createClass, then where to display
Example
I have a HTML page
<html> <head> <title> React JS : Example </title> </head> <body> <div id=”home”></div> </body> </html>I want to display my Hello world output inside div with id home React.render(<HelloWorld/>,document.getElementById(‘home’)), if we want to display it on body, we need replace ‘document.getElementById(‘home’)’ by ‘document.body’. React JS also support states, every instant have states. We can set state using setState method. so we can handle states changes and we can perform different actions, some of the default states are getInitialState = It is the first state when we load a website, we can see contents in this function when we load a page, like default values at the begining. getDefaultProps is another state. There are many states available in React. Mixins : Array of object used to extend functionality. Life Cycle : Life cycle is another important and usable feature on react js. We can run specific javascript functions during these life cycles. componentWillMount: which invoke before component mount/ display on page componentDidMount: which invoke just after it display/mount on page componentWillUnmount: which invoke when we delete one component or similar actions. ShouldComponentUpdate: return value determine whether component should update. You can refer this page for more stated and lifecycles http://facebook.github.io/react/docs/component-specs.html Props: It is one of the term we used to use in react applications. Simply it is use to deal with attributes. Let’s look on an example; here is my react js component <HelloWorld> I have one attribute called name, year or anything, then it become <HelloWorld name=”hello” year=”2015”/>, in jquery we can use $(‘elementSelector’).attr(‘name’) same we use props in react js We can use this.props.name to get name and this.props.year to get year, this will be very useful when we deals with real time applications. Bottom line: React JS is a beautiful JavaScript framework which focus on User interface as reusable components, It can also use to make iOS, Android and Windows phone applications. It is not a full MVC framework like Angular or bootstrap. It just likes partials in PHP, Ruby on Rails etc. It is more close to UI/UX, Frontend development. 0.14 beta is the latest ReactJS version, It is not yet reach to version 1, It will add more features in future. It is a good to learn JavaScript language. Unidirectional Data flow React support unidirectional dataflow, it happening via state and props. We can use parent’s attributes in children’s also. We can pass values to child elements.
render: function(){
return (
<div className="filter-list">
<select name="">
<options></options>...
</select>
<List items={this.state.items}/>
</div>
);
List is a child element, and we pass items to child element, we can render it on child element also we can control child element state from parent.
React’s site provides all the information you need to setup a project and begin coding.
Bottom line : React JS is a beautiful javascript framework which focus on User inteface as reusble components, It can also use to make iOS, Android and Windows phone applicatiions. It is not a full MVC framework like Angular or bootstrap. It just like partials in PHP, Ruby On Rails etc.We can use other popular javascript frameworks with React.
It is more close to UI/UX, Frontend development. 0.14 beta is the latest ReactJS version, It is not yet reach to version 1, It will add more features in future. It is a good to learn Javascript Framework.
We will update this post with more example.]]>
