Update tutorial.md
Preston Parry committed
Jan 27, 2015 at 20:27 UTC
5776dc791855d561e99955c62645aed854c09eb0
1 file changed
+18
-18
docs/docs/tutorial.md
+18
-18
@@ -166,47 +166,47 @@ var CommentBox = React.createClass({
166
167
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.
168
169
-### Component Properties
169
+### Using props
170
171
-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`:
171
+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:
172
173
-```javascript{6-7}
173
+```javascript
174
// tutorial4.js
175
-var CommentList = React.createClass({
175
+var Comment = React.createClass({
176
render: function() {
177
return (
178
- <div className="commentList">
179
- <Comment author="Pete Hunt">This is one comment</Comment>
180
- <Comment author="Jordan Walke">This is *another* comment</Comment>
178
+ <div className="comment">
179
+ <h2 className="commentAuthor">
180
+ {this.props.author}
181
+ </h2>
182
+ {this.props.children}
183
</div>
184
);
185
}
186
});
187
```
188
187
-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.
189
+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`.
190
189
-### Using props
191
+### Component Properties
192
191
-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:
193
+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`:
194
193
-```javascript
195
+```javascript{6-7}
196
// tutorial5.js
195
-var Comment = React.createClass({
197
+var CommentList = React.createClass({
198
render: function() {
199
return (
198
- <div className="comment">
199
- <h2 className="commentAuthor">
200
- {this.props.author}
201
- </h2>
202
- {this.props.children}
200
+ <div className="commentList">
201
+ <Comment author="Pete Hunt">This is one comment</Comment>
202
+ <Comment author="Jordan Walke">This is *another* comment</Comment>
203
</div>
204
);
205
}
206
});
207
```
208
209
-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`.
209
+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.
210
211
### Adding Markdown
212