diff --git a/docs/tutorial.md b/docs/tutorial.md index 9d40f00a..528bf861 100644 --- a/docs/tutorial.md +++ b/docs/tutorial.md @@ -22,7 +22,7 @@ It'll also have a few neat features: ### Want to skip all this and just see the source? -[It's all on GitHub.](https://github.com/petehunt/react-tutorial) +[It's all on GitHub.](https://github.com/reactjs/react-tutorial) ### Getting started @@ -40,9 +40,7 @@ For this tutorial we'll use prebuilt JavaScript files on a CDN. Open up your fav
@@ -91,7 +89,7 @@ The first thing you'll notice is the XML-ish syntax in your JavaScript. We have var CommentBox = React.createClass({displayName: 'CommentBox', render: function() { return ( - React.DOM.div({className: "commentBox"}, + React.DOM.div({className: "commentBox"}, "Hello, world! I am a CommentBox." ) ); @@ -308,7 +306,11 @@ Now that the data is available in the `CommentList`, let's render the comments d var CommentList = React.createClass({ render: function() { var commentNodes = this.props.data.map(function (comment) { - return {comment.text}; + return ( + + {comment.text} + + ); }); return (
@@ -491,11 +493,7 @@ var CommentForm = React.createClass({ return (
- +
); @@ -549,9 +547,7 @@ var CommentBox = React.createClass({

Comments

- +
); } @@ -575,11 +571,7 @@ var CommentForm = React.createClass({ return (
- +
); @@ -630,9 +622,7 @@ var CommentBox = React.createClass({

Comments

- +
); } @@ -661,18 +651,22 @@ 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', - 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) + this.setState({data: newComments}, function() { + // `setState` accepts a callback. To avoid (improbable) race condition, + // `we'll send the ajax request right after we optimistically set the new + // `state. + $.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() { @@ -687,9 +681,7 @@ var CommentBox = React.createClass({

Comments

- +
); }