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.

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”.

Posted

in

by


Related Posts

Comments

One response to “Getting started with React”

  1. Huddle Rise Avatar

    very nice this is very great blog

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading