Getting started with React

Author posted by Jitendra on Posted on under category Categories Web Technology and tagged as Tags , , , with Leave a comment on Getting started with React

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.

React Javascript library by Facebook
React Javascript library by Facebook

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. Continue reading “Getting started with React”