[Docs] Put tutorial up-to-date with the code

11 years ago · 1c50b1dfbb
1 changed files with 29 additions and 37 deletions
--- 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
  <body>
    <div id="content"></div>
    <script type="text/jsx">
-      /**
-       * @jsx React.DOM
-       */
+      /** @jsx React.DOM */
      // The above declaration must remain intact at the top of the script.
      // Your code here
    </script>
@ -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 author={comment.author}>{comment.text}</Comment>;
+      return (
+        <Comment author={comment.author}>
+          {comment.text}
+        </Comment>
+      );
    });
    return (
      <div className="commentList">
@ -491,11 +493,7 @@ var CommentForm = React.createClass({
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
-        <input
-          type="text"
-          placeholder="Say something..."
-          ref="text"
-        />
+        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
@ -549,9 +547,7 @@ var CommentBox = React.createClass({
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
-        <CommentForm
-          onCommentSubmit={this.handleCommentSubmit}
-        />
+        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
      </div>
    );
  }
@ -575,11 +571,7 @@ var CommentForm = React.createClass({
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
-        <input
-          type="text"
-          placeholder="Say something..."
-          ref="text"
-        />
+        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
@ -630,9 +622,7 @@ var CommentBox = React.createClass({
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
-        <CommentForm
-          onCommentSubmit={this.handleCommentSubmit}
-        />
+        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
      </div>
    );
  }
@ -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({
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
-        <CommentForm
-          onCommentSubmit={this.handleCommentSubmit}
-        />
+        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
      </div>
    );
  }