amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-24 04:33:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Cheng Lou
2014-06-29 21:39:38 -07:00
parent 1cd3c3e7e9
commit 1c50b1dfbb
1 changed files with 29 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
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?
[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>
);
}