diff --git a/_config.yml b/_config.yml index daddf3b3..44fbbd33 100644 --- a/_config.yml +++ b/_config.yml @@ -95,4 +95,6 @@ nav_cookbook: - id: dom-event-listeners title: DOM event listeners - id: initial-ajax - title: Initial AJAX \ No newline at end of file + title: Initial AJAX + - id: false-in-jsx + title: False In JSX \ No newline at end of file diff --git a/cookbook/01-introduction-tip.md b/cookbook/01-introduction-tip.md deleted file mode 100644 index af249dc8..00000000 --- a/cookbook/01-introduction-tip.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -id: introduction-tip -title: Cookbook Introduction -layout: cookbook -permalink: introduction-tip.html -next: inline-styles.html ---- - -The React.js cookbook provides common React tips, bite-sized information that can surprisingly answer lots of questions you might have had and warn you against common pitfalls. - -### Contributing - -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). diff --git a/cookbook/01-introduction.md b/cookbook/01-introduction.md index 312677bb..fc857605 100644 --- a/cookbook/01-introduction.md +++ b/cookbook/01-introduction.md @@ -6,8 +6,8 @@ permalink: introduction.html next: inline-styles.html --- -The React.js cookbook provides solutions for common questions asked when working with the React framework. It's written in the [cookbook format](http://shop.oreilly.com/category/series/cookbooks.do) commonly used by O'Reilly Media. See [Inline Styles](/react/cookbook/inline-styles.html) recipe as an example. +The React.js cookbook provides common React tips, bite-sized information that can surprisingly answer lots of questions you might have had and warn you against common pitfalls. ### Contributing -Submit a pull request to the [React repo](https://github.com/facebook/react) with a recipe in the cookbook format (Problem, Solution, Discussion). 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). +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). diff --git a/cookbook/02-inline-styles tip.md b/cookbook/02-inline-styles tip.md deleted file mode 100644 index 5f3f71c1..00000000 --- a/cookbook/02-inline-styles tip.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -id: inline-styles-tip -title: Inline Styles -layout: cookbook -permalink: inline-styles-tip.html -next: if-else-in-JSX.html -prev: introduction.html ---- - -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: - -```js -/** @jsx React.DOM */ - -var divStyle = { - color: 'white', - backgroundImage: 'url(' + imgUrl + ')', - WebkitTransition: 'all' // note the capital 'W' here -}; - -React.renderComponent(
Hello World!
, mountNode); -``` - -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". diff --git a/cookbook/02-inline-styles.md b/cookbook/02-inline-styles.md index 9f323330..cd332347 100644 --- a/cookbook/02-inline-styles.md +++ b/cookbook/02-inline-styles.md @@ -7,11 +7,7 @@ next: if-else-in-JSX.html prev: introduction.html --- -### Problem -You want to apply inline style to an element. - -### Solution -Instead of writing a string, create an object whose key is the camelCased version of the style name, and whose value is the style's value, in string: +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: ```js /** @jsx React.DOM */ @@ -25,5 +21,4 @@ var divStyle = { React.renderComponent(
Hello World!
, mountNode); ``` -### Discussion -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". +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". diff --git a/cookbook/03-if-else-in-JSX tip.md b/cookbook/03-if-else-in-JSX tip.md deleted file mode 100644 index 24ecfb6a..00000000 --- a/cookbook/03-if-else-in-JSX tip.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -id: if-else-in-JSX-tip -title: If-Else in JSX -layout: cookbook -permalink: if-else-in-JSX-tip.html -prev: inline-styles.html -next: self-closing-tag.html ---- - -`if-else` statements don't work inside JSX, since JSX is really just sugar for functions: - -```js -/** @jsx React.DOM */ - -// this -React.renderComponent(
Hello World!
, mountNode); -// is the same as this -React.renderComponent(React.DOM.div({id:"msg"}, "Hello World!"), mountNode); -``` - -Which means `
Hello World!
` 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. - -What you're searching for is ternary expression: - -```js -/** @jsx React.DOM */ - -React.renderComponent(
Hello World!
, mountNode); -``` - -Try the [JSX compiler](/react/jsx-compiler.html). diff --git a/cookbook/03-if-else-in-JSX.md b/cookbook/03-if-else-in-JSX.md index 089184db..a94d9ae4 100644 --- a/cookbook/03-if-else-in-JSX.md +++ b/cookbook/03-if-else-in-JSX.md @@ -7,11 +7,7 @@ prev: inline-styles.html next: self-closing-tag.html --- -### Problem -You want to use conditionals in JSX. - -### Solution -Don't forget that JSX is really just sugar for functions: +`if-else` statements don't work inside JSX, since JSX is really just sugar for functions: ```js /** @jsx React.DOM */ @@ -32,5 +28,4 @@ What you're searching for is ternary expression: React.renderComponent(
Hello World!
, mountNode); ``` -### Discussion -Try the [JSX compiler](react/jsx-compiler.html). +Try the [JSX compiler](/react/jsx-compiler.html). diff --git a/cookbook/04-self-closing-tag tip.md b/cookbook/04-self-closing-tag tip.md deleted file mode 100644 index ff47be3b..00000000 --- a/cookbook/04-self-closing-tag tip.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -id: self-closing-tag-tip -title: Self-Closing Tag -layout: cookbook -permalink: self-closing-tag-tip.html -prev: if-else-in-JSX.html -next: jsx-root-node-count.html ---- - -In JSX, `` alone is valid while `` isn't. - -Related: every React component can be self-closing: `
`. diff --git a/cookbook/04-self-closing-tag.md b/cookbook/04-self-closing-tag.md index bfb8c346..3fdba6f9 100644 --- a/cookbook/04-self-closing-tag.md +++ b/cookbook/04-self-closing-tag.md @@ -7,11 +7,6 @@ prev: if-else-in-JSX.html next: jsx-root-node-count.html --- -### Problem -You're getting a parsing error (unexpected token) from JSX. +In JSX, `` alone is valid while `` isn't. -### Solution -One of the reasons might be that you didn't put a `/` for your self-closing tags. `` is valid while `` isn't. - -### Discussion -In fact, every React component can be self-closing: `
`. +Related: every React component can be self-closing: `
`. diff --git a/cookbook/05-jsx-root-node-count tip.md b/cookbook/05-jsx-root-node-count tip.md deleted file mode 100644 index 814ae943..00000000 --- a/cookbook/05-jsx-root-node-count tip.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -id: jsx-root-node-count-tip -title: Maximum number of JSX root nodes -layout: cookbook -permalink: jsx-root-node-count-tip.html -prev: self-closing-tag.html -next: style-prop-value-px.html ---- - -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; returning two functions doesn't really make syntactic sense. Likewise, don't put more than one child in a ternary. diff --git a/cookbook/05-jsx-root-node-count.md b/cookbook/05-jsx-root-node-count.md index dd0fd8ce..10f9ab06 100644 --- a/cookbook/05-jsx-root-node-count.md +++ b/cookbook/05-jsx-root-node-count.md @@ -7,11 +7,6 @@ prev: self-closing-tag.html next: style-prop-value-px.html --- -### Problem -You're getting a parsing error from JSX. +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. -### Solution -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; returning two functions doesn't really make syntactic sense. Likewise, don't put more than one child in a ternary. diff --git a/cookbook/06-style-prop-value-px tip.md b/cookbook/06-style-prop-value-px tip.md deleted file mode 100644 index 6ef2b3ee..00000000 --- a/cookbook/06-style-prop-value-px tip.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -id: style-prop-value-px-tip -title: Shorthand for specifying pixel values in style prop -layout: cookbook -permalink: style-prop-value-px-tip.html -prev: jsx-root-node-count.html -next: children-prop-type.html ---- - -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 */ - -var divStyle = {height: 10}; // rendered as "height:10px" -React.renderComponent(
Hello World!
, mountNode); -``` - -See [Inline Styles](/react/docs/cookbook/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: - -- fillOpacity -- fontWeight -- lineHeight -- opacity -- orphans -- zIndex -- zoom diff --git a/cookbook/06-style-prop-value-px.md b/cookbook/06-style-prop-value-px.md index 5ee26917..642f33d3 100644 --- a/cookbook/06-style-prop-value-px.md +++ b/cookbook/06-style-prop-value-px.md @@ -7,11 +7,7 @@ prev: jsx-root-node-count.html next: children-prop-type.html --- -### Problem -It's tedious to specify an inline `style` value by appending your number value with the string "px" each time. - -### Solution -React 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 */ @@ -20,8 +16,7 @@ var divStyle = {height: 10}; // rendered as "height:10px" React.renderComponent(
Hello World!
, mountNode); ``` -### Discussion -See [Inline Styles](/react/docs/cookbook/inline-styles.html) for more info. +See [Inline Styles](/react/docs/cookbook/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/07-children-prop-type tip.md b/cookbook/07-children-prop-type tip.md deleted file mode 100644 index 0781d975..00000000 --- a/cookbook/07-children-prop-type tip.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -id: children-prop-type-tip -title: Type of the children prop -layout: cookbook -permalink: children-prop-type-tip.html -prev: style-prop-value-px.html -next: controlled-input-null-value.html ---- - -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, as it could either be the `length` property of the array of children, or that of a single string component. diff --git a/cookbook/07-children-prop-type.md b/cookbook/07-children-prop-type.md index 72458d62..4ce5ec74 100644 --- a/cookbook/07-children-prop-type.md +++ b/cookbook/07-children-prop-type.md @@ -7,10 +7,6 @@ prev: style-prop-value-px.html next: controlled-input-null-value.html --- -### Problem -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, it returns the component itself when there's only one. +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, as it could either be the `length` property of the array of children, or that of a single string component. diff --git a/cookbook/08-controlled-input-null-value tip.md b/cookbook/08-controlled-input-null-value tip.md deleted file mode 100644 index 2a3d55b0..00000000 --- a/cookbook/08-controlled-input-null-value tip.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -id: controlled-input-null-value-tip -title: Value of null for controlled input -layout: cookbook -permalink: controlled-input-null-value-tip.html -prev: children-prop-type.html -next: componentWillReceiveProps-not-triggered-after-mounting.html ---- - -Specifying the `value` prop on a [controlled component](/react/docs/cookbook/forms.html) prevents the user from changing the input unless you desire so. - -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 */ - -React.renderComponent(, mountNode); - -setTimeout(function() { - React.renderComponent(, mountNode); -}, 2000); -``` diff --git a/cookbook/08-controlled-input-null-value.md b/cookbook/08-controlled-input-null-value.md index fcd1ee6c..8c209208 100644 --- a/cookbook/08-controlled-input-null-value.md +++ b/cookbook/08-controlled-input-null-value.md @@ -7,11 +7,11 @@ prev: children-prop-type.html next: componentWillReceiveProps-not-triggered-after-mounting.html --- -### Problem -You specified a `value` parameter for your form input, but the input value can still be modified, contrary to [what you'd expect](/react/docs/cookbook/forms.html). +Specifying the `value` prop on a [controlled component](/react/docs/cookbook/forms.html) prevents the user from changing the input unless you desire so. -### Solution -You might have accidentally set `value` to `undefined` or `null`. The snippet below shows this phenomenon; after a second, the text becomes editable. +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/09-componentWillReceiveProps-not-triggered-after-mounting-tip.md b/cookbook/09-componentWillReceiveProps-not-triggered-after-mounting-tip.md deleted file mode 100644 index 2eb6ad0b..00000000 --- a/cookbook/09-componentWillReceiveProps-not-triggered-after-mounting-tip.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -id: componentWillReceiveProps-not-triggered-after-mounting-tip -title: componentWillReceiveProps not triggered after mounting -layout: cookbook -permalink: componentWillReceiveProps-not-triggered-after-mounting-tip.html -prev: controlled-input-null-value.html -next: props-in-getInitialSate-as-anti-pattern.html ---- - -`componentWillReceiveProps` isn't triggered after the node is put on scene. This is by design. Check out [other lifecycle methods](/react/docs/cookbook/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 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/09-componentWillReceiveProps-not-triggered-after-mounting.md b/cookbook/09-componentWillReceiveProps-not-triggered-after-mounting.md index 4c73adbf..45e22e32 100644 --- a/cookbook/09-componentWillReceiveProps-not-triggered-after-mounting.md +++ b/cookbook/09-componentWillReceiveProps-not-triggered-after-mounting.md @@ -7,11 +7,6 @@ prev: controlled-input-null-value.html next: props-in-getInitialSate-as-anti-pattern.html --- -### Problem -`componentWillReceiveProps` isn't triggered after the node is put on scene. +`componentWillReceiveProps` isn't triggered after the node is put on scene. This is by design. Check out [other lifecycle methods](/react/docs/cookbook/component-specs.html) for the one that suits your needs. -### Solution -This is by design. Check out [other lifecycle methods](/react/docs/cookbook/component-specs.html) for the one that suits your needs. - -### Discussion -`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. +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/10-props-in-getInitialSate-as-anti-pattern-tip.md b/cookbook/10-props-in-getInitialSate-as-anti-pattern-tip.md deleted file mode 100644 index 60c15934..00000000 --- a/cookbook/10-props-in-getInitialSate-as-anti-pattern-tip.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: props-in-getInitialSate-as-anti-pattern-tip -title: props in getInitialState is an anti-pattern -layout: cookbook -permalink: props-in-getInitialSate-as-anti-pattern-tip.html -prev: componentWillReceiveProps-not-triggered-after-mounting.html -next: dom-event-listeners.html ---- - -> Note: -> -> This isn't really a React-specific tip, as such anti-patterns often occur in code in general; in this case, React simply points them out more clearly. - -Using props, passed down from parent, to generate state in `getInitialState` often leads to duplication of "source of truth", i.e. where the real data is. Whenever possible, compute values on-the-fly to ensure that they don't get out of sync later on and cause maintenance trouble. - -Bad example: - -```js -/** @jsx React.DOM */ - -var MessageBox = React.createClass({ - getInitialState: function() { - return {nameWithQualifier: "Mr. " + this.props.name}; - }, - render: function() { - return
{this.state.nameWithQualifier}
; - } -}); - -React.renderComponent(, mountNode); -``` - -Better: - -```js -/** @jsx React.DOM */ - -var MessageBox = React.createClass({ - render: function() { - return
{"Mr. " + this.props.name}
; - } -}); - -React.renderComponent(, mountNode); -``` - -For more complex logic: - -```js -/** @jsx React.DOM */ - -var MessageBox = React.createClass({ - render: function() { - return
{this.getNameWithQualifier(this.props.name)}
; - }, - getNameWithQualifier: function(name) { - return 'Mr. ' + name; - } -}); - -React.renderComponent(, mountNode); -``` diff --git a/cookbook/10-props-in-getInitialSate-as-anti-pattern.md b/cookbook/10-props-in-getInitialSate-as-anti-pattern.md index 8fd1347b..ebe195e8 100644 --- a/cookbook/10-props-in-getInitialSate-as-anti-pattern.md +++ b/cookbook/10-props-in-getInitialSate-as-anti-pattern.md @@ -7,8 +7,13 @@ prev: componentWillReceiveProps-not-triggered-after-mounting.html next: dom-event-listeners.html --- -### Problem -You're using `this.props` in a component `getInitialSate`, like so: +> Note: +> +> This isn't really a React-specific tip, as such anti-patterns often occur in code in general; in this case, React simply points them out more clearly. + +Using props, passed down from parent, to generate state in `getInitialState` often leads to duplication of "source of truth", i.e. where the real data is. Whenever possible, compute values on-the-fly to ensure that they don't get out of sync later on and cause maintenance trouble. + +Bad example: ```js /** @jsx React.DOM */ @@ -25,8 +30,7 @@ var MessageBox = React.createClass({ React.renderComponent(, mountNode); ``` -### Solution -Avoid this (see below for explanation). Compute it directly inside `render`: +Better: ```js /** @jsx React.DOM */ @@ -56,8 +60,3 @@ var MessageBox = React.createClass({ React.renderComponent(, mountNode); ``` - -### Discussion -This isn't really a React-specific tip, as such anti-patterns often occur in code in general; in this case, React simply points them out more clearly. - -Using props, passed down from parent, to generate state often leads to duplication of "source of truth", i.e. where the real data is. Whenever possible, compute values on-the-fly to ensure that they don't get out of sync later on and cause maintenance trouble. diff --git a/cookbook/11-dom-event-listeners tip.md b/cookbook/11-dom-event-listeners tip.md deleted file mode 100644 index f83798a4..00000000 --- a/cookbook/11-dom-event-listeners tip.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: dom-event-listeners-tip -title: DOM event listeners in a component -layout: cookbook -permalink: dom-event-listeners-tip.html -prev: props-in-getInitialSate-as-anti-pattern.html -next: initial-ajax.html ---- - -> Note: -> -> This entry shows how to attach DOM events not provided by React ([check here for more info](/react/docs/cookbook/events.html)). This is good for integrations with other libraries such as jQuery. - -Try to resize the window: - -```js -/** @jsx React.DOM */ - -var Box = React.createClass({ - getInitialState: function() { - return {windowWidth: window.innerWidth}; - }, - handleResize: function(e) { - this.setState({windowWidth: window.innerWidth}); - }, - componentDidMount: function() { - window.addEventListener("resize", this.handleResize); - }, - componentWillUnmount: function() { - window.removeEventListener("resize", this.handleResize); - }, - render: function() { - return
Current window width: {this.state.windowWidth}
; - } -}); - -React.renderComponent(, mountNode); -``` - -`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. diff --git a/cookbook/11-dom-event-listeners.md b/cookbook/11-dom-event-listeners.md index 3de316cc..1336953a 100644 --- a/cookbook/11-dom-event-listeners.md +++ b/cookbook/11-dom-event-listeners.md @@ -7,10 +7,6 @@ prev: props-in-getInitialSate-as-anti-pattern.html next: initial-ajax.html --- -### Problem -You want to listen to an event inside a component. - -### Solution > Note: > > This entry shows how to attach DOM events not provided by React ([check here for more info](/react/docs/cookbook/events.html)). This is good for integrations with other libraries such as jQuery. @@ -41,5 +37,4 @@ var Box = React.createClass({ React.renderComponent(, mountNode); ``` -### Discussion `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. diff --git a/cookbook/12-initial-ajax tip.md b/cookbook/12-initial-ajax tip.md deleted file mode 100644 index 600d9e8a..00000000 --- a/cookbook/12-initial-ajax tip.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -id: initial-ajax-tip -title: Load initial data via AJAX -layout: cookbook -permalink: initial-ajax-tip.html -prev: dom-event-listeners.html ---- - -Fetch data in `componentDidMount`. When they arrive, put them inside your state then render them. - -This example fetches the desired Github user's lastest gist: - -```js -/** @jsx React.DOM */ - -var UserGist = React.createClass({ - getInitialState: function() { - return { - username: '', - lastGistUrl: '' - }; - }, - componentDidMount: function() { - $.get(this.props.source, function(result) { - var lastGist = result[0]; - this.setState({ - username: lastGist.user.login, - lastGistUrl: lastGist.html_url - }); - }.bind(this)); - }, - render: function() { - return ( -
- {this.state.username}'s last gist is - here. -
- ); - } -}); - -React.renderComponent( - , mountNode -); -``` diff --git a/cookbook/12-initial-ajax.md b/cookbook/12-initial-ajax.md index 1adaca5f..af867670 100644 --- a/cookbook/12-initial-ajax.md +++ b/cookbook/12-initial-ajax.md @@ -4,12 +4,9 @@ title: Load initial data via AJAX layout: cookbook permalink: initial-ajax.html prev: dom-event-listeners.html +next: false-in-jsx.html --- -### Problem -You want to load initial ajax data. - -### Solution Fetch data in `componentDidMount`. When they arrive, put them inside your state then render them. This example fetches the desired Github user's lastest gist: diff --git a/cookbook/13-false-in-jsx tip.md b/cookbook/13-false-in-jsx tip.md deleted file mode 100644 index a419c0af..00000000 --- a/cookbook/13-false-in-jsx tip.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -id: false-in-jsx-tip -title: False in JSX -layout: cookbook -permalink: initial-ajax.html -prev: initial-ajax.html ---- - -Here's how `false` renders in different contexts: - -Renders as `id="false"`: -```js -/** @jsx React.DOM */ -React.renderComponent(
, mountNode); -``` - -String "false" as input value: -```js -/** @jsx React.DOM */ -React.renderComponent(, mountNode); -``` - -No child: -```js -/** @jsx React.DOM */ -React.renderComponent(
{false}
, mountNode); -``` - -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}
`. diff --git a/cookbook/13-false-in-jsx.md b/cookbook/13-false-in-jsx.md index f325a0ca..f0fb81e9 100644 --- a/cookbook/13-false-in-jsx.md +++ b/cookbook/13-false-in-jsx.md @@ -1,15 +1,13 @@ --- -id: false-in-jsx +id: false-in-jsx-tip title: False in JSX layout: cookbook -permalink: initial-ajax.html +permalink: false-in-jsx.html prev: initial-ajax.html --- -### Problem -How does `undefined` and `false` behave as an attribute value and as a child component? +Here's how `false` renders in different contexts: -### Solution Renders as `id="false"`: ```js /** @jsx React.DOM */ @@ -28,5 +26,4 @@ No child: React.renderComponent(
{false}
, mountNode); ``` -### Discussion -The reason why the last 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}
`. +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}
`.