modify some wording
Cheng Lou committed
Oct 6, 2013 at 03:13 UTC
fb5f69f44eb6676e9b34f0c62244ad3dc11a3fc5
14 files changed
+24
-24
docs/cookbook/cb-03-if-else-in-JSX tip.md
+1
-2
@@ -23,8 +23,7 @@ What you're searching for is ternary expression:
23
```js
24
/** @jsx React.DOM */
25
26
-// this
26
React.renderComponent(<div id={true ? 'msg' : ''}>Hello World!</div>, mountNode);
27
```
28
30
-Try the [JSX compiler](http://facebook.github.io/react/jsx-compiler.html) to see how this works. It's a very simple transformation, thus making JSX entirely optional to use with React.
29
+Try the [JSX compiler](http://facebook.github.io/react/jsx-compiler.html).
docs/cookbook/cb-03-if-else-in-JSX.md
+2
-3
@@ -6,7 +6,7 @@ permalink: if-else-in-JSX.html
6
---
7
8
### Problem
9
-You want to use conditional in JSX.
9
+You want to use conditionals in JSX.
10
11
### Solution
12
Don't forget that JSX is really just sugar for functions:
@@ -27,9 +27,8 @@ What you're searching for is ternary expression:
27
```js
28
/** @jsx React.DOM */
29
30
-// this
30
React.renderComponent(<div id={true ? 'msg' : ''}>Hello World!</div>, mountNode);
31
```
32
33
### Discussion
35
-Try the [JSX compiler](http://facebook.github.io/react/jsx-compiler.html) to see how this works. It's a very simple transformation, thus making JSX entirely optional to use with React.
34
+Try the [JSX compiler](http://facebook.github.io/react/jsx-compiler.html).
docs/cookbook/cb-04-self-closing-tag tip.md
+1
-1
@@ -7,4 +7,4 @@ permalink: self-closing-tag-tip.html
7
8
In JSX, `<MyComponent />` alone is valid while `<MyComponent>` isn't.
9
10
-Related: every React component can be self-closing where it makes sense: `<div/>`.
10
+Related: every React component can be self-closing: `<div/>`.
docs/cookbook/cb-04-self-closing-tag.md
+1
-1
@@ -12,4 +12,4 @@ You're getting a parsing error (unexpected token) from JSX.
12
One of the reasons might be that you didn't put a `/` for your self-closing tags. `<MyComponent />` is valid while `<MyComponent>` isn't.
13
14
### Discussion
15
-Every React component can be self-closing where it makes sense: `<div/>`.
15
+In fact, every React component can be self-closing: `<div/>`.
docs/cookbook/cb-05-jsx-root-node-count tip.md
+2
-2
@@ -5,6 +5,6 @@ layout: docs
5
permalink: jsx-root-node-count-tip.html
6
---
7
8
-Currently in `render`, you can only return one node; if you have, say, a list of `div`s to return, you must wrap your components within, say, one big `div` or `span` (or any other component).
8
+Currently, in a component's `render`, you can only return one node; if you have, say, a list of `div`s to return, you must wrap your components within a `div`, `span` or any other component.
9
10
-Don't forget that JSX compiles into regular js, and returning two functions doesn't really make syntactic sense.
10
+Don't forget that JSX compiles into regular js; returning two functions doesn't really make syntactic sense.
docs/cookbook/cb-05-jsx-root-node-count.md
+2
-2
@@ -9,7 +9,7 @@ permalink: jsx-root-node-count.html
9
You're getting a parsing error from JSX.
10
11
### Solution
12
-You might have tried to return more than one node from JSX in `render`. Currently, you can only return one node; meaning that you must wrap your components within, say, a `div` or a `span` (or any other component).
12
+You might have tried to return more than one node in your component's `render`. Currently, you can only return one node, meaning that you must wrap your components within, say, a `div` or a `span` (or any other component).
13
14
### Discussion
15
-Don't forget that JSX compiles into regular js, and returning two functions doesn't really make syntactic sense.
15
+Don't forget that JSX compiles into regular js; returning two functions doesn't really make syntactic sense.
docs/cookbook/cb-06-style-prop-value-px tip.md
+2
-2
@@ -5,7 +5,7 @@ layout: docs
5
permalink: style-prop-value-px-tip.html
6
---
7
8
-When specifying a pixel value for your inline `style` prop, React actually automatically appends the string "px" for you after your number, so this works:
8
+When specifying a pixel value for your inline `style` prop, React automatically appends the string "px" for you after your number value, so this works:
9
10
```js
11
/** @jsx React.DOM */
@@ -14,7 +14,7 @@ var divStyle = {height: 10}; // rendered as "height:10px"
14
React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
15
```
16
17
-See [Inline Styles](inline-styles-tip.html) in React for more info.
17
+See [Inline Styles](inline-styles-tip.html) for more info.
18
19
Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix:
20
docs/cookbook/cb-06-style-prop-value-px.md
+2
-2
@@ -9,7 +9,7 @@ permalink: style-prop-value-px.html
9
It's tedious to specify an inline `style` value by appending your number value with the string "px" each time.
10
11
### Solution
12
-React actually automatically appends the string "px" for you after your number, so this works:
12
+React automatically appends the string "px" for you after your number, so this works:
13
14
```js
15
/** @jsx React.DOM */
@@ -19,7 +19,7 @@ React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
19
```
20
21
### Discussion
22
-See [Inline Styles](inline-styles.html) in React for more info.
22
+See [Inline Styles](inline-styles.html) for more info.
23
24
Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix:
25
docs/cookbook/cb-07-children-prop-type tip.md
+2
-2
@@ -5,6 +5,6 @@ layout: docs
5
permalink: children-prop-type-tip.html
6
---
7
8
-Usually, when manipulating a component's children through `this.props.children`, an array is expected. To save an extra array allocation, when `children` only contains one single component, it returns the component itself, without the array wrapper.
8
+Usually, a component's `this.props.children` is an array of components. To save an extra array allocation, it returns the component itself when there's only one.
9
10
-This means accessing, for example, `this.props.children.length` might be misleading since it could be the length property of a single string component.
10
+This means accessing, for example, `this.props.children.length` might be misleading, as it could either be the `length` property of the array of children, or that of a single string component.
docs/cookbook/cb-07-children-prop-type.md
+2
-2
@@ -9,6 +9,6 @@ permalink: children-prop-type.html
9
You get errors while manipulating `this.props.children` inside a component.
10
11
### Solution
12
-Usually, `children` is an array of components. To save an extra array allocation, when it only contains one single component, it returns the component itself.
12
+Usually, `children` is an array of components. To save an extra array allocation, it returns the component itself when there's only one.
13
14
-This means accessing, for example, `this.props.children.length` might be misleading since it could be the length property of a single string component.
14
+This means accessing, for example, `this.props.children.length` might be misleading, as it could either be the `length` property of the array of children, or that of a single string component.
docs/cookbook/cb-08-controlled-input-null-value tip.md
+4
-2
@@ -5,9 +5,11 @@ layout: docs
5
permalink: controlled-input-null-value-tip.html
6
---
7
8
-With a controlled input component, specifying a `value` prevents the user from changing the input unless you desire so (more info [here](forms.html)).
8
+Specifying the `value` prop on a [controlled component](forms.html) prevents the user from changing the input unless you desire so.
9
10
-You might have run into a problem where you specified a `value` but the input can still be changed. In this case, you might have accidentally set your `value` to `undefined` or `null`. The snippet below shows this phenomenon; after a second, the text can be edited.
10
+You might have run into a problem where `value` is specified, but the input can still be changed without consent. In this case, you might have accidentally set `value` to `undefined` or `null`.
11
+
12
+The snippet below shows this phenomenon; after a second, the text becomes editable.
13
14
```js
15
/** @jsx React.DOM */
docs/cookbook/cb-08-controlled-input-null-value.md
+1
-1
@@ -9,7 +9,7 @@ permalink: controlled-input-null-value.html
9
You specified a `value` parameter for your form input, but the input value can still be modified, contrary to [what you'd expect](forms.html).
10
11
### Solution
12
-You might have accidentally set your `value` to `undefined` or `null`. The snippet below shows this phenomenon; after a second, the text can be edited.
12
+You might have accidentally set `value` to `undefined` or `null`. The snippet below shows this phenomenon; after a second, the text becomes editable.
13
14
```js
15
/** @jsx React.DOM */
docs/cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting-tip.md
+1
-1
@@ -7,4 +7,4 @@ permalink: componentWillReceiveProps-not-triggered-after-mounting-tip.html
7
8
`componentWillReceiveProps` isn't triggered after the node is put on scene. This is by design. Check out [other lifecycle methods](component-specs.html) for the one that suits your needs.
9
10
-The reason for that is because `componentWillReceiveProps` often handles the logic of comparing with the old props and act upon changes; not triggering it at mounting, where there are no old props, clearly defines what the method should do.
10
+The reason for that is because `componentWillReceiveProps` often handles the logic of comparing with the old props and acting upon changes; not triggering it at mounting (where there are no old props) helps in defining what the method does.
docs/cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting.md
+1
-1
@@ -12,4 +12,4 @@ permalink: componentWillReceiveProps-not-triggered-after-mounting.html
12
This is by design. Check out [other lifecycle methods](component-specs.html) for the one that suits your needs.
13
14
### Discussion
15
-`componentWillReceiveProps` often handles the logic of comparing with the old props and act upon changes; not triggering it at mounting, where there are no old props, clearly defines what the method should do.
15
+`componentWillReceiveProps` often handles the logic of comparing with the old props and acting upon changes; not triggering it at mounting (where there are no old props) helps in defining what the method does.