lukechilds
/
react.dev
mirror of https://github.com/lukechilds/react.dev.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

main
Cheng Lou 11 years ago
parent
1cd3c3e7e9
commit
1c50b1dfbb
1 changed files with 29 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 42
      docs/tutorial.md

42
docs/tutorial.md
View File

@ -22,7 +22,7 @@ It'll also have a few neat features:
### Want to skip all this and just see the source? ### 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 ### Getting started
@ -40,9 +40,7 @@ For this tutorial we'll use prebuilt JavaScript files on a CDN. Open up your fav
<body> <body>
<div id="content"></div> <div id="content"></div>
<script type="text/jsx"> <script type="text/jsx">
/** /** @jsx React.DOM */
* @jsx React.DOM
*/
// The above declaration must remain intact at the top of the script. // The above declaration must remain intact at the top of the script.
// Your code here // Your code here
</script> </script>
@ -308,7 +306,11 @@ Now that the data is available in the `CommentList`, let's render the comments d
var CommentList = React.createClass({ var CommentList = React.createClass({
render: function() { render: function() {
var commentNodes = this.props.data.map(function (comment) { 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 ( return (
<div className="commentList"> <div className="commentList">
@ -491,11 +493,7 @@ var CommentForm = React.createClass({
return ( return (
<form className="commentForm" onSubmit={this.handleSubmit}> <form className="commentForm" onSubmit={this.handleSubmit}>
<input type="text" placeholder="Your name" ref="author" /> <input type="text" placeholder="Your name" ref="author" />
<input <input type="text" placeholder="Say something..." ref="text" />
type="text"
placeholder="Say something..."
ref="text"
/>
<input type="submit" value="Post" /> <input type="submit" value="Post" />
</form> </form>
); );
@ -549,9 +547,7 @@ var CommentBox = React.createClass({
<div className="commentBox"> <div className="commentBox">
<h1>Comments</h1> <h1>Comments</h1>
<CommentList data={this.state.data} /> <CommentList data={this.state.data} />
<CommentForm <CommentForm onCommentSubmit={this.handleCommentSubmit} />
onCommentSubmit={this.handleCommentSubmit}
/>
</div> </div>
); );
} }
@ -575,11 +571,7 @@ var CommentForm = React.createClass({
return ( return (
<form className="commentForm" onSubmit={this.handleSubmit}> <form className="commentForm" onSubmit={this.handleSubmit}>
<input type="text" placeholder="Your name" ref="author" /> <input type="text" placeholder="Your name" ref="author" />
<input <input type="text" placeholder="Say something..." ref="text" />
type="text"
placeholder="Say something..."
ref="text"
/>
<input type="submit" value="Post" /> <input type="submit" value="Post" />
</form> </form>
); );
@ -630,9 +622,7 @@ var CommentBox = React.createClass({
<div className="commentBox"> <div className="commentBox">
<h1>Comments</h1> <h1>Comments</h1>
<CommentList data={this.state.data} /> <CommentList data={this.state.data} />
<CommentForm <CommentForm onCommentSubmit={this.handleCommentSubmit} />
onCommentSubmit={this.handleCommentSubmit}
/>
</div> </div>
); );
} }
@ -661,7 +651,10 @@ var CommentBox = React.createClass({
handleCommentSubmit: function(comment) { handleCommentSubmit: function(comment) {
var comments = this.state.data; var comments = this.state.data;
var newComments = comments.concat([comment]); var newComments = comments.concat([comment]);
this.setState({data: newComments}); 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({ $.ajax({
url: this.props.url, url: this.props.url,
dataType: 'json', dataType: 'json',
@ -674,6 +667,7 @@ var CommentBox = React.createClass({
console.error(this.props.url, status, err.toString()); console.error(this.props.url, status, err.toString());
}.bind(this) }.bind(this)
}); });
});
}, },
getInitialState: function() { getInitialState: function() {
return {data: []}; return {data: []};
@ -687,9 +681,7 @@ var CommentBox = React.createClass({
<div className="commentBox"> <div className="commentBox">
<h1>Comments</h1> <h1>Comments</h1>
<CommentList data={this.state.data} /> <CommentList data={this.state.data} />
<CommentForm <CommentForm onCommentSubmit={this.handleCommentSubmit} />
onCommentSubmit={this.handleCommentSubmit}
/>
</div> </div>
); );
} }

Write Preview
Loading…
Cancel
Save