React is open source Javascript library used by Facebook and currently very popular amongst web developers to create user interface. React can be used as View part of MVC design pattern with powerful templating feature supported by “JavaScript syntax extension (JSX)“. React focuses on component based development where each components has its own life cycle. Once of exciting behavior of React is its unidirectional data flow from Parent to child components. React is different than AngularJs in such a way that React passes data in unidirectional however in angularJs data must be available to $scope variable (bidirectional binding). Reusable components in AngularJs should be created as Angular directive however in React every component can be reused.
In this article, I will show very simple Hello world program using React framework.
<html>
<head>
<script src="http://fb.me/react-0.13.1.min.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.1.js"></script>
</head>
<body>
<div id="main"></div>
<script type="text/jsx">
var HelloWorld = React.createClass({
render : function(){
return (
<h1> Hello World</h1>
);
}
});
React.render(<HelloWorld/> , document.getElementById('main'));
</script>
</body>
</html>
Output : Hello World in h1 tag.
Explanation :
As you can see in above code snippet, we have used two javascript files “React” and “JSXTransformer (JSX)”. It is not mandatory to import JSX however recommended to use it so that HTML code can be written very easily inside methods. As it can be seen in return statement, we are creating h1 tag with Hello World content and this representation is possible only because of JSX.
We have created component named “HelloWorld”. it is very important to note that component name should start with uppercase. Internally reacts assumes every lowercase tag as standard HTML component and uppercase tag as custom component.
After creation of “HelloWorld” component, it is rendered in place of div component with id “main”.
Leave a Reply