[Docs] Put tutorial up-to-date with the code
Cheng Lou committed
Jun 29, 2014 at 21:39 UTC
58a463f01cc2601448cab26c0bfd5cddfa56984f
1 file changed
+29
-37
docs/docs/tutorial.md
+29
-37
@@ -22,7 +22,7 @@ It'll also have a few neat features:
22
23
### Want to skip all this and just see the source?
24
25
-[It's all on GitHub.](https://github.com/petehunt/react-tutorial)
25
+[It's all on GitHub.](https://github.com/reactjs/react-tutorial)
26
27
### Getting started
28
@@ -40,9 +40,7 @@ For this tutorial we'll use prebuilt JavaScript files on a CDN. Open up your fav
40
<body>
41
<div id="content"></div>
42
<script type="text/jsx">
43
- /**
44
- * @jsx React.DOM
45
- */
43
+ /** @jsx React.DOM */
44
// The above declaration must remain intact at the top of the script.
45
// Your code here
46
</script>
@@ -91,7 +89,7 @@ The first thing you'll notice is the XML-ish syntax in your JavaScript. We have
89
var CommentBox = React.createClass({displayName: 'CommentBox',
90
render: function() {
91
return (
94
- React.DOM.div({className: "commentBox"},
92
+ React.DOM.div({className: "commentBox"},
93
"Hello, world! I am a CommentBox."
94
)
95
);
@@ -308,7 +306,11 @@ Now that the data is available in the `CommentList`, let's render the comments d
306
var CommentList = React.createClass({
307
render: function() {
308
var commentNodes = this.props.data.map(function (comment) {
311
- return <Comment author={comment.author}>{comment.text}</Comment>;
309
+ return (
310
+ <Comment author={comment.author}>
311
+ {comment.text}
312
+ </Comment>
313
+ );
314
});
315
return (
316
<div className="commentList">
@@ -491,11 +493,7 @@ var CommentForm = React.createClass({
493
return (
494
<form className="commentForm" onSubmit={this.handleSubmit}>
495
<input type="text" placeholder="Your name" ref="author" />
494
- <input
495
- type="text"
496
- placeholder="Say something..."
497
- ref="text"
498
- />
496
+ <input type="text" placeholder="Say something..." ref="text" />
497
<input type="submit" value="Post" />
498
</form>
499
);
@@ -549,9 +547,7 @@ var CommentBox = React.createClass({
547
<div className="commentBox">
548
<h1>Comments</h1>
549
<CommentList data={this.state.data} />
552
- <CommentForm
553
- onCommentSubmit={this.handleCommentSubmit}
554
- />
550
+ <CommentForm onCommentSubmit={this.handleCommentSubmit} />
551
</div>
552
);
553
}
@@ -575,11 +571,7 @@ var CommentForm = React.createClass({
571
return (
572
<form className="commentForm" onSubmit={this.handleSubmit}>
573
<input type="text" placeholder="Your name" ref="author" />
578
- <input
579
- type="text"
580
- placeholder="Say something..."
581
- ref="text"
582
- />
574
+ <input type="text" placeholder="Say something..." ref="text" />
575
<input type="submit" value="Post" />
576
</form>
577
);
@@ -630,9 +622,7 @@ var CommentBox = React.createClass({
622
<div className="commentBox">
623
<h1>Comments</h1>
624
<CommentList data={this.state.data} />
633
- <CommentForm
634
- onCommentSubmit={this.handleCommentSubmit}
635
- />
625
+ <CommentForm onCommentSubmit={this.handleCommentSubmit} />
626
</div>
627
);
628
}
@@ -661,18 +651,22 @@ var CommentBox = React.createClass({
651
handleCommentSubmit: function(comment) {
652
var comments = this.state.data;
653
var newComments = comments.concat([comment]);
664
- this.setState({data: newComments});
665
- $.ajax({
666
- url: this.props.url,
667
- dataType: 'json',
668
- type: 'POST',
669
- data: comment,
670
- success: function(data) {
671
- this.setState({data: data});
672
- }.bind(this),
673
- error: function(xhr, status, err) {
674
- console.error(this.props.url, status, err.toString());
675
- }.bind(this)
654
+ this.setState({data: newComments}, function() {
655
+ // `setState` accepts a callback. To avoid (improbable) race condition,
656
+ // `we'll send the ajax request right after we optimistically set the new
657
+ // `state.
658
+ $.ajax({
659
+ url: this.props.url,
660
+ dataType: 'json',
661
+ type: 'POST',
662
+ data: comment,
663
+ success: function(data) {
664
+ this.setState({data: data});
665
+ }.bind(this),
666
+ error: function(xhr, status, err) {
667
+ console.error(this.props.url, status, err.toString());
668
+ }.bind(this)
669
+ });
670
});
671
},
672
getInitialState: function() {
@@ -687,9 +681,7 @@ var CommentBox = React.createClass({
681
<div className="commentBox">
682
<h1>Comments</h1>
683
<CommentList data={this.state.data} />
690
- <CommentForm
691
- onCommentSubmit={this.handleCommentSubmit}
692
- />
684
+ <CommentForm onCommentSubmit={this.handleCommentSubmit} />
685
</div>
686
);
687
}