From 4e8b2ee735dc6aae257ae795361ae6b605e7555d Mon Sep 17 00:00:00 2001 From: gregostrowski Date: Tue, 3 May 2016 10:18:44 -0500 Subject: [PATCH] first tutorial --- comments.json | 20 ++++-- public/index.html | 7 +- public/scripts/myexample.js | 130 ++++++++++++++++++++++++++++++++++++ 3 files changed, 147 insertions(+), 10 deletions(-) create mode 100644 public/scripts/myexample.js diff --git a/comments.json b/comments.json index 7bef77ad..b99a5891 100644 --- a/comments.json +++ b/comments.json @@ -1,12 +1,22 @@ [ { "id": 1388534400000, - "author": "Pete Hunt", - "text": "Hey there!" + "author": "Greg", + "text": "I'm trying to learn React" }, { "id": 1420070400000, - "author": "Paul O’Shannessy", - "text": "React is *great*!" + "author": "Gregbot", + "text": "here to serve, master." + }, + { + "id": 1470456700000, + "author": "Gregbot", + "text": "new comment for you, master." + }, + { + "id": 1462288513665, + "author": "Gregbot", + "text": "psoting something" } -] +] \ No newline at end of file diff --git a/public/index.html b/public/index.html index 34ebddf4..4255d3e6 100644 --- a/public/index.html +++ b/public/index.html @@ -13,10 +13,7 @@
- - + + diff --git a/public/scripts/myexample.js b/public/scripts/myexample.js new file mode 100644 index 00000000..1e9d8906 --- /dev/null +++ b/public/scripts/myexample.js @@ -0,0 +1,130 @@ +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); + }, + handleCommentSubmit: function(comment) { + var comments = this.state.data; + comment.id = Date.now(); + var newComments = comments.concat([comment]); + this.setState({data: newComments}); + $.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) { + this.setState({data: comments}); + console.error(this.props.url, status, err.toString()); + }.bind(this) + }); + }, + render: function() { + return ( +
+

Comments

+ + +
+ ); + } +}); + +var CommentList = React.createClass({ + render: function () { + var commentNodes = this.props.data.map( function (comment) { + return ( + + {comment.text} + + ); + }); + return ( +
+ {commentNodes} +
+ ); + } +}); + +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; + } + this.props.onCommentSubmit({author: author, text: text}); + this.setState({author: '', text: ''}); + }, + render: function () { + return ( +
+ + + +
+ ); + } +}); + +var Comment = React.createClass({ + render: function () { + return ( +
+

+ {this.props.author} +

+ {this.props.children} +
+ ); + } +}); + +var mockData = [ + {id: 1, author: "Greg Ostrowski", text: "I'm trying to learn React"}, + {id: 2, author: "Greg Bot", text: "I'm a bot"} +] + +ReactDOM.render( + , + document.getElementById('content') +); \ No newline at end of file