index.html

<!-- index.html -->
<html>
  <head>
    <title>Hello React</title>
    <script src="http://fb.me/react-0.12.2.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">
      // Your code here
          var data = [
            {author: "Pete Hunt", text: "This is one comment"},
            {author: "Jordan Walke", text: "This is *another* comment"}
          ];

          //the creation of a React component
          var CommentBox = React.createClass({displayName: 'CommentBox',
          render: function() {
          //a tree of React components that will render to HTML
            return (
              <div className="commentBox">
              <h1>Comments</h1>
              <CommentList data={this.props.data}/>
              <CommentForm />
              </div>
              )

          }

          });

          var CommentList = React.createClass({
            render: function() {
              var commentNodes = this.props.data.map(function (comment) {
                return (
                  <Comment author={comment.author}>
                    {comment.text}
                    </Comment>
                  );
                });

              return (
                <div className="commentList">
                  {commentNodes}
                </div>
              );
          }
          });


          var Comment = React.createClass({
            render: function() {
                return(
                  <div className="comment">
                    <h2 className="commentAuthor">
                      {this.props.author}
                    </h2>
                    {this.props.children}
                  </div>

                )
            }
          });

          var CommentForm = React.createClass({
            render: function() {
              return (
                <div className="commentForm">
                Hello, world! I am a CommentForm.
                </div>
              );
          }
          });


          //Instantiates the root component, starts framework, injects markup into raw DOM element
          React.render(
            <CommentBox data={data} />,
            document.getElementById('content')
          );
    </script>
  </body>
</html>