Add tutorial8-10

Author: Matt Calthrop

public/index.html

@@ -17,6 +17,7 @@
     <!--<script type="text/babel" src="scripts/tutorial1.js"></script>-->
     <!--<script type="text/babel" src="scripts/tutorial2-3.js"></script>-->
     <!--<script type="text/babel" src="scripts/tutorial4-5.js"></script>-->
-    <script type="text/babel" src="scripts/tutorial6-7.js"></script>
+    <!--<script type="text/babel" src="scripts/tutorial6-7.js"></script>-->
+    <script type="text/babel" src="scripts/tutorial8-10.js"></script>
   </body>
 </html>

public/scripts/tutorial8-10.js

@@ -0,0 +1,69 @@
+/* global React, ReactDOM */
+
+var data = [
+    {id: 1, author: "Neil Peart", text: "Hemispheres"},
+    {id: 2, author: "Neil Fallon", text: 'Blast Tyrant'}
+];
+
+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>
+        );
+    }
+});
+
+var CommentList = React.createClass({
+    render: function () {
+        var commentNodes = this.props.data.map(function (comment) {
+            return (
+                <Comment key={comment.id} author={comment.author}>
+                    {comment.text}
+                </Comment>
+            );
+        });
+
+        return (
+            <div className="commentList">
+                {commentNodes}
+            </div>
+        );
+    }
+});
+
+var CommentForm = React.createClass({
+    render: function () {
+        return (
+            <div className="commentForm">
+                Hello, world! I am a CommentForm.
+            </div>
+        );
+    }
+});
+
+var CommentBox = React.createClass({
+    render: function () {
+        return (
+            <div className="commentBox">
+                <h1>Comments</h1>
+                <CommentList data={this.props.data}/>
+                <CommentForm />
+            </div>
+        );
+    }
+});
+
+ReactDOM.render(
+    <CommentBox data={data}/>,
+    document.getElementById('content')
+);