From 302fd73793fbe3763cbc551d014c9af633c39d3e Mon Sep 17 00:00:00 2001 From: Preston Parry Date: Tue, 27 Jan 2015 20:27:16 -0800 Subject: [PATCH 1/2] Update tutorial.md --- docs/tutorial.md | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/docs/tutorial.md b/docs/tutorial.md index 64470ee0..94fae41c 100644 --- a/docs/tutorial.md +++ b/docs/tutorial.md @@ -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. -### Component Properties +### Using props -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`: +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 // tutorial4.js -var CommentList = React.createClass({ +var Comment = React.createClass({ render: function() { return ( -
- This is one comment - This is *another* comment +
+

+ {this.props.author} +

+ {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. +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`. -### Using props +### Component Properties -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: +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} // tutorial5.js -var Comment = React.createClass({ +var CommentList = React.createClass({ render: function() { return ( -
-

- {this.props.author} -

- {this.props.children} +
+ This is one comment + This is *another* comment
); } }); ``` -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. ### Adding Markdown From 809c13e552e476c5066c1e657719bdac5f95a2d3 Mon Sep 17 00:00:00 2001 From: Preston Parry Date: Thu, 5 Feb 2015 22:57:36 -0800 Subject: [PATCH 2/2] Update tutorial.md --- docs/tutorial.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/tutorial.md b/docs/tutorial.md index 94fae41c..99429a3e 100644 --- a/docs/tutorial.md +++ b/docs/tutorial.md @@ -168,7 +168,7 @@ Notice how we're mixing HTML tags and components we've built. HTML components ar ### Using props -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: +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: ```javascript // tutorial4.js @@ -190,7 +190,7 @@ By surrounding a JavaScript expression in braces inside JSX (as either an attrib ### Component Properties -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`: +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`: ```javascript{6-7} // tutorial5.js @@ -206,7 +206,7 @@ var CommentList = React.createClass({ }); ``` -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. +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`. ### Adding Markdown