diff --git a/public/index.html b/public/index.html
index c6220169..891614c8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,6 +11,8 @@
   </head>
   <body>
     <div id="content"></div>
-    <script type="text/jsx;harmony=true" src="scripts/example.js"></script>
+    <!--script type="text/jsx;harmony=true" src="scripts/example.js"></script-->
+    <script type="text/jsx" src="scripts/test2.js"></script>
+    <script type="text/jsx" src="scripts/test3.js"></script>
   </body>
 </html>
diff --git a/public/scripts/test1.js b/public/scripts/test1.js
new file mode 100644
index 00000000..e5611358
--- /dev/null
+++ b/public/scripts/test1.js
@@ -0,0 +1,16 @@
+var CommentBox = React.createClass({
+    render : function () {
+      return  (
+        <div class='commentBox'>
+          "Hello, world! I am a CommentBox."
+        </div>
+      )
+    }
+});
+
+React.render(
+  <CommentBox />,
+  document.getElementById('content')
+);
+
+// 组件名第一个单词大写
diff --git a/public/scripts/test2.js b/public/scripts/test2.js
new file mode 100644
index 00000000..e62e1bba
--- /dev/null
+++ b/public/scripts/test2.js
@@ -0,0 +1,20 @@
+var CommentList = React.createClass({
+  render : function () {
+    return (
+      <div class='CommentList'>
+        hello I am a CommentList
+      </div>
+    )
+  }
+})
+
+var CommentForm = React.createClass({
+  render : function () {
+    return (
+      <div class='CommentForm'>
+        hello I am a CommentForm
+      </div>
+    )
+  }
+})
+
diff --git a/public/scripts/test3.js b/public/scripts/test3.js
new file mode 100644
index 00000000..b1699b8d
--- /dev/null
+++ b/public/scripts/test3.js
@@ -0,0 +1,15 @@
+var CommentBox = React.createClass({
+  render : function () {
+    return (
+      <div class='commentBox'>
+        <CommentForm />
+        <CommentList />
+      </div>
+    )
+  }
+})
+
+React.render(
+  React.createElement(CommentBox, null),
+  document.getElementById('content')
+);
\ No newline at end of file
