@samitouri / QOS-React-2 / commits / d83596620f

Docs: do not render components to `document.body`

Rendering to `document.body` in the examples is conveniently short, but it can be misleading at the same time, especially for newcomers. While it's possible to render React components to `document.body`, any 3rd party scripts can also mess up with it, and it can have unintended consequences and be source of difficult-to-trace bugs.

Julen Ruiz Aizpuru committed Mar 23, 2015 at 13:55 UTC d83596620f91f372d5956742b79ad4ad123b9c48

10 files changed +22 -22

docs/_posts/2013-07-23-community-roundup-5.md

+1 -1

@@ -60,7 +60,7 @@ React.renderComponent(

60 <option value="Facebook">Facebook</option>

61 <option value="Harvest">Harvest</option>

62 </Chosen>

63 -, document.body);

63 +, document.getElementById('example'));

64 ```

docs/_posts/2013-07-30-use-react-and-jsx-in-ruby-on-rails.md

+1 -1

@@ -38,7 +38,7 @@ When you name your file with `myfile.js.jsx`, `react-rails` will automatically t

39 ```js

40 /** @jsx React.DOM */

41 -React.renderComponent(<MyComponent/>, document.body)

41 +React.renderComponent(<MyComponent/>, document.getElementById('example'))

42 ```

docs/_posts/2014-08-03-community-roundup-21.md

+1 -1

@@ -16,7 +16,7 @@ React.renderComponent((

16 </Route>

17 </Route>

18 </Routes>

19 -), document.body);

19 +), document.getElementById('example'));

20 ```

22 ## Going Big with React

docs/docs/02-displaying-data.md

+2 -2

@@ -106,7 +106,7 @@ JSX is completely optional; you don't have to use JSX with React. You can create

106 var child1 = React.createElement('li', null, 'First Text Content');

107 var child2 = React.createElement('li', null, 'Second Text Content');

108 var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

109 -React.render(root, document.body);

109 +React.render(root, document.getElementById('example'));

110 ```

111

112 As a convenience you can create short-hand factory functions to create elements from custom components.

@@ -115,7 +115,7 @@ As a convenience you can create short-hand factory functions to create elements

115 var Factory = React.createFactory(ComponentClass);

116 ...

117 var root = Factory({ custom: 'prop' });

118 -React.render(root, document.body);

118 +React.render(root, document.getElementById('example'));

119 ```

120

121 React already has built-in factories for common HTML tags:

docs/docs/02-displaying-data.zh-CN.md

+2 -2

@@ -104,7 +104,7 @@ JSX 类似于 HTML，但不是完全一样。参考 [JSX 陷阱](/react/docs/jsx

104 ```javascript

105 var child = React.createElement('li', null, 'Text Content');

106 var root = React.createElement('ul', { className: 'my-list' }, child);

107 -React.render(root, document.body);

107 +React.render(root, document.getElementById('example'));

108 ```

109

110 方便起见，你可以创建基于自定义组件的速记工厂方法。

@@ -113,7 +113,7 @@ React.render(root, document.body);

113 var Factory = React.createFactory(ComponentClass);

114 ...

115 var root = Factory({ custom: 'prop' });

116 -React.render(root, document.body);

116 +React.render(root, document.getElementById('example'));

117 ```

118

119 React 已经为 HTML 标签提供内置工厂方法。

docs/docs/02.1-jsx-in-depth.md

+2 -2

@@ -26,7 +26,7 @@ To render a HTML tag, just use lower-case tag names in JSX:

27 ```javascript

28 var myDivElement = <div className="foo" />;

29 -React.render(myDivElement, document.body);

29 +React.render(myDivElement, document.getElementById('example'));

30 ```

32 To render a React Component, just create a local variable that starts with an upper-case letter:

@@ -34,7 +34,7 @@ To render a React Component, just create a local variable that starts with an up

34 ```javascript

35 var MyComponent = React.createClass({/*...*/});

36 var myElement = <MyComponent someProperty={true} />;

37 -React.render(myElement, document.body);

37 +React.render(myElement, document.getElementById('example'));

38 ```

40 React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.

docs/docs/02.1-jsx-in-depth.zh-CN.md

+2 -2

@@ -28,7 +28,7 @@ React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

29 ```javascript

30 var myDivElement = <div className="foo" />;

31 -React.render(myDivElement, document.body);

31 +React.render(myDivElement, document.getElementById('example'));

32 ```

34 要渲染 React 组件，只需创建一个大写字母开头的本地变量。

@@ -36,7 +36,7 @@ React.render(myDivElement, document.body);

36 ```javascript

37 var MyComponent = React.createClass({/*...*/});

38 var myElement = <MyComponent someProperty={true} />;

39 -React.render(myElement, document.body);

39 +React.render(myElement, document.getElementById('example'));

40 ```

42 React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。

docs/docs/06-transferring-props.md

+2 -2

@@ -41,7 +41,7 @@ React.render(

41 <FancyCheckbox checked={true} onClick={console.log.bind(console)}>

42 Hello world!

43 </FancyCheckbox>,

44 - document.body

44 + document.getElementById('example')

45 );

46 ```

@@ -78,7 +78,7 @@ React.render(

78 <FancyCheckbox checked={true} onClick={console.log.bind(console)}>

79 Hello world!

80 </FancyCheckbox>,

81 - document.body

81 + document.getElementById('example')

82 );

83 ```

docs/docs/06-transferring-props.zh-CN.md

+2 -2

@@ -42,7 +42,7 @@ React.render(

42 <FancyCheckbox checked={true} onClick={console.log.bind(console)}>

43 Hello world!

44 </FancyCheckbox>,

45 - document.body

45 + document.getElementById('example')

46 );

47 ```

@@ -76,7 +76,7 @@ React.render(

76 <FancyCheckbox checked={true} onClick={console.log.bind(console)}>

77 Hello world!

78 </FancyCheckbox>,

79 - document.body

79 + document.getElementById('example')

80 );

81 ```

docs/docs/ref-09-glossary.md

+7 -7

@@ -24,7 +24,7 @@ var root = React.createElement('div');

24 To render a new tree into the DOM, you create `ReactElement`s and pass them to `React.render` along with a regular DOM `Element` (`HTMLElement` or `SVGElement`). `ReactElement`s are not to be confused with DOM `Element`s. A `ReactElement` is a light, stateless, immutable, virtual representation of a DOM `Element`. It is a virtual DOM.

26 ```javascript

27 -React.render(root, document.body);

27 +React.render(root, document.getElementById('example'));

28 ```

30 To add properties to a DOM element, pass a properties object as the second argument and children to the third argument.

@@ -32,7 +32,7 @@ To add properties to a DOM element, pass a properties object as the second argum

32 ```javascript

33 var child = React.createElement('li', null, 'Text Content');

34 var root = React.createElement('ul', { className: 'my-list' }, child);

35 -React.render(root, document.body);

35 +React.render(root, document.getElementById('example'));

36 ```

38 If you use React JSX, then these `ReactElement`s are created for you. So this is equivalent:

@@ -41,7 +41,7 @@ If you use React JSX, then these `ReactElement`s are created for you. So this is

41 var root = <ul className="my-list">

42 <li>Text Content</li>

43 </ul>;

44 -React.render(root, document.body);

44 +React.render(root, document.getElementById('example'));

45 ```

47 __Factories__

@@ -59,7 +59,7 @@ It allows you to create a convenient short-hand instead of typing out `React.cre

59 ```javascript

60 var div = React.createFactory('div');

61 var root = div({ className: 'my-div' });

62 -React.render(root, document.body);

62 +React.render(root, document.getElementById('example'));

63 ```

65 React already has built-in factories for common HTML tags:

@@ -122,14 +122,14 @@ var element = <MyComponent />;

122 When this is passed to `React.render`, React will call the constructor for you and create a `ReactComponent`, which returned.

123

124 ```javascript

125 -var component = React.render(element, document.body);

125 +var component = React.render(element, document.getElementById('example'));

126 ```

127

128 If you keep calling `React.render` with the same type of `ReactElement` and the same container DOM `Element` it always returns the same instance. This instance is stateful.

129

130 ```javascript

131 -var componentA = React.render(<MyComponent />, document.body);

132 -var componentB = React.render(<MyComponent />, document.body);

131 +var componentA = React.render(<MyComponent />, document.getElementById('example'));

132 +var componentB = React.render(<MyComponent />, document.getElementById('example'));

133 componentA === componentB; // true

134 ```

135