{"body":"Updates to tips","parents":["bd535bd51c2f24618a8a8b2990fa9f350955db3b","c8218871602eda48b7788e3d55733e581829357d"],"commit":{"revision":"26c142df825d6eeb8faa3b6eaec5da087eab81e0","authorName":"Connor McSheffrey","authoredAt":"2013-11-14T11:17:34-08:00","subject":"Merge pull request #20 from zpao\/tips","shortRevision":"26c142df82","authorEmail":"c@conr.me"},"patch":"diff --git a\/docs\/tips\/01-introduction.md b\/docs\/tips\/01-introduction.md\nindex 73e2431421..c2e86c6eae 100644\n--- a\/docs\/tips\/01-introduction.md\n+++ b\/docs\/tips\/01-introduction.md\n@@ -8,8 +8,6 @@ next: inline-styles.html\n \n The React tips section provides bite-sized information that can answer lots of questions you might have and warn you against common pitfalls.\n \n-### Contributing\n+## Contributing\n \n-Submit a pull request to the [React repo](https:\/\/github.com\/facebook\/react) following the cookbook entries' style. If you have a recipe that needs review prior to submitting a PR you can find help in the [#reactjs IRC on freenode](irc:\/\/chat.freenode.net\/reactjs) or the [reactjs Google group](http:\/\/groups.google.com\/group\/reactjs). Also, check the [Tips Wiki][1] for entries in-progress and general guidelines on writing React tips.\n-\n-[1]: https:\/\/github.com\/facebook\/react\/wiki\/Tips-(Previously-Cookbook)\n+Submit a pull request to the [React repository](https:\/\/github.com\/facebook\/react) following the [current tips](https:\/\/github.com\/facebook\/react\/tree\/master\/docs) entries' style. If you have a recipe that needs review prior to submitting a PR you can find help in the [#reactjs channel on freenode](irc:\/\/chat.freenode.net\/reactjs) or the [reactjs Google group](http:\/\/groups.google.com\/group\/reactjs). Also, check the [Tips Wiki](https:\/\/github.com\/facebook\/react\/wiki\/Tips-(Previously-Cookbook)) for entries in-progress and general guidelines on writing React tips.\ndiff --git a\/docs\/tips\/02-inline-styles.md b\/docs\/tips\/02-inline-styles.md\nindex 80e89edd4c..1f61596a54 100644\n--- a\/docs\/tips\/02-inline-styles.md\n+++ b\/docs\/tips\/02-inline-styles.md\n@@ -7,7 +7,7 @@ next: if-else-in-JSX.html\n prev: introduction.html\n ---\n \n-In React, inline styles are not specified as a string, but as an object whose key is the camelCased version of the style name, and whose value is the style's value in string:\n+In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string ([more on that later](\/react\/tips\/style-props-value-px.html)):\n \n ```js\n \/** @jsx React.DOM *\/\n@@ -21,4 +21,4 @@ var divStyle = {\n React.renderComponent(

Hello World!<\/div>, mountNode);\n ```\n \n-Style keys are camelCased in order to be consistent with accessing the properties using node.style.___ in DOM. This also explains why WebkitTransition has an uppercase \"W\".\n+Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. `node.style.backgroundImage`). Vendor prefixes should begin with a capital letter. This is why `WebkitTransition` has an uppercase \"W\".\ndiff --git a\/docs\/tips\/03-if-else-in-JSX.md b\/docs\/tips\/03-if-else-in-JSX.md\nindex 02b4a4092a..5a04c9f60e 100644\n--- a\/docs\/tips\/03-if-else-in-JSX.md\n+++ b\/docs\/tips\/03-if-else-in-JSX.md\n@@ -7,25 +7,36 @@ prev: inline-styles.html\n next: self-closing-tag.html\n ---\n \n-`if-else` statements don't work inside JSX, since JSX is really just sugar for functions:\n+`if-else` statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction. Take this basic example:\n \n ```js\n \/** @jsx React.DOM *\/\n \n-\/\/ this\n+\/\/ This JSX:\n React.renderComponent(

Hello World!<\/div>, mountNode);\n-\/\/ is the same as this\n+\n+\/\/ Is transformed to this JS:\n React.renderComponent(React.DOM.div({id:\"msg\"}, \"Hello World!\"), mountNode);\n ```\n \n-Which means `

Hello World!<\/div>` doesn't make sense, as (if it worked) it would be compiled down to something like this `React.DOM.div({id: if (true){ 'msg' }}, \"Hello World!\")`, which isn't valid JS.\n+This means that `if` statements don't fit in. Take this example:\n+\n+```js\n+\/** @jsx React.DOM *\/\n+\n+\/\/ This JSX:\n+

Hello World!<\/div>\n+\n+\/\/ Is transformed to this JS:\n+React.DOM.div({id: if (condition) { 'msg' }}, \"Hello World!\");\n+```\n \n-What you're searching for is ternary expression:\n+That's not valid JS. You probably want to make use of a ternary expression:\n \n ```js\n \/** @jsx React.DOM *\/\n \n-React.renderComponent(

Hello World!<\/div>, mountNode);\n+React.renderComponent(

Hello World!<\/div>, mountNode);\n ```\n \n-Try the [JSX compiler](\/react\/jsx-compiler.html).\n+Try using it today with the [JSX compiler](\/react\/jsx-compiler.html).\ndiff --git a\/docs\/tips\/04-self-closing-tag.md b\/docs\/tips\/04-self-closing-tag.md\nindex 77688f4e6e..7c0a72fa8e 100644\n--- a\/docs\/tips\/04-self-closing-tag.md\n+++ b\/docs\/tips\/04-self-closing-tag.md\n@@ -7,7 +7,7 @@ prev: if-else-in-JSX.html\n next: maximum-number-of-jsx-root-nodes.html\n ---\n \n-In JSX, `` alone is valid while `` isn't.\n+In JSX, `` alone is valid while `` isn't. All tags must be closed, either with the self-closing format or with a corresponding closing tag (`<\/MyComponent>`).\n \n > Note:\n >\ndiff --git a\/docs\/tips\/06-style-props-value-px.md b\/docs\/tips\/06-style-props-value-px.md\nindex 148057466b..233e29ff37 100644\n--- a\/docs\/tips\/06-style-props-value-px.md\n+++ b\/docs\/tips\/06-style-props-value-px.md\n@@ -16,14 +16,14 @@ var divStyle = {height: 10}; \/\/ rendered as \"height:10px\"\n React.renderComponent(

Hello World!<\/div>, mountNode);\n ```\n \n-See [Inline Styles](\/react\/docs\/tips\/inline-styles-tip.html) for more info.\n+See [Inline Styles](\/react\/tips\/inline-styles.html) for more info.\n \n Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic \"px\" suffix:\n \n-- fillOpacity\n-- fontWeight\n-- lineHeight\n-- opacity\n-- orphans\n-- zIndex\n-- zoom\n+- `fillOpacity`\n+- `fontWeight`\n+- `lineHeight`\n+- `opacity`\n+- `orphans`\n+- `zIndex`\n+- `zoom`\ndiff --git a\/docs\/tips\/07-children-props-type.md b\/docs\/tips\/07-children-props-type.md\nindex 675b2f7414..8c4549acd7 100644\n--- a\/docs\/tips\/07-children-props-type.md\n+++ b\/docs\/tips\/07-children-props-type.md\n@@ -7,7 +7,7 @@ prev: style-props-value-px.html\n next: controlled-input-null-value.html\n ---\n \n-Usually, a component's `this.props.children` is an array of components:\n+Usually, a component's children (`this.props.children`) is an array of components:\n \n ```js\n \/** @jsx React.DOM *\/\n@@ -22,21 +22,23 @@ var GenericWrapper = React.createClass({\n });\n \n React.renderComponent(\n- <\/GenericWrapper>, \n+ <\/GenericWrapper>,\n mountNode\n );\n ```\n \n-To save an extra array allocation, it returns the component itself _without the array wrapper_ when there's only one child.\n+However, when there is only a single child, `this.props.children` will be the single child component itself _without the array wrapper_. This saves an array allocation.\n \n ```js\n \/** @jsx React.DOM *\/\n \n var GenericWrapper = React.createClass({\n componentDidMount: function() {\n- \/\/ **warning**: yields 5 for length of the string 'hello', not 1 for the\n+ console.log(Array.isArray(this.props.children)); \/\/ => false\n+\n+ \/\/ warning: yields 5 for length of the string 'hello', not 1 for the\n \/\/ length of the non-existant array wrapper!\n- console.log(this.props.children.length); \n+ console.log(this.props.children.length);\n },\n render: function() {\n return

;\ndiff --git a\/docs\/tips\/08-controlled-input-null-value.md b\/docs\/tips\/08-controlled-input-null-value.md\nindex a3809654f1..37c8efb34c 100644\n--- a\/docs\/tips\/08-controlled-input-null-value.md\n+++ b\/docs\/tips\/08-controlled-input-null-value.md\n@@ -7,7 +7,7 @@ prev: children-props-type.html\n next: componentWillReceiveProps-not-triggered-after-mounting.html\n ---\n \n-Specifying the `value` prop on a [controlled component](\/react\/docs\/tips\/forms.html) prevents the user from changing the input unless you desire so.\n+Specifying the `value` prop on a [controlled component](\/react\/docs\/forms.html) prevents the user from changing the input unless you desire so.\n \n 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`.\n \ndiff --git a\/docs\/tips\/09-componentWillReceiveProps-not-triggered-after-mounting.md b\/docs\/tips\/09-componentWillReceiveProps-not-triggered-after-mounting.md\nindex 1a5d0b3601..b4b1cd5c1a 100644\n--- a\/docs\/tips\/09-componentWillReceiveProps-not-triggered-after-mounting.md\n+++ b\/docs\/tips\/09-componentWillReceiveProps-not-triggered-after-mounting.md\n@@ -7,6 +7,6 @@ prev: controlled-input-null-value.html\n next: props-in-getInitialState-as-anti-pattern.html\n ---\n \n-`componentWillReceiveProps` isn't triggered after the node is put on scene. This is by design. Check out [other lifecycle methods](\/react\/docs\/tips\/component-specs.html) for the one that suits your needs.\n+`componentWillReceiveProps` isn't triggered after the node is put on scene. This is by design. Check out [other lifecycle methods](\/react\/docs\/component-specs.html) for the one that suits your needs.\n \n 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.\ndiff --git a\/docs\/tips\/10-props-in-getInitialState-as-anti-pattern.md b\/docs\/tips\/10-props-in-getInitialState-as-anti-pattern.md\nindex 19f2bcd1e5..097fbc718f 100644\n--- a\/docs\/tips\/10-props-in-getInitialState-as-anti-pattern.md\n+++ b\/docs\/tips\/10-props-in-getInitialState-as-anti-pattern.md\n@@ -27,7 +27,7 @@ var MessageBox = React.createClass({\n }\n });\n \n-React.renderComponent(, mountNode);\n+React.renderComponent(, mountNode);\n ```\n \n Better:\n@@ -41,7 +41,7 @@ var MessageBox = React.createClass({\n }\n });\n \n-React.renderComponent(, mountNode);\n+React.renderComponent(, mountNode);\n ```\n \n For more complex logic:\n@@ -58,5 +58,5 @@ var MessageBox = React.createClass({\n }\n });\n \n-React.renderComponent(, mountNode);\n+React.renderComponent(, mountNode);\n ```\ndiff --git a\/docs\/tips\/11-dom-event-listeners.md b\/docs\/tips\/11-dom-event-listeners.md\nindex 305a0a4baa..46e577fff5 100644\n--- a\/docs\/tips\/11-dom-event-listeners.md\n+++ b\/docs\/tips\/11-dom-event-listeners.md\n@@ -9,7 +9,7 @@ next: initial-ajax.html\n \n > Note:\n >\n-> This entry shows how to attach DOM events not provided by React ([check here for more info](\/react\/docs\/tips\/events.html)). This is good for integrations with other libraries such as jQuery.\n+> This entry shows how to attach DOM events not provided by React ([check here for more info](\/react\/docs\/events.html)). This is good for integrations with other libraries such as jQuery.\n \n Try to resize the window:\n \n@@ -20,15 +20,19 @@ var Box = React.createClass({\n getInitialState: function() {\n return {windowWidth: window.innerWidth};\n },\n+\n handleResize: function(e) {\n this.setState({windowWidth: window.innerWidth});\n },\n+\n componentDidMount: function() {\n window.addEventListener('resize', this.handleResize);\n },\n+\n componentWillUnmount: function() {\n window.removeEventListener('resize', this.handleResize);\n },\n+\n render: function() {\n return

Current window width: {this.state.windowWidth}<\/div>;\n }\n@@ -37,4 +41,4 @@ var Box = React.createClass({\n React.renderComponent(, mountNode);\n ```\n \n-`componentDidMount` is called after the component's mounted and has a DOM representation. This is often a place where you'd attach generic DOM events.\n+`componentDidMount` is called after the component is mounted and has a DOM representation. This is often a place where you would attach generic DOM events.\ndiff --git a\/docs\/tips\/12-initial-ajax.md b\/docs\/tips\/12-initial-ajax.md\nindex a07f526f14..c608dc6acc 100644\n--- a\/docs\/tips\/12-initial-ajax.md\n+++ b\/docs\/tips\/12-initial-ajax.md\n@@ -7,7 +7,7 @@ prev: dom-event-listeners.html\n next: false-in-jsx.html\n ---\n \n-Fetch data in `componentDidMount`. When they arrive, put them inside your state then render them.\n+Fetch data in `componentDidMount`. When the response arrives, store the data in state, triggering a render to update your UI.\n \n This example fetches the desired Github user's lastest gist:\n \ndiff --git a\/docs\/tips\/13-false-in-jsx.md b\/docs\/tips\/13-false-in-jsx.md\nindex f7e4e950d3..0c86bddf55 100644\n--- a\/docs\/tips\/13-false-in-jsx.md\n+++ b\/docs\/tips\/13-false-in-jsx.md\n@@ -9,21 +9,24 @@ prev: initial-ajax.html\n Here's how `false` renders in different contexts:\n \n Renders as `id=\"false\"`:\n+\n ```js\n \/** @jsx React.DOM *\/\n React.renderComponent(

, mountNode);\n ```\n \n String \"false\" as input value:\n+\n ```js\n \/** @jsx React.DOM *\/\n React.renderComponent(, mountNode);\n ```\n \n No child:\n+\n ```js\n \/** @jsx React.DOM *\/\n React.renderComponent(

{false}<\/div>, mountNode);\n ```\n \n-The reason why this one doesn't render as the string `\"false\"` as a `div` child is to allow the more common use-case: `

{x > 1 && You have more than one item}<\/div>`.\n+The reason why this one doesn't render as the string `\"false\"` as a `div` child is to allow the more common use-case: `

{x > 1 && 'You have more than one item'}<\/div>`.\n","files":[{"path":"docs\/tips\/01-introduction.md","status":"M"},{"status":"M","path":"docs\/tips\/02-inline-styles.md"},{"status":"M","path":"docs\/tips\/03-if-else-in-JSX.md"},{"status":"M","path":"docs\/tips\/04-self-closing-tag.md"},{"status":"M","path":"docs\/tips\/06-style-props-value-px.md"},{"status":"M","path":"docs\/tips\/07-children-props-type.md"},{"status":"M","path":"docs\/tips\/08-controlled-input-null-value.md"},{"status":"M","path":"docs\/tips\/09-componentWillReceiveProps-not-triggered-after-mounting.md"},{"status":"M","path":"docs\/tips\/10-props-in-getInitialState-as-anti-pattern.md"},{"status":"M","path":"docs\/tips\/11-dom-event-listeners.md"},{"status":"M","path":"docs\/tips\/12-initial-ajax.md"},{"status":"M","path":"docs\/tips\/13-false-in-jsx.md"}]}

dillon1000/react

Files changed