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.

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

@@ -60,7 +60,7 @@ React.renderComponent(
     <option value="Facebook">Facebook</option>
     <option value="Harvest">Harvest</option>
   </Chosen>
-, document.body);
+, document.getElementById('example'));
 ```
 
 

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

@@ -38,7 +38,7 @@ When you name your file with `myfile.js.jsx`, `react-rails` will automatically t
 
 ```js
 /** @jsx React.DOM */
-React.renderComponent(<MyComponent/>, document.body)
+React.renderComponent(<MyComponent/>, document.getElementById('example'))
 ```
 
 

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

@@ -16,7 +16,7 @@ React.renderComponent((
       </Route>
     </Route>
   </Routes>
-), document.body);
+), document.getElementById('example'));
 ```
 
 ## Going Big with React

docs/02-displaying-data.md

@@ -106,7 +106,7 @@ JSX is completely optional; you don't have to use JSX with React. You can create
 var child1 = React.createElement('li', null, 'First Text Content');
 var child2 = React.createElement('li', null, 'Second Text Content');
 var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
-React.render(root, document.body);
+React.render(root, document.getElementById('example'));
 ```
 
 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
 var Factory = React.createFactory(ComponentClass);
 ...
 var root = Factory({ custom: 'prop' });
-React.render(root, document.body);
+React.render(root, document.getElementById('example'));
 ```
 
 React already has built-in factories for common HTML tags:

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

@@ -104,7 +104,7 @@ JSX 类似于 HTML，但不是完全一样。参考 [JSX 陷阱](/react/docs/jsx
 ```javascript
 var child = React.createElement('li', null, 'Text Content');
 var root = React.createElement('ul', { className: 'my-list' }, child);
-React.render(root, document.body);
+React.render(root, document.getElementById('example'));
 ```
 
 方便起见，你可以创建基于自定义组件的速记工厂方法。
@@ -113,7 +113,7 @@ React.render(root, document.body);
 var Factory = React.createFactory(ComponentClass);
 ...
 var root = Factory({ custom: 'prop' });
-React.render(root, document.body);
+React.render(root, document.getElementById('example'));
 ```
 
 React 已经为 HTML 标签提供内置工厂方法。

docs/02.1-jsx-in-depth.md

@@ -26,7 +26,7 @@ To render a HTML tag, just use lower-case tag names in JSX:
 
 ```javascript
 var myDivElement = <div className="foo" />;
-React.render(myDivElement, document.body);
+React.render(myDivElement, document.getElementById('example'));
 ```
 
 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
 ```javascript
 var MyComponent = React.createClass({/*...*/});
 var myElement = <MyComponent someProperty={true} />;
-React.render(myElement, document.body);
+React.render(myElement, document.getElementById('example'));
 ```
 
 React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.

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

@@ -28,7 +28,7 @@ React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
 
 ```javascript
 var myDivElement = <div className="foo" />;
-React.render(myDivElement, document.body);
+React.render(myDivElement, document.getElementById('example'));
 ```
 
 要渲染 React 组件，只需创建一个大写字母开头的本地变量。
@@ -36,7 +36,7 @@ React.render(myDivElement, document.body);
 ```javascript
 var MyComponent = React.createClass({/*...*/});
 var myElement = <MyComponent someProperty={true} />;
-React.render(myElement, document.body);
+React.render(myElement, document.getElementById('example'));
 ```
 
 React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。

docs/06-transferring-props.md

@@ -41,7 +41,7 @@ React.render(
   <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
     Hello world!
   </FancyCheckbox>,
-  document.body
+  document.getElementById('example')
 );
 ```
 
@@ -78,7 +78,7 @@ React.render(
   <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
     Hello world!
   </FancyCheckbox>,
-  document.body
+  document.getElementById('example')
 );
 ```
 

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

@@ -42,7 +42,7 @@ React.render(
   <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
     Hello world!
   </FancyCheckbox>,
-  document.body
+  document.getElementById('example')
 );
 ```
 
@@ -76,7 +76,7 @@ React.render(
   <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
     Hello world!
   </FancyCheckbox>,
-  document.body
+  document.getElementById('example')
 );
 ```
 

docs/ref-09-glossary.md

@@ -24,7 +24,7 @@ var root = React.createElement('div');
 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.
 
 ```javascript
-React.render(root, document.body);
+React.render(root, document.getElementById('example'));
 ```
 
 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
 ```javascript
 var child = React.createElement('li', null, 'Text Content');
 var root = React.createElement('ul', { className: 'my-list' }, child);
-React.render(root, document.body);
+React.render(root, document.getElementById('example'));
 ```
 
 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
 var root = <ul className="my-list">
              <li>Text Content</li>
            </ul>;
-React.render(root, document.body);
+React.render(root, document.getElementById('example'));
 ```
 
 __Factories__
@@ -59,7 +59,7 @@ It allows you to create a convenient short-hand instead of typing out `React.cre
 ```javascript
 var div = React.createFactory('div');
 var root = div({ className: 'my-div' });
-React.render(root, document.body);
+React.render(root, document.getElementById('example'));
 ```
 
 React already has built-in factories for common HTML tags:
@@ -122,14 +122,14 @@ var element = <MyComponent />;
 When this is passed to `React.render`, React will call the constructor for you and create a `ReactComponent`, which returned.
 
 ```javascript
-var component = React.render(element, document.body);
+var component = React.render(element, document.getElementById('example'));
 ```
 
 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.
 
 ```javascript
-var componentA = React.render(<MyComponent />, document.body);
+var componentA = React.render(<MyComponent />, document.getElementById('example'));
-var componentB = React.render(<MyComponent />, document.body);
+var componentB = React.render(<MyComponent />, document.getElementById('example'));
 componentA === componentB; // true
 ```