efaba68663 · samitouri/QOS-React-2

docs/_config.yml

+3 -1

@@ -95,4 +95,6 @@ nav_cookbook:

95 - id: dom-event-listeners

96 title: DOM event listeners

97 - id: initial-ajax

98 - title: Initial AJAX

\ No newline at end of file

98 + title: Initial AJAX

99 + - id: false-in-jsx

100 + title: False In JSX

\ No newline at end of file

docs/cookbook/01-introduction-tip.md deleted

-13

@@ -1,13 +0,0 @@

1 ----

2 -id: introduction-tip

3 -title: Cookbook Introduction

4 -layout: cookbook

5 -permalink: introduction-tip.html

6 -next: inline-styles.html

7 ----

8 -

9 -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.

10 -

11 -### Contributing

12 -

13 -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).

docs/cookbook/01-introduction.md

+2 -2

@@ -6,8 +6,8 @@ permalink: introduction.html

6 next: inline-styles.html

7 ---

8

9 -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.

9 +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.

10

11 ### Contributing

12

13 -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).

13 +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).

docs/cookbook/02-inline-styles tip.md deleted

-24

@@ -1,24 +0,0 @@

1 ----

2 -id: inline-styles-tip

3 -title: Inline Styles

4 -layout: cookbook

5 -permalink: inline-styles-tip.html

6 -next: if-else-in-JSX.html

7 -prev: introduction.html

8 ----

9 -

10 -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:

11 -

12 -```js

13 -/** @jsx React.DOM */

14 -

15 -var divStyle = {

16 - color: 'white',

17 - backgroundImage: 'url(' + imgUrl + ')',

18 - WebkitTransition: 'all' // note the capital 'W' here

19 -};

20 -

21 -React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);

22 -```

23 -

24 -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".

docs/cookbook/02-inline-styles.md

+2 -7

@@ -7,11 +7,7 @@ next: if-else-in-JSX.html

7 prev: introduction.html

8 ---

9

10 -### Problem

11 -You want to apply inline style to an element.

12 -

13 -### Solution

14 -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:

10 +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:

11

12 ```js

13 /** @jsx React.DOM */

@@ -25,5 +21,4 @@ var divStyle = {

21 React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);

22 ```

23

28 -### Discussion

29 -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".

24 +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".

docs/cookbook/03-if-else-in-JSX tip.md deleted

-31

@@ -1,31 +0,0 @@

1 ----

2 -id: if-else-in-JSX-tip

3 -title: If-Else in JSX

4 -layout: cookbook

5 -permalink: if-else-in-JSX-tip.html

6 -prev: inline-styles.html

7 -next: self-closing-tag.html

8 ----

9 -

10 -`if-else` statements don't work inside JSX, since JSX is really just sugar for functions:

11 -

12 -```js

13 -/** @jsx React.DOM */

14 -

15 -// this

16 -React.renderComponent(<div id="msg">Hello World!</div>, mountNode);

17 -// is the same as this

18 -React.renderComponent(React.DOM.div({id:"msg"}, "Hello World!"), mountNode);

19 -```

20 -

21 -Which means `<div id={if (true){ 'msg' }}>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.

22 -

23 -What you're searching for is ternary expression:

24 -

25 -```js

26 -/** @jsx React.DOM */

27 -

28 -React.renderComponent(<div id={true ? 'msg' : ''}>Hello World!</div>, mountNode);

29 -```

30 -

31 -Try the [JSX compiler](/react/jsx-compiler.html).

docs/cookbook/03-if-else-in-JSX.md

+2 -7

@@ -7,11 +7,7 @@ prev: inline-styles.html

7 next: self-closing-tag.html

8 ---

9

10 -### Problem

11 -You want to use conditionals in JSX.

12 -

13 -### Solution

14 -Don't forget that JSX is really just sugar for functions:

10 +`if-else` statements don't work inside JSX, since JSX is really just sugar for functions:

11

12 ```js

13 /** @jsx React.DOM */

@@ -32,5 +28,4 @@ What you're searching for is ternary expression:

28 React.renderComponent(<div id={true ? 'msg' : ''}>Hello World!</div>, mountNode);

29 ```

30

35 -### Discussion

36 -Try the [JSX compiler](react/jsx-compiler.html).

31 +Try the [JSX compiler](/react/jsx-compiler.html).

docs/cookbook/04-self-closing-tag tip.md deleted

-12

@@ -1,12 +0,0 @@

1 ----

2 -id: self-closing-tag-tip

3 -title: Self-Closing Tag

4 -layout: cookbook

5 -permalink: self-closing-tag-tip.html

6 -prev: if-else-in-JSX.html

7 -next: jsx-root-node-count.html

8 ----

9 -

10 -In JSX, `<MyComponent />` alone is valid while `<MyComponent>` isn't.

11 -

12 -Related: every React component can be self-closing: `<div/>`.

docs/cookbook/04-self-closing-tag.md

+2 -7

@@ -7,11 +7,6 @@ prev: if-else-in-JSX.html

7 next: jsx-root-node-count.html

8 ---

9

10 -### Problem

11 -You're getting a parsing error (unexpected token) from JSX.

10 +In JSX, `<MyComponent />` alone is valid while `<MyComponent>` isn't.

11

13 -### Solution

14 -One of the reasons might be that you didn't put a `/` for your self-closing tags. `<MyComponent />` is valid while `<MyComponent>` isn't.

15 -

16 -### Discussion

17 -In fact, every React component can be self-closing: `<div/>`.

12 +Related: every React component can be self-closing: `<div/>`.

docs/cookbook/05-jsx-root-node-count tip.md deleted

-12

@@ -1,12 +0,0 @@

1 ----

2 -id: jsx-root-node-count-tip

3 -title: Maximum number of JSX root nodes

4 -layout: cookbook

5 -permalink: jsx-root-node-count-tip.html

6 -prev: self-closing-tag.html

7 -next: style-prop-value-px.html

8 ----

9 -

10 -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.

11 -

12 -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.

docs/cookbook/05-jsx-root-node-count.md

+1 -6

@@ -7,11 +7,6 @@ prev: self-closing-tag.html

7 next: style-prop-value-px.html

8 ---

9

10 -### Problem

11 -You're getting a parsing error from JSX.

10 +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.

11

13 -### Solution

14 -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).

15 -

16 -### Discussion

12 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.

docs/cookbook/06-style-prop-value-px tip.md deleted

-29

@@ -1,29 +0,0 @@

1 ----

2 -id: style-prop-value-px-tip

3 -title: Shorthand for specifying pixel values in style prop

4 -layout: cookbook

5 -permalink: style-prop-value-px-tip.html

6 -prev: jsx-root-node-count.html

7 -next: children-prop-type.html

8 ----

9 -

10 -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:

11 -

12 -```js

13 -/** @jsx React.DOM */

14 -

15 -var divStyle = {height: 10}; // rendered as "height:10px"

16 -React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);

17 -```

18 -

19 -See [Inline Styles](/react/docs/cookbook/inline-styles-tip.html) for more info.

20 -

21 -Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix:

22 -

23 -- fillOpacity

24 -- fontWeight

25 -- lineHeight

26 -- opacity

27 -- orphans

28 -- zIndex

29 -- zoom

docs/cookbook/06-style-prop-value-px.md

+2 -7

@@ -7,11 +7,7 @@ prev: jsx-root-node-count.html

7 next: children-prop-type.html

8 ---

9

10 -### Problem

11 -It's tedious to specify an inline `style` value by appending your number value with the string "px" each time.

12 -

13 -### Solution

14 -React automatically appends the string "px" for you after your number, so this works:

10 +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:

11

12 ```js

13 /** @jsx React.DOM */

@@ -20,8 +16,7 @@ var divStyle = {height: 10}; // rendered as "height:10px"

16 React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);

17 ```

18

23 -### Discussion

24 -See [Inline Styles](/react/docs/cookbook/inline-styles.html) for more info.

19 +See [Inline Styles](/react/docs/cookbook/inline-styles-tip.html) for more info.

20

21 Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix:

22

docs/cookbook/07-children-prop-type tip.md deleted

-12

@@ -1,12 +0,0 @@

1 ----

2 -id: children-prop-type-tip

3 -title: Type of the children prop

4 -layout: cookbook

5 -permalink: children-prop-type-tip.html

6 -prev: style-prop-value-px.html

7 -next: controlled-input-null-value.html

8 ----

9 -

10 -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.

11 -

12 -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/07-children-prop-type.md

+1 -5

@@ -7,10 +7,6 @@ prev: style-prop-value-px.html

7 next: controlled-input-null-value.html

8 ---

9

10 -### Problem

11 -You get errors while manipulating `this.props.children` inside a component.

12 -

13 -### Solution

14 -Usually, `children` is an array of components. To save an extra array allocation, it returns the component itself when there's only one.

10 +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.

11

12 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/08-controlled-input-null-value tip.md deleted

-24

@@ -1,24 +0,0 @@

1 ----

2 -id: controlled-input-null-value-tip

3 -title: Value of null for controlled input

4 -layout: cookbook

5 -permalink: controlled-input-null-value-tip.html

6 -prev: children-prop-type.html

7 -next: componentWillReceiveProps-not-triggered-after-mounting.html

8 ----

9 -

10 -Specifying the `value` prop on a [controlled component](/react/docs/cookbook/forms.html) prevents the user from changing the input unless you desire so.

11 -

12 -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`.

13 -

14 -The snippet below shows this phenomenon; after a second, the text becomes editable.

15 -

16 -```js

17 -/** @jsx React.DOM */

18 -

19 -React.renderComponent(<input value="hi" />, mountNode);

20 -

21 -setTimeout(function() {

22 - React.renderComponent(<input value={null} />, mountNode);

23 -}, 2000);

24 -```

docs/cookbook/08-controlled-input-null-value.md

+4 -4

@@ -7,11 +7,11 @@ prev: children-prop-type.html

7 next: componentWillReceiveProps-not-triggered-after-mounting.html

8 ---

9

10 -### Problem

11 -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).

10 +Specifying the `value` prop on a [controlled component](/react/docs/cookbook/forms.html) prevents the user from changing the input unless you desire so.

11

13 -### Solution

14 -You might have accidentally set `value` to `undefined` or `null`. The snippet below shows this phenomenon; after a second, the text becomes editable.

12 +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`.

13 +

14 +The snippet below shows this phenomenon; after a second, the text becomes editable.

15

16 ```js

17 /** @jsx React.DOM */

docs/cookbook/09-componentWillReceiveProps-not-triggered-after-mounting-tip.md deleted

-12

@@ -1,12 +0,0 @@

1 ----

2 -id: componentWillReceiveProps-not-triggered-after-mounting-tip

3 -title: componentWillReceiveProps not triggered after mounting

4 -layout: cookbook

5 -permalink: componentWillReceiveProps-not-triggered-after-mounting-tip.html

6 -prev: controlled-input-null-value.html

7 -next: props-in-getInitialSate-as-anti-pattern.html

8 ----

9 -

10 -`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.

11 -

12 -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/09-componentWillReceiveProps-not-triggered-after-mounting.md

+2 -7

@@ -7,11 +7,6 @@ prev: controlled-input-null-value.html

7 next: props-in-getInitialSate-as-anti-pattern.html

8 ---

9

10 -### Problem

11 -`componentWillReceiveProps` isn't triggered after the node is put on scene.

10 +`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.

11

13 -### Solution

14 -This is by design. Check out [other lifecycle methods](/react/docs/cookbook/component-specs.html) for the one that suits your needs.

15 -

16 -### Discussion

17 -`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.

12 +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/10-props-in-getInitialSate-as-anti-pattern-tip.md deleted

-62

@@ -1,62 +0,0 @@

1 ----

2 -id: props-in-getInitialSate-as-anti-pattern-tip

3 -title: props in getInitialState is an anti-pattern

4 -layout: cookbook

5 -permalink: props-in-getInitialSate-as-anti-pattern-tip.html

6 -prev: componentWillReceiveProps-not-triggered-after-mounting.html

7 -next: dom-event-listeners.html

8 ----

9 -

10 -> Note:

11 ->

12 -> 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.

13 -

14 -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.

15 -

16 -Bad example:

17 -

18 -```js

19 -/** @jsx React.DOM */

20 -

21 -var MessageBox = React.createClass({

22 - getInitialState: function() {

23 - return {nameWithQualifier: "Mr. " + this.props.name};

24 - },

25 - render: function() {

26 - return <div>{this.state.nameWithQualifier}</div>;

27 - }

28 -});

29 -

30 -React.renderComponent(<MessageBox name="Zuck"/>, mountNode);

31 -```

32 -

33 -Better:

34 -

35 -```js

36 -/** @jsx React.DOM */

37 -

38 -var MessageBox = React.createClass({

39 - render: function() {

40 - return <div>{"Mr. " + this.props.name}</div>;

41 - }

42 -});

43 -

44 -React.renderComponent(<MessageBox name="Zuck"/>, mountNode);

45 -```

46 -

47 -For more complex logic:

48 -

49 -```js

50 -/** @jsx React.DOM */

51 -

52 -var MessageBox = React.createClass({

53 - render: function() {

54 - return <div>{this.getNameWithQualifier(this.props.name)}</div>;

55 - },

56 - getNameWithQualifier: function(name) {

57 - return 'Mr. ' + name;

58 - }

59 -});

60 -

61 -React.renderComponent(<MessageBox name="Zuck"/>, mountNode);

62 -```

docs/cookbook/10-props-in-getInitialSate-as-anti-pattern.md

+8 -9

@@ -7,8 +7,13 @@ prev: componentWillReceiveProps-not-triggered-after-mounting.html

7 next: dom-event-listeners.html

8 ---

9

10 -### Problem

11 -You're using `this.props` in a component `getInitialSate`, like so:

10 +> Note:

11 +>

12 +> 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.

13 +

14 +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.

15 +

16 +Bad example:

17

18 ```js

19 /** @jsx React.DOM */

@@ -25,8 +30,7 @@ var MessageBox = React.createClass({

30 React.renderComponent(<MessageBox name="Zuck"/>, mountNode);

31 ```

32

28 -### Solution

29 -Avoid this (see below for explanation). Compute it directly inside `render`:

33 +Better:

34

35 ```js

36 /** @jsx React.DOM */

@@ -56,8 +60,3 @@ var MessageBox = React.createClass({

60

61 React.renderComponent(<MessageBox name="Zuck"/>, mountNode);

62 ```

59 -

60 -### Discussion

61 -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.

62 -

63 -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.

docs/cookbook/11-dom-event-listeners tip.md deleted

-40

@@ -1,40 +0,0 @@

1 ----

2 -id: dom-event-listeners-tip

3 -title: DOM event listeners in a component

4 -layout: cookbook

5 -permalink: dom-event-listeners-tip.html

6 -prev: props-in-getInitialSate-as-anti-pattern.html

7 -next: initial-ajax.html

8 ----

9 -

10 -> Note:

11 ->

12 -> 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.

13 -

14 -Try to resize the window:

15 -

16 -```js

17 -/** @jsx React.DOM */

18 -

19 -var Box = React.createClass({

20 - getInitialState: function() {

21 - return {windowWidth: window.innerWidth};

22 - },

23 - handleResize: function(e) {

24 - this.setState({windowWidth: window.innerWidth});

25 - },

26 - componentDidMount: function() {

27 - window.addEventListener("resize", this.handleResize);

28 - },

29 - componentWillUnmount: function() {

30 - window.removeEventListener("resize", this.handleResize);

31 - },

32 - render: function() {

33 - return <div>Current window width: {this.state.windowWidth}</div>;

34 - }

35 -});

36 -

37 -React.renderComponent(<Box />, mountNode);

38 -```

39 -

40 -`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.

docs/cookbook/11-dom-event-listeners.md

-5

@@ -7,10 +7,6 @@ prev: props-in-getInitialSate-as-anti-pattern.html

7 next: initial-ajax.html

8 ---

9

10 -### Problem

11 -You want to listen to an event inside a component.

12 -

13 -### Solution

10 > Note:

11 >

12 > 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({

37 React.renderComponent(<Box />, mountNode);

38 ```

39

44 -### Discussion

40 `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.

docs/cookbook/12-initial-ajax tip.md deleted

-45

@@ -1,45 +0,0 @@

1 ----

2 -id: initial-ajax-tip

3 -title: Load initial data via AJAX

4 -layout: cookbook

5 -permalink: initial-ajax-tip.html

6 -prev: dom-event-listeners.html

7 ----

8 -

9 -Fetch data in `componentDidMount`. When they arrive, put them inside your state then render them.

10 -

11 -This example fetches the desired Github user's lastest gist:

12 -

13 -```js

14 -/** @jsx React.DOM */

15 -

16 -var UserGist = React.createClass({

17 - getInitialState: function() {

18 - return {

19 - username: '',

20 - lastGistUrl: ''

21 - };

22 - },

23 - componentDidMount: function() {

24 - $.get(this.props.source, function(result) {

25 - var lastGist = result[0];

26 - this.setState({

27 - username: lastGist.user.login,

28 - lastGistUrl: lastGist.html_url

29 - });

30 - }.bind(this));

31 - },

32 - render: function() {

33 - return (

34 - <div>

35 - {this.state.username}'s last gist is

36 - <a href={this.state.lastGistUrl}>here</a>.

37 - </div>

38 - );

39 - }

40 -});

41 -

42 -React.renderComponent(

43 - <UserGist source="https://api.github.com/users/octocat/gists" />, mountNode

44 -);

45 -```

docs/cookbook/12-initial-ajax.md

+1 -4

@@ -4,12 +4,9 @@ title: Load initial data via AJAX

4 layout: cookbook

5 permalink: initial-ajax.html

6 prev: dom-event-listeners.html

7 +next: false-in-jsx.html

8 ---

9

9 -### Problem

10 -You want to load initial ajax data.

11 -

12 -### Solution

10 Fetch data in `componentDidMount`. When they arrive, put them inside your state then render them.

11

12 This example fetches the desired Github user's lastest gist:

docs/cookbook/13-false-in-jsx tip.md deleted

-29

@@ -1,29 +0,0 @@

1 ----

2 -id: false-in-jsx-tip

3 -title: False in JSX

4 -layout: cookbook

5 -permalink: initial-ajax.html

6 -prev: initial-ajax.html

7 ----

8 -

9 -Here's how `false` renders in different contexts:

10 -

11 -Renders as `id="false"`:

12 -```js

13 -/** @jsx React.DOM */

14 -React.renderComponent(<div id={false} />, mountNode);

15 -```

16 -

17 -String "false" as input value:

18 -```js

19 -/** @jsx React.DOM */

20 -React.renderComponent(<input value={false} />, mountNode);

21 -```

22 -

23 -No child:

24 -```js

25 -/** @jsx React.DOM */

26 -React.renderComponent(<div>{false}</div>, mountNode);

27 -```

28 -

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

docs/cookbook/13-false-in-jsx.md

+4 -7

@@ -1,15 +1,13 @@

1 ---

2 -id: false-in-jsx

2 +id: false-in-jsx-tip

3 title: False in JSX

4 layout: cookbook

5 -permalink: initial-ajax.html

5 +permalink: false-in-jsx.html

6 prev: initial-ajax.html

7 ---

8

9 -### Problem

10 -How does `undefined` and `false` behave as an attribute value and as a child component?

9 +Here's how `false` renders in different contexts:

10

12 -### Solution

11 Renders as `id="false"`:

12 ```js

13 /** @jsx React.DOM */

@@ -28,5 +26,4 @@ No child:

26 React.renderComponent(<div>{false}</div>, mountNode);

27 ```

28

31 -### Discussion

32 -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: `<div>{x > 1 && You have more than one item}</div>`.

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

Removed Q&A format