Skip to content

Instantly share code, notes, and snippets.

@marocchino
Created February 16, 2015 11:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marocchino/40f9192942c8d3575f94 to your computer and use it in GitHub Desktop.
Save marocchino/40f9192942c8d3575f94 to your computer and use it in GitHub Desktop.
diff --git a/docs/docs/tutorial.md b/docs/docs/tutorial.md
index 3b4d8b2..64470ee 100644
--- a/docs/docs/tutorial.md
+++ b/docs/docs/tutorial.md
@@ -5,7 +5,7 @@ prev: getting-started.html
next: thinking-in-react.html
---
-We'll be building a simple but realistic comments box that you can drop into a blog, a basic version of the realtime comments offered by Disqus, LiveFyre or Facebook comments.
+We'll be building a simple, but realistic comments box that you can drop into a blog, a basic version of the realtime comments offered by Disqus, LiveFyre or Facebook comments.
We'll provide:
@@ -166,47 +166,47 @@ var CommentBox = React.createClass({
Notice how we're mixing HTML tags and components we've built. HTML components are regular React components, just like the ones you define, with one difference. The JSX compiler will automatically rewrite HTML tags to `React.createElement(tagName)` expressions and leave everything else alone. This is to prevent the pollution of the global namespace.
-### Using props
+### Component Properties
-Let's create the `Comment` component, which will depend on data passed in from it's parent. Data passed in from a parent component is available as a 'property' on the child component. These 'properties' are accessed through `this.props`. Using props we will be able to read the data passed to the `Comment` from the `CommentList`, and render some markup:
+Let's create our third component, `Comment`. We will want to pass it the author name and comment text so we can reuse the same code for each unique comment. First let's add some comments to the `CommentList`:
-```javascript
+```javascript{6-7}
// tutorial4.js
-var Comment = React.createClass({
+var CommentList = React.createClass({
render: function() {
return (
- <div className="comment">
- <h2 className="commentAuthor">
- {this.props.author}
- </h2>
- {this.props.children}
+ <div className="commentList">
+ <Comment author="Pete Hunt">This is one comment</Comment>
+ <Comment author="Jordan Walke">This is *another* comment</Comment>
</div>
);
}
});
```
-By surrounding a JavaScript expression in braces inside JSX (as either an attribute or child), you can drop text or React components into the tree. We access named attributes passed to the component as keys on `this.props` and any nested elements as `this.props.children`.
+Note that we have passed some data from the parent `CommentList` component to the child `Comment` components. For example, we passed *Pete Hunt* (via an attribute) and *This is one comment* (via an XML-like child node) to the first `Comment`. Data passed from parent to children components is called **props**, short for properties.
-### Component Properties
+### Using props
-Now that we have defined the `Comment` component, we will want to pass it the author name and comment text. This allows us to reuse the same code for each unique comment. Now let's add some comments within our `CommentList`:
+Let's create the Comment component. Using **props** we will be able to read the data passed to it from the `CommentList`, and render some markup:
-```javascript{6-7}
+```javascript
// tutorial5.js
-var CommentList = React.createClass({
+var Comment = React.createClass({
render: function() {
return (
- <div className="commentList">
- <Comment author="Pete Hunt">This is one comment</Comment>
- <Comment author="Jordan Walke">This is *another* comment</Comment>
+ <div className="comment">
+ <h2 className="commentAuthor">
+ {this.props.author}
+ </h2>
+ {this.props.children}
</div>
);
}
});
```
-Note that we have passed some data from the parent `CommentList` component to the child `Comment` components. For example, we passed *Pete Hunt* (via an attribute) and *This is one comment* (via an XML-like child node) to the first `Comment`. As noted above, the `Comment` component will access these 'properties' through `this.props.author`, and `this.props.children`.
+By surrounding a JavaScript expression in braces inside JSX (as either an attribute or child), you can drop text or React components into the tree. We access named attributes passed to the component as keys on `this.props` and any nested elements as `this.props.children`.
### Adding Markdown
@@ -385,7 +385,7 @@ When the component is first created, we want to GET some JSON from the server an
We'll use jQuery to help make an asynchronous request to the server.
-Note: because this is becoming an AJAX application you'll need to develop your app using a web server rather than as a file sitting on your file system. [As mentioned above](#running-a-server), we have provided several servers you can use [on GitHub](https://github.com/reactjs/react-tutorial/). They provide the functionality you need for the rest of this tutorial.
+Note: because this is becoming an AJAX application you'll need to develop your app using a web server rather than as a file sitting on your file system. [As mentioned above](#running-a-server), we have provided serveral servers you can use [on GitHub](https://github.com/reactjs/react-tutorial/). They provide the functionality you need for the rest of this tutorial.
```javascript{6-17}
// tutorial13.js
@@ -482,7 +482,7 @@ var CommentForm = React.createClass({
Let's make the form interactive. When the user submits the form, we should clear it, submit a request to the server, and refresh the list of comments. To start, let's listen for the form's submit event and clear it.
-```javascript{3-13,16-19}
+```javascript{3-14,17-20}
// tutorial16.js
var CommentForm = React.createClass({
handleSubmit: function(e) {
@@ -495,6 +495,7 @@ var CommentForm = React.createClass({
// TODO: send request to the server
this.refs.author.getDOMNode().value = '';
this.refs.text.getDOMNode().value = '';
+ return;
},
render: function() {
return (
@@ -576,6 +577,7 @@ var CommentForm = React.createClass({
this.props.onCommentSubmit({author: author, text: text});
this.refs.author.getDOMNode().value = '';
this.refs.text.getDOMNode().value = '';
+ return;
},
render: function() {
return (
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment