From 7c432e7797a567f5ebae2bd26ecebdbfe0d943e5 Mon Sep 17 00:00:00 2001 From: kevmo Date: Sun, 24 Jan 2016 11:36:27 -0500 Subject: [PATCH] React tutorial finished --- comments.json | 7 ++- public/index.html | 12 ++-- public/scripts/tutorial1.js | 120 ++++++++++++++++++++++++++++++++++++ 3 files changed, 133 insertions(+), 6 deletions(-) create mode 100644 public/scripts/tutorial1.js diff --git a/comments.json b/comments.json index 7bef77ad..ca6ba194 100644 --- a/comments.json +++ b/comments.json @@ -8,5 +8,10 @@ "id": 1420070400000, "author": "Paul O’Shannessy", "text": "React is *great*!" + }, + { + "id": 1453644156836, + "author": "kevin", + "text": "fuck u" } -] +] \ No newline at end of file diff --git a/public/index.html b/public/index.html index c6494446..11900551 100644 --- a/public/index.html +++ b/public/index.html @@ -13,10 +13,12 @@
- - + + + + + + + diff --git a/public/scripts/tutorial1.js b/public/scripts/tutorial1.js new file mode 100644 index 00000000..db94b71f --- /dev/null +++ b/public/scripts/tutorial1.js @@ -0,0 +1,120 @@ +var data = [ + {id: 1, author: "Pete Hunt", text: "This is one comment"}, + {id: 2, author: "Jordan Walke", text: "This is *another* comment"} +]; + + +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.error(this.props.url, status, err.toString()); + }.bind(this) + }); + }, + componentDidMount: function() { + this.loadCommentsFromServer(); + setInterval(this.loadCommentsFromServer, this.props.pollInterval); + }, + render: function() { + return ( +
+

Comments

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

+ {this.props.author} +

+ +
+ ) + } +}); + + +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; + } + // TODO: send request to the server + this.setState({author: '', text: ''}); + }, + render: function() { + return ( +
+ + +
+ ); + } +}); + + + +ReactDOM.render( + , + document.getElementById('content') +);