diff --git a/comments.json b/comments.json
index 7bef77ad..7e8afd11 100644
--- a/comments.json
+++ b/comments.json
@@ -8,5 +8,30 @@
         "id": 1420070400000,
         "author": "Paul O’Shannessy",
         "text": "React is *great*!"
+    },
+    {
+        "id": 1456129633736,
+        "author": "xc",
+        "text": "asd"
+    },
+    {
+        "id": 666,
+        "author": "Kim Chee",
+        "text": "Hello *world*"
+    },
+    {
+        "id": 1456137002777,
+        "author": "Pietje",
+        "text": "Bel"
+    },
+    {
+        "id": 1456137022510,
+        "author": "Test",
+        "text": "Laa"
+    },
+    {
+        "id": 1456142671022,
+        "author": "dfsdf",
+        "text": "sdfsdf"
     }
-]
+]
\ No newline at end of file
diff --git a/public/hello-react.html b/public/hello-react.html
new file mode 100644
index 00000000..fa0d6d82
--- /dev/null
+++ b/public/hello-react.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Hello React</title>
+    <!-- https://facebook.github.io/react/docs/displaying-data.html -->
+    <script src="https://fb.me/react-0.14.7.js"></script>
+    <script src="https://fb.me/react-dom-0.14.7.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
+  </head>
+  <body>
+    <div id="example"></div>
+    <script type="text/babel">
+
+      var LikeButton = React.createClass({
+        getInitialState: function() {
+          return {liked: false};
+        },
+        handleClick: function(event) {
+          this.setState({liked: !this.state.liked});
+        },
+        render: function() {
+          var text = this.state.liked ? 'like' : 'haven\'t liked';
+          return (
+            <p onClick={this.handleClick}>
+              You {text} this. Click to toggle.
+            </p>
+          );
+        }
+      });     
+
+      // ** Your code goes here! **
+      var HelloWorld = React.createClass({
+        render: function() {
+          return (
+            <div>
+              <p>
+                Hello, <input type="text" placeholder="Your name here" />!
+                It is {this.props.date.toTimeString()}
+              </p>
+              <LikeButton />            
+            </div>
+          );
+        }
+      });
+ 
+
+      setInterval(function() {
+        ReactDOM.render(
+          <HelloWorld date={new Date()} />,
+          document.getElementById('example')
+        );
+      }, 500);
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 21340e72..43aecf00 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,10 +13,148 @@
   </head>
   <body>
     <div id="content"></div>
-    <script type="text/babel" src="scripts/example.js"></script>
+    <!--script type="text/babel" src="scripts/example.js"></script-->
     <script type="text/babel">
-      // To get started with this tutorial running your own code, simply remove
-      // the script tag loading scripts/example.js and start writing code here.
+
+      // tutorial4.js
+      var Comment = React.createClass({
+        rawMarkup: function() {
+          var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
+          return { __html: rawMarkup };
+        },
+
+        render: function() {
+          return (
+            <div className="comment">
+              <h2 className="commentAuthor">
+                {this.props.author}
+              </h2>
+              <span dangerouslySetInnerHTML={this.rawMarkup()} />
+            </div>
+          );
+        }
+      });
+
+      // tutorial2.js
+      var CommentList = React.createClass({
+        render: function() {
+          var commentNodes = this.props.data.map(function(comment) {
+            return (
+              <Comment author={comment.author} key={comment.id}>
+                {comment.text}
+              </Comment>
+            );
+          });          
+          return (
+            <div className="commentList">
+              {commentNodes}
+            </div>
+          );
+        }
+      });
+
+      var CommentForm = React.createClass({
+        getInitialState: function() {
+          return {author: '', text: ''};
+        },
+        handleAuthorChange: function(e) {
+          this.setState({author: e.target.value});
+        },
+        handleTextChange: function(e) {
+          this.setState({text: e.target.value});
+        },
+        handleSubmit: function(e) {
+          e.preventDefault();
+          var author = this.state.author.trim();
+          var text = this.state.text.trim();
+          if (!text || !author) {
+            return;
+          }
+          this.props.onCommentSubmit({author: author, text: text});
+          this.setState({author: '', text: ''});
+        },
+        render: function() {
+          return (
+            <form className="commentForm" onSubmit={this.handleSubmit}>
+              <input
+                type="text"
+                placeholder="Your name"
+                value={this.state.author}
+                onChange={this.handleAuthorChange}
+              />
+              <input
+                type="text"
+                placeholder="Say something..."
+                value={this.state.text}
+                onChange={this.handleTextChange}
+              />
+              <input type="submit" value="Post" />
+            </form>
+          );
+        }
+      }); 
+      // tutorial1.js
+      var CommentBox = React.createClass({
+
+        loadCommentsFromServer: function() {
+          $.ajax({
+            url: this.props.url,
+            dataType: 'json',
+            cache: false,
+            success: function(data) {
+              this.setState({data: data});
+            }.bind(this),
+            error: function(xhr, status, err) {
+              console.error(this.props.url, status, err.toString());
+            }.bind(this)
+          });
+        },
+        handleCommentSubmit: function(comment) {
+          var comments = this.state.data;
+          // Optimistically set an id on the new comment. It will be replaced by an
+          // id generated by the server. In a production application you would likely
+          // not use Date.now() for this and would have a more robust system in place.
+          comment.id = Date.now();
+          var newComments = comments.concat([comment]);
+          this.setState({data: newComments});          
+
+          $.ajax({
+            url: this.props.url,
+            dataType: 'json',
+            type: 'POST',
+            data: comment,
+            success: function(data) {
+              this.setState({data: data});
+            }.bind(this),
+            error: function(xhr, status, err) {
+              this.setState({data: comments});
+              console.error(this.props.url, status, err.toString());
+            }.bind(this)
+          });
+        },        
+        getInitialState: function() {
+          return {data: []};
+        },    
+        componentDidMount: function() {
+          this.loadCommentsFromServer();
+          setInterval(this.loadCommentsFromServer, this.props.pollInterval);
+        },                
+        render: function() {
+          return (
+            <div className="commentBox">
+              <h1>Comments</h1>
+              <CommentList data={this.state.data} pollInterval={2000} />
+              <CommentForm onCommentSubmit={this.handleCommentSubmit} />
+            </div>
+          );
+        }
+      });
+
+      ReactDOM.render(
+        // <CommentBox data={data} />,
+        <CommentBox url="/api/comments" />,
+        document.getElementById('content')
+      );      
     </script>
   </body>
 </html>
