Added tutorial jsx

bmanth60 · Apr 9, 2015 · 1f3e0ed · 1f3e0ed
1 parent 826b5e6
commit 1f3e0ed
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 0 deletions.
diff --git a/public/js/tutorial.jsx b/public/js/tutorial.jsx
@@ -0,0 +1,60 @@
+var data = [
+  {author: "Pete Hunt", text: "This is one comment"},
+  {author: "Jordan Walke", text: "This is *another* comment"}
+];
+var converter = new Showdown.converter();
+var CommentBox = React.createClass({
+  render: function() {
+    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 (
+      //{commentNodes}
+    );
+  }
+});
+
+var CommentForm = React.createClass({
+  render: function() {
+    return (
+      <div className="commentForm">
+        Hello, world! I am a CommentForm.
+      </div>
+    );
+  }
+});
+
+var Comment = React.createClass({
+  render: function() {
+    var rawMarkup = converter.makeHtml(this.props.children.toString());
+    return (
+      <div className="comment">
+        <h2 className="commentAuthor">
+          {this.props.author}
+        </h2>
+        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
+      </div>
+    );
+  }
+});
+
+React.render(
+  <CommentBox data={data} />,
+  document.getElementById('content')
+);
diff --git a/public/test.html b/public/test.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<!--
+To change this license header, choose License Headers in Project Properties.
+To change this template file, choose Tools | Templates
+and open the template in the editor.
+-->
+<html>
+    <head>
+        <title>Test Page</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
+        <script type="text/jsx;harmony=true" src="js/tutorial.jsx"></script>
+    </head>
+    <body>
+        <div id="content"></div>
+    </body>
+</html>