React is another awesome addition to javascript’s rich library collection. Jordan Walke, a software engineer at Facebook, created React being inspired from XHP, a HTML component framework for PHP. It has been more than 3 years since its first release and its heavy usage on web development is well on the way. React has grown beyond bound in terms of popularity, as it sits as the top open-source project of Facebook and 6th most starred project of all time on GitHub.
As a web development enthusiast, you have got to be excited by the fact that a great library has come into our reach and being developed by none other than the folks at Facebook. And as a newbie to this world, you have got to keep up with all these latest advancements. So if you haven’t already started learning React, this is the exact time you get acquainted and dive into this amazing world of React.
If you know about the MVC platform, then you can consider React as the “V” of that platform. And for others, React can be seen as a tool or generator to create a structured view of an application. Fascinating structure that React has embodied – makes complex and dynamic UI design and occupying functionalities easier than ever. It harnesses the power of javascript to render a user interface that varies depending on data and from time to time – without explicit data-bindings and all other related headaches.
React possesses the quality of being declarative, reusable, flexible, simple and not to mention – lightning quick. React is easily understandable since it has been great enough to adapt the basic ideas of javascript and HTML/XML while building blocks of codes. Let us look at a sample code below,

[sourcecode language=”plain”]
var HelloWorld = React.createClass({
render () {
return (

<div>Hello {this.props.name}! </div>

);
}
})

ReactDOM.render(<HelloWorld name="World"/>, document.getElementById(‘container’));
[/sourcecode]

And the output becomes …

[sourcecode language=”plain”]“

<div id=’container’/>” => “

<div id=’container’>

<div>Hello World! </div>

”[/sourcecode]

So, what’s happening here is that a component named HelloWorld is getting rendered as a child inside a container. A new syntax, named JSX, which is being returned in the render function, resembles a lot of HTML. Although not purely HTML, it certainly gets easier for a coder to grasp the idea of what to expect in one glance. Just like attributes can be used in the HTML tags, an attribute was provided to HelloWorld component which is considered as its props.
A component can have certain states and props. Props are the source of truth for a component which should be considered immutable inside its scope, while states dictate what the components current view might look like. An example is worth a thousand explanation..

[sourcecode language=”plain”]
var Counter = React.createClass({
getInitialState () {
return ({
clickCount: 0
});
},
clickHandler () {
this.setState({clickCount: this.state.clickCount+1});
},
render () {
return (

<div onClick={this.clickHandler}>This element has been clicked {this.state.clickCount} times! </div>

);
}
})

ReactDOM.render(<Counter />, document.getElementById(‘container’));
[/sourcecode]

Now, Counter is a component which counts the number of time certain element has been clicked. Instead of regular ‘onclick’ attribute, a camelCase transformed ‘onClick’ is handling the click event, which is still cool as you won’t need to jump into another alien planet to figure out the regular functionalities. A state named clickCount is keeping the tab of the number of times inner ‘div’ has been clicked, once it gets clicked, a state change occurs, clickCount state increases and React automatically refreshes the view. So instead of thinking what to change and when to change, react does it for us in the efficient way possible whenever the data/state changes. You tell React what it should look like in a certain state, and it will render whenever your application transits to that state. For that purpose, a notion ‘Virtual DOM’ has been developed. This Virtual DOM, instead of keeping the actual DOM structure, keeps a lightweight representation of the view. In each render/ state change, it differentiates the last kept Virtual DOM and currently generated structure. The minimal change that is required to update the DOM is decided and real DOM is updated hence forth. It leaves us with only the work of presenting the view structure in JSX and determining the states that should change the view, and voila! You are good to go to build a large dynamic web interface. Organize each simple component to build a complex user interface faster and also with more fun.
React community is growing rapidly and is already loaded with lots of helper libraries, frameworks, reusable components and lot others to integrate into your web application. You can easily obtain help and sort out your issues there, you just need to blend in and witness the power of React that it has to offer. And trust me, this is going to be a thrilling ride, as it was for me!