Hello World in React Js

This is hello word app created with react.js This is my first simple script. Yes, I know it’s easier to do this in html. But I wanted to do this in JSX to make thing more complicated.

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Jsx</title>
</head>
<body>
	
	<!-- container node -->
	<div id="jsx">
		
	</div>
	<!-- container node -->
	<div id="dom">
		
	</div>
	<script src="https://fb.me/react-0.11.1.js"></script>
	<script src="https://fb.me/JSXTransformer-0.11.1.js"></script>
	<script type="text/jsx">
	/** @jsx React.DOM */

	var MessageBox = React.createClass({

		render: function(){
			return (
				<div className="container">
				<h1>Hi</h1>
				<SubMessage />
				</div>

				);
		}
	});

	var SubMessage = React.createClass({
		render: function(){
			return (
			<small>Sub message</small>
			);
		}
	});

	var reactComponentJSX = React.renderComponent(
		<MessageBox />,
		document.getElementById('jsx')
		);
	</script>
</body>
</html>

Leave a Reply