From c5b684ee46b91316a65db484c7152d2499ba4c74 Mon Sep 17 00:00:00 2001 From: Gideon Dresdner Date: Sun, 10 May 2015 18:17:36 +0300 Subject: [PATCH 1/6] getting started with tutorial. I have learned how to render HTML...sort of. --- public/index.html | 3 ++- public/scripts/tutorial.js | 12 ++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 public/scripts/tutorial.js diff --git a/public/index.html b/public/index.html index c6220169..d40006bb 100644 --- a/public/index.html +++ b/public/index.html @@ -11,6 +11,7 @@
- + + diff --git a/public/scripts/tutorial.js b/public/scripts/tutorial.js new file mode 100644 index 00000000..9a8508de --- /dev/null +++ b/public/scripts/tutorial.js @@ -0,0 +1,12 @@ +var CommentBox = React.createClass({ + render: function() { + return ( +
+ Hello, world. I am CommentBox +
+ ); + } +}); + +React.render(, + document.getElementById('content')); From e8107413e5a58b27d3d4c10042d6815571d595da Mon Sep 17 00:00:00 2001 From: Gideon Dresdner Date: Mon, 11 May 2015 04:09:45 +0300 Subject: [PATCH 2/6] i know how to make nested elements --- public/scripts/tutorial.js | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/public/scripts/tutorial.js b/public/scripts/tutorial.js index 9a8508de..ed5ec0a8 100644 --- a/public/scripts/tutorial.js +++ b/public/scripts/tutorial.js @@ -2,7 +2,29 @@ var CommentBox = React.createClass({ render: function() { return (
- Hello, world. I am CommentBox +

Comments

+ + +
+ ); + } +}); + +var CommentList = React.createClass({ + render: function() { + return ( +
+ Hello, world. I am CommentList +
+ ); + } +}); + +var CommentForm = React.createClass({ + render: function() { + return ( +
+ Hello, world. I am CommentForm
); } From f10a7e28f9b540f3bce4e9e496c1d0455153082d Mon Sep 17 00:00:00 2001 From: Gideon Dresdner Date: Mon, 11 May 2015 04:22:32 +0300 Subject: [PATCH 3/6] I know how to access props and set raw HTML --- public/scripts/tutorial.js | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/public/scripts/tutorial.js b/public/scripts/tutorial.js index ed5ec0a8..dab5a087 100644 --- a/public/scripts/tutorial.js +++ b/public/scripts/tutorial.js @@ -1,3 +1,17 @@ +var Comment = React.createClass({ + render: function() { + var raw_markup = marked(this.props.children.toString(), {santize: true}); + return ( +
+

+ {this.props.author} +

+ +
+ ); + } +}); + var CommentBox = React.createClass({ render: function() { return ( @@ -13,8 +27,9 @@ var CommentBox = React.createClass({ var CommentList = React.createClass({ render: function() { return ( -
- Hello, world. I am CommentList +
+ This is one comment + This is another comment
); } @@ -24,7 +39,6 @@ var CommentForm = React.createClass({ render: function() { return (
- Hello, world. I am CommentForm
); } From bbf400f50ff5bd1204f2254c22cad7800debb163 Mon Sep 17 00:00:00 2001 From: Gideon Dresdner Date: Mon, 11 May 2015 05:11:17 +0300 Subject: [PATCH 4/6] I know how to hook in data. --- public/scripts/tutorial.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/public/scripts/tutorial.js b/public/scripts/tutorial.js index dab5a087..3f0775de 100644 --- a/public/scripts/tutorial.js +++ b/public/scripts/tutorial.js @@ -1,3 +1,7 @@ +var data = [ + {author: "Pete Hunt", text: "This is one comment"}, + {author: "Jordan Walke", text: "This is *another* comment"} +]; var Comment = React.createClass({ render: function() { var raw_markup = marked(this.props.children.toString(), {santize: true}); @@ -17,7 +21,7 @@ var CommentBox = React.createClass({ return (

Comments

- +
); @@ -26,10 +30,16 @@ var CommentBox = React.createClass({ var CommentList = React.createClass({ render: function() { + var commentNodes = this.props.data.map(function(comment){ + return ( + + {comment.text} + + ); + }); return (
- This is one comment - This is another comment + {commentNodes}
); } @@ -44,5 +54,5 @@ var CommentForm = React.createClass({ } }); -React.render(, +React.render(, document.getElementById('content')); From 981421f25f244a9ad5106d558033c81f10d46a74 Mon Sep 17 00:00:00 2001 From: Gideon Dresdner Date: Mon, 11 May 2015 12:12:41 +0300 Subject: [PATCH 5/6] full functionality including saving comments. --- comments.json | 10 ++++++- public/scripts/tutorial.js | 59 ++++++++++++++++++++++++++++++++++---- 2 files changed, 63 insertions(+), 6 deletions(-) diff --git a/comments.json b/comments.json index 32938452..e66413fa 100644 --- a/comments.json +++ b/comments.json @@ -2,5 +2,13 @@ { "author": "Pete Hunt", "text": "Hey there!" + }, + { + "author": "Gideon Dresdner", + "text": "Boom" + }, + { + "author": "Chaka", + "text": "Laka" } -] +] \ No newline at end of file diff --git a/public/scripts/tutorial.js b/public/scripts/tutorial.js index 3f0775de..24f56798 100644 --- a/public/scripts/tutorial.js +++ b/public/scripts/tutorial.js @@ -17,12 +17,46 @@ var Comment = React.createClass({ }); var CommentBox = React.createClass({ + getInitialState: function() { + return {data: []}; + }, + 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.log(this.props.url, status, err.toString()); + } + }); + }, + handleCommentSubmit: function(comment) { + $.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) { + console.log(this.props.url, status, err.toString()); + }.bind(this) + }); + }, + componentDidMount: function() { + this.loadCommentsFromServer(); + setInterval(this.loadCommentsFromServer, this.props.pollInterval); + }, render: function() { return (

Comments

- - + +
); } @@ -46,13 +80,28 @@ var CommentList = React.createClass({ }); var CommentForm = React.createClass({ + handleSubmit: function(e) { + e.preventDefault(); + var author = React.findDOMNode(this.refs.author).value.trim(); + var text = React.findDOMNode(this.refs.text).value.trim(); + if (!text || !author) { + return; + } + this.props.onCommentSubmit({author: author, text: text}); + React.findDOMNode(this.refs.author).value = ''; + React.findDOMNode(this.refs.text).value = ''; + return; + }, render: function() { return ( -
-
+
+ + + +
); } }); -React.render(, +React.render(, document.getElementById('content')); From 911be4989bb936b3f8a37a6c951e89401a36b9da Mon Sep 17 00:00:00 2001 From: Gideon Dresdner Date: Mon, 11 May 2015 12:25:35 +0300 Subject: [PATCH 6/6] optimistically append new comments. --- comments.json | 4 ++++ public/scripts/tutorial.js | 3 +++ 2 files changed, 7 insertions(+) diff --git a/comments.json b/comments.json index e66413fa..93e944d9 100644 --- a/comments.json +++ b/comments.json @@ -10,5 +10,9 @@ { "author": "Chaka", "text": "Laka" + }, + { + "author": "Joe", + "text": "I find this very interesting." } ] \ No newline at end of file diff --git a/public/scripts/tutorial.js b/public/scripts/tutorial.js index 24f56798..56241b8c 100644 --- a/public/scripts/tutorial.js +++ b/public/scripts/tutorial.js @@ -34,6 +34,9 @@ var CommentBox = React.createClass({ }); }, handleCommentSubmit: function(comment) { + var comments = this.state.data; + var newComments = comments.concat([comment]); + this.setState({data: newComments}); $.ajax({ url: this.props.url, dataType: 'json',