@samitouri / QOS-React-2 / commits / 0903120ad1

Update tutorial.md

Preston Parry committed Feb 5, 2015 at 22:57 UTC 0903120ad1f5e95d2b3a5c11a6f4f963e726147c

1 file changed +3 -3

docs/docs/tutorial.md

+3 -3

@@ -168,7 +168,7 @@ Notice how we're mixing HTML tags and components we've built. HTML components ar

168

169 ### Using props

170

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:

171 +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:

172

173 ```javascript

174 // tutorial4.js

@@ -190,7 +190,7 @@ By surrounding a JavaScript expression in braces inside JSX (as either an attrib

190

191 ### Component Properties

192

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`:

193 +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`:

194

195 ```javascript{6-7}

196 // tutorial5.js

@@ -206,7 +206,7 @@ var CommentList = React.createClass({

206 });

207 ```

208

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.

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`. As noted above, the `Comment` component will access these 'properties' through `this.props.author`, and `this.props.children`.

210

211 ### Adding Markdown

212