From cf0719bf0e7fc5860a50285042bc62603033037b Mon Sep 17 00:00:00 2001 From: Hamilton Greene Date: Wed, 24 Feb 2016 14:05:10 -0500 Subject: [PATCH 01/16] Tutorial2.js --- public/index.html | 37 ++++++++++++++++++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 21340e72..c3c2299f 100644 --- a/public/index.html +++ b/public/index.html @@ -13,10 +13,45 @@
- From 816bdbd018856528c6fc5c1fe697a16e5bd9b281 Mon Sep 17 00:00:00 2001 From: Hamilton Greene Date: Wed, 24 Feb 2016 14:09:46 -0500 Subject: [PATCH 02/16] Tutorial3.js --- public/index.html | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/public/index.html b/public/index.html index c3c2299f..5e38ff98 100644 --- a/public/index.html +++ b/public/index.html @@ -22,15 +22,13 @@ render: function() { return (
- Hello, world! I am a CommentBox. +

Comments

+ +
); } }); - ReactDOM.render( - , - document.getElementById('content') - ); //tutorial2.js var CommentList = React.createClass({ @@ -52,6 +50,11 @@ ); } }); + + ReactDOM.render( + , + document.getElementById('content') + ); From d5836885e3110b4e49a7719cadf0ed8d6d9eb754 Mon Sep 17 00:00:00 2001 From: Hamilton Greene Date: Wed, 24 Feb 2016 14:16:46 -0500 Subject: [PATCH 03/16] Tutorial4.js --- public/index.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/public/index.html b/public/index.html index 5e38ff98..e9630a14 100644 --- a/public/index.html +++ b/public/index.html @@ -41,6 +41,19 @@

Comments

} }); + var Comment = React.createClass({ + render: function() { + return ( +
+

+ {this.props.author} +

+ {this.props.children} +
+ ); + } + }); + var CommentForm = React.createClass({ render: function() { return ( From 17cdb50f2c38e4ca8d3a6f325903584ee850a7c7 Mon Sep 17 00:00:00 2001 From: Hamilton Greene Date: Wed, 24 Feb 2016 14:22:09 -0500 Subject: [PATCH 04/16] Tutorial5.js --- public/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index e9630a14..bc1f3f23 100644 --- a/public/index.html +++ b/public/index.html @@ -35,7 +35,8 @@

Comments

render: function() { return (
- Hello, world! I am a commentList. + This is one comment + This is *another* comment
); } From 5bc51bd67ea98b0e97948af4e630eeaee3cf13b7 Mon Sep 17 00:00:00 2001 From: Hamilton Greene Date: Wed, 24 Feb 2016 20:13:54 -0500 Subject: [PATCH 05/16] Tutorial6.js --- public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index bc1f3f23..2ef91551 100644 --- a/public/index.html +++ b/public/index.html @@ -49,7 +49,7 @@

Comments

{this.props.author}

- {this.props.children} + {marked(this.props.children.toString())} ); } From a0fa52415345d19f23b10159fe48940163a52293 Mon Sep 17 00:00:00 2001 From: Hamilton Greene Date: Wed, 24 Feb 2016 20:17:34 -0500 Subject: [PATCH 06/16] Tutorial7.js --- public/index.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 2ef91551..855cef07 100644 --- a/public/index.html +++ b/public/index.html @@ -43,13 +43,17 @@

Comments

}); var Comment = React.createClass({ + rawMarkup: function() { + var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); + return{ __html: rawMarkup}; + }, render: function() { return (

{this.props.author}

- {marked(this.props.children.toString())} +
); } From 7e8e644669e73a50d32908f92f65ad9a6cc80408 Mon Sep 17 00:00:00 2001 From: Hamilton Greene Date: Wed, 24 Feb 2016 20:21:12 -0500 Subject: [PATCH 07/16] Tutorial8.js --- public/index.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/public/index.html b/public/index.html index 855cef07..785a92c9 100644 --- a/public/index.html +++ b/public/index.html @@ -17,6 +17,11 @@ // To get started with this tutorial running your own code, simply remove // the script tag loading scripts/example.js and start writing code here. + var data = [ + {id: 1, author: "Pete Hunt", text: "This is one comment"}, + {id: 2, author: "Jordan Walke", text: "This is *another* comment"}, + ]; + //tutorial1.js var CommentBox = React.createClass({ render: function() { From e9e170377256f120bfb2ab5b7141a344893da6ed Mon Sep 17 00:00:00 2001 From: Hamilton Greene Date: Wed, 24 Feb 2016 20:32:33 -0500 Subject: [PATCH 08/16] Tutorial10.js --- public/index.html | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/public/index.html b/public/index.html index 785a92c9..933cf03e 100644 --- a/public/index.html +++ b/public/index.html @@ -19,7 +19,7 @@ var data = [ {id: 1, author: "Pete Hunt", text: "This is one comment"}, - {id: 2, author: "Jordan Walke", text: "This is *another* comment"}, + {id: 2, author: "Jordan Walke", text: "This is *another* comment - from data"}, ]; //tutorial1.js @@ -28,7 +28,7 @@ return (

Comments

- +
); @@ -38,10 +38,16 @@

Comments

//tutorial2.js 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}
); } @@ -75,7 +81,7 @@

}); ReactDOM.render( - , + , document.getElementById('content') ); From 01ee9918eac1508676e342a88b5d944414e0fb3f Mon Sep 17 00:00:00 2001 From: Hamilton Greene Date: Wed, 24 Feb 2016 20:38:25 -0500 Subject: [PATCH 09/16] Tutorial12.js --- public/index.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index 933cf03e..e0c161e5 100644 --- a/public/index.html +++ b/public/index.html @@ -24,11 +24,14 @@ //tutorial1.js var CommentBox = React.createClass({ + getInitialState: function() { + return {data: []}; + }, render: function() { return (

Comments

- +
); @@ -81,7 +84,7 @@

}); ReactDOM.render( - , + , document.getElementById('content') ); From 2657a0185e869c93c6f58c29846fa7719d7e015d Mon Sep 17 00:00:00 2001 From: Hamilton Greene Date: Wed, 24 Feb 2016 20:44:00 -0500 Subject: [PATCH 10/16] Tutorial13.js --- public/index.html | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index e0c161e5..1d96a02d 100644 --- a/public/index.html +++ b/public/index.html @@ -27,6 +27,19 @@ getInitialState: function() { return {data: []}; }, + componentDidMount: 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) + }); + }, render: function() { return (
@@ -84,7 +97,7 @@

}); ReactDOM.render( - , + , document.getElementById('content') ); From 7e304d3e37d0b786d8a07741be97e2210f5dd355 Mon Sep 17 00:00:00 2001 From: Hamilton Greene Date: Wed, 24 Feb 2016 20:48:33 -0500 Subject: [PATCH 11/16] Tutorial14.js --- public/index.html | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/public/index.html b/public/index.html index 1d96a02d..3c8ded7a 100644 --- a/public/index.html +++ b/public/index.html @@ -24,10 +24,7 @@ //tutorial1.js var CommentBox = React.createClass({ - getInitialState: function() { - return {data: []}; - }, - componentDidMount: function() { + loadCommentsFromServer: function() { $.ajax({ url: this.props.url, dataType: 'json', @@ -40,11 +37,18 @@ }.bind(this) }); }, + getInitialState: function() { + return {data: []}; + }, + componentDidMount: function() { + this.loadCommentsFromServer(); + setInterval(this.loadCommentsFromServer, this.props.pollInterval); + }, render: function() { return (

Comments

- +
); From 082c54897629e339bfa03346461964b0e11f94d1 Mon Sep 17 00:00:00 2001 From: Hamilton Greene Date: Wed, 24 Feb 2016 20:59:40 -0500 Subject: [PATCH 12/16] Tutorial15.js --- public/index.html | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/public/index.html b/public/index.html index 3c8ded7a..a5156114 100644 --- a/public/index.html +++ b/public/index.html @@ -93,9 +93,11 @@

var CommentForm = React.createClass({ render: function() { return ( -
- Hello, world! I am a commentForm. -
+
+ + + +
); } }); From 2e9ba23c2f2b66709624362ff85f18ca72220c38 Mon Sep 17 00:00:00 2001 From: Hamilton Greene Date: Wed, 24 Feb 2016 21:15:35 -0500 Subject: [PATCH 13/16] Tutorial16.js --- public/index.html | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index a5156114..439b3e45 100644 --- a/public/index.html +++ b/public/index.html @@ -91,11 +91,30 @@

}); 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}); + }, render: function() { return (
- - + +
); From 2290f3582f8fd06d335fbfdf972b65a2721c0f89 Mon Sep 17 00:00:00 2001 From: Hamilton Greene Date: Wed, 24 Feb 2016 21:21:38 -0500 Subject: [PATCH 14/16] Tutorial17.js --- public/index.html | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 439b3e45..9d56e71f 100644 --- a/public/index.html +++ b/public/index.html @@ -100,9 +100,19 @@

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(!test || !author) { + return; + } + //TODO: send request to the server + this.setState({author: '', text: ''}); + }, render: function() { return ( -
+ Date: Wed, 24 Feb 2016 21:32:07 -0500 Subject: [PATCH 15/16] Tutorial20.js --- public/index.html | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/public/index.html b/public/index.html index 9d56e71f..2fa2a5f5 100644 --- a/public/index.html +++ b/public/index.html @@ -37,6 +37,21 @@ }.bind(this) }); }, + handleCommentSubmit: function(comment) { + //TODO: submit to the server and refresh the list + $.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.error(this.props.url, status, err.toString()); + }.bind(this) + }); + }, getInitialState: function() { return {data: []}; }, @@ -49,7 +64,7 @@

Comments

- +
); } @@ -104,10 +119,10 @@

e.preventDefault(); var author = this.state.author.trim(); var text = this.state.text.trim(); - if(!test || !author) { + if(!text || !author) { return; } - //TODO: send request to the server + this.props.onCommentSubmit({author: author, text: text}); this.setState({author: '', text: ''}); }, render: function() { From f61028ffceef678527d3fd31e8e64d154882db9e Mon Sep 17 00:00:00 2001 From: Hamilton Greene Date: Wed, 24 Feb 2016 21:37:16 -0500 Subject: [PATCH 16/16] Tutorial Fin --- comments.json | 12 +++++++++++- public/index.html | 9 ++++++++- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/comments.json b/comments.json index 7bef77ad..78597065 100644 --- a/comments.json +++ b/comments.json @@ -8,5 +8,15 @@ "id": 1420070400000, "author": "Paul O’Shannessy", "text": "React is *great*!" + }, + { + "id": 1456367484465, + "author": "Hamilton", + "text": "Yo" + }, + { + "id": 1456367802102, + "author": "SIRHAMY", + "text": "Nice Tutorial breh" } -] +] \ No newline at end of file diff --git a/public/index.html b/public/index.html index 2fa2a5f5..74022503 100644 --- a/public/index.html +++ b/public/index.html @@ -38,7 +38,13 @@ }); }, handleCommentSubmit: function(comment) { - //TODO: submit to the server and refresh the list + var comments = this.state.data; + //Optimistically set an id on the new comment. It will be replaced by an + //id generated by he server. In a prouction 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', @@ -48,6 +54,7 @@ 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) });