Categories: web development

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>