From db16d570a0bb7db0ffd0b9aaf46b05cc86e0d8c8 Mon Sep 17 00:00:00 2001 From: Cheng Lou Date: Sun, 6 Oct 2013 03:13:17 -0400 Subject: [PATCH] modify some wording --- cookbook/cb-03-if-else-in-JSX tip.md | 3 +-- cookbook/cb-03-if-else-in-JSX.md | 5 ++--- cookbook/cb-04-self-closing-tag tip.md | 2 +- cookbook/cb-04-self-closing-tag.md | 2 +- cookbook/cb-05-jsx-root-node-count tip.md | 4 ++-- cookbook/cb-05-jsx-root-node-count.md | 4 ++-- cookbook/cb-06-style-prop-value-px tip.md | 4 ++-- cookbook/cb-06-style-prop-value-px.md | 4 ++-- cookbook/cb-07-children-prop-type tip.md | 4 ++-- cookbook/cb-07-children-prop-type.md | 4 ++-- cookbook/cb-08-controlled-input-null-value tip.md | 6 ++++-- cookbook/cb-08-controlled-input-null-value.md | 2 +- ...nentWillReceiveProps-not-triggered-after-mounting-tip.md | 2 +- ...omponentWillReceiveProps-not-triggered-after-mounting.md | 2 +- 14 files changed, 24 insertions(+), 24 deletions(-) diff --git a/cookbook/cb-03-if-else-in-JSX tip.md b/cookbook/cb-03-if-else-in-JSX tip.md index 219d66c4..c29edf4e 100644 --- a/cookbook/cb-03-if-else-in-JSX tip.md +++ b/cookbook/cb-03-if-else-in-JSX tip.md @@ -23,8 +23,7 @@ What you're searching for is ternary expression: ```js /** @jsx React.DOM */ -// this React.renderComponent(
Hello World!
, mountNode); ``` -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. +Try the [JSX compiler](http://facebook.github.io/react/jsx-compiler.html). diff --git a/cookbook/cb-03-if-else-in-JSX.md b/cookbook/cb-03-if-else-in-JSX.md index f0146f31..b1512a64 100644 --- a/cookbook/cb-03-if-else-in-JSX.md +++ b/cookbook/cb-03-if-else-in-JSX.md @@ -6,7 +6,7 @@ permalink: if-else-in-JSX.html --- ### Problem -You want to use conditional in JSX. +You want to use conditionals in JSX. ### Solution Don't forget that JSX is really just sugar for functions: @@ -27,9 +27,8 @@ What you're searching for is ternary expression: ```js /** @jsx React.DOM */ -// this React.renderComponent(
Hello World!
, mountNode); ``` ### Discussion -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. +Try the [JSX compiler](http://facebook.github.io/react/jsx-compiler.html). diff --git a/cookbook/cb-04-self-closing-tag tip.md b/cookbook/cb-04-self-closing-tag tip.md index 0a0a7b54..3f321312 100644 --- a/cookbook/cb-04-self-closing-tag tip.md +++ b/cookbook/cb-04-self-closing-tag tip.md @@ -7,4 +7,4 @@ permalink: self-closing-tag-tip.html In JSX, `` alone is valid while `` isn't. -Related: every React component can be self-closing where it makes sense: `
`. +Related: every React component can be self-closing: `
`. diff --git a/cookbook/cb-04-self-closing-tag.md b/cookbook/cb-04-self-closing-tag.md index 810a2572..2accb951 100644 --- a/cookbook/cb-04-self-closing-tag.md +++ b/cookbook/cb-04-self-closing-tag.md @@ -12,4 +12,4 @@ You're getting a parsing error (unexpected token) from JSX. One of the reasons might be that you didn't put a `/` for your self-closing tags. `` is valid while `` isn't. ### Discussion -Every React component can be self-closing where it makes sense: `
`. +In fact, every React component can be self-closing: `
`. diff --git a/cookbook/cb-05-jsx-root-node-count tip.md b/cookbook/cb-05-jsx-root-node-count tip.md index 44e351d4..cb46ec7d 100644 --- a/cookbook/cb-05-jsx-root-node-count tip.md +++ b/cookbook/cb-05-jsx-root-node-count tip.md @@ -5,6 +5,6 @@ layout: docs permalink: jsx-root-node-count-tip.html --- -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). +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. -Don't forget that JSX compiles into regular js, and returning two functions doesn't really make syntactic sense. +Don't forget that JSX compiles into regular js; returning two functions doesn't really make syntactic sense. diff --git a/cookbook/cb-05-jsx-root-node-count.md b/cookbook/cb-05-jsx-root-node-count.md index d74b02cd..ab319221 100644 --- a/cookbook/cb-05-jsx-root-node-count.md +++ b/cookbook/cb-05-jsx-root-node-count.md @@ -9,7 +9,7 @@ permalink: jsx-root-node-count.html You're getting a parsing error from JSX. ### Solution -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). +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). ### Discussion -Don't forget that JSX compiles into regular js, and returning two functions doesn't really make syntactic sense. +Don't forget that JSX compiles into regular js; returning two functions doesn't really make syntactic sense. diff --git a/cookbook/cb-06-style-prop-value-px tip.md b/cookbook/cb-06-style-prop-value-px tip.md index 9f346cad..a70f1c6f 100644 --- a/cookbook/cb-06-style-prop-value-px tip.md +++ b/cookbook/cb-06-style-prop-value-px tip.md @@ -5,7 +5,7 @@ layout: docs permalink: style-prop-value-px-tip.html --- -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: +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: ```js /** @jsx React.DOM */ @@ -14,7 +14,7 @@ var divStyle = {height: 10}; // rendered as "height:10px" React.renderComponent(
Hello World!
, mountNode); ``` -See [Inline Styles](inline-styles-tip.html) in React for more info. +See [Inline Styles](inline-styles-tip.html) for more info. Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix: diff --git a/cookbook/cb-06-style-prop-value-px.md b/cookbook/cb-06-style-prop-value-px.md index 2847d4f0..fe5bc9b8 100644 --- a/cookbook/cb-06-style-prop-value-px.md +++ b/cookbook/cb-06-style-prop-value-px.md @@ -9,7 +9,7 @@ permalink: style-prop-value-px.html It's tedious to specify an inline `style` value by appending your number value with the string "px" each time. ### Solution -React actually automatically appends the string "px" for you after your number, so this works: +React automatically appends the string "px" for you after your number, so this works: ```js /** @jsx React.DOM */ @@ -19,7 +19,7 @@ React.renderComponent(
Hello World!
, mountNode); ``` ### Discussion -See [Inline Styles](inline-styles.html) in React for more info. +See [Inline Styles](inline-styles.html) for more info. Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix: diff --git a/cookbook/cb-07-children-prop-type tip.md b/cookbook/cb-07-children-prop-type tip.md index 0c9e85c0..107322ab 100644 --- a/cookbook/cb-07-children-prop-type tip.md +++ b/cookbook/cb-07-children-prop-type tip.md @@ -5,6 +5,6 @@ layout: docs permalink: children-prop-type-tip.html --- -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. +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. -This means accessing, for example, `this.props.children.length` might be misleading since it could be the length property of a single string component. +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. diff --git a/cookbook/cb-07-children-prop-type.md b/cookbook/cb-07-children-prop-type.md index 8c051f2e..7097f25c 100644 --- a/cookbook/cb-07-children-prop-type.md +++ b/cookbook/cb-07-children-prop-type.md @@ -9,6 +9,6 @@ permalink: children-prop-type.html You get errors while manipulating `this.props.children` inside a component. ### Solution -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. +Usually, `children` is an array of components. To save an extra array allocation, it returns the component itself when there's only one. -This means accessing, for example, `this.props.children.length` might be misleading since it could be the length property of a single string component. +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. diff --git a/cookbook/cb-08-controlled-input-null-value tip.md b/cookbook/cb-08-controlled-input-null-value tip.md index 83b252b1..096b35d0 100644 --- a/cookbook/cb-08-controlled-input-null-value tip.md +++ b/cookbook/cb-08-controlled-input-null-value tip.md @@ -5,9 +5,11 @@ layout: docs permalink: controlled-input-null-value-tip.html --- -With a controlled input component, specifying a `value` prevents the user from changing the input unless you desire so (more info [here](forms.html)). +Specifying the `value` prop on a [controlled component](forms.html) prevents the user from changing the input unless you desire so. -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. +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`. + +The snippet below shows this phenomenon; after a second, the text becomes editable. ```js /** @jsx React.DOM */ diff --git a/cookbook/cb-08-controlled-input-null-value.md b/cookbook/cb-08-controlled-input-null-value.md index 0bcf11c4..b928f150 100644 --- a/cookbook/cb-08-controlled-input-null-value.md +++ b/cookbook/cb-08-controlled-input-null-value.md @@ -9,7 +9,7 @@ permalink: controlled-input-null-value.html 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). ### Solution -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. +You might have accidentally set `value` to `undefined` or `null`. The snippet below shows this phenomenon; after a second, the text becomes editable. ```js /** @jsx React.DOM */ diff --git a/cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting-tip.md b/cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting-tip.md index 283cd6fb..eb58a304 100644 --- a/cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting-tip.md +++ b/cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting-tip.md @@ -7,4 +7,4 @@ permalink: componentWillReceiveProps-not-triggered-after-mounting-tip.html `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. -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. +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. diff --git a/cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting.md b/cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting.md index c9254504..d0d9f466 100644 --- a/cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting.md +++ b/cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting.md @@ -12,4 +12,4 @@ permalink: componentWillReceiveProps-not-triggered-after-mounting.html This is by design. Check out [other lifecycle methods](component-specs.html) for the one that suits your needs. ### Discussion -`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. +`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.