From 3ebec4b55b3fd7ff50c2c6c552f7a9f084bb3bcc Mon Sep 17 00:00:00 2001 From: Julen Ruiz Aizpuru Date: Mon, 23 Mar 2015 13:55:01 +0100 Subject: [PATCH] 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 | 2 +- ...013-07-30-use-react-and-jsx-in-ruby-on-rails.md | 2 +- _posts/2014-08-03-community-roundup-21.md | 2 +- docs/02-displaying-data.md | 4 ++-- docs/02-displaying-data.zh-CN.md | 4 ++-- docs/02.1-jsx-in-depth.md | 4 ++-- docs/02.1-jsx-in-depth.zh-CN.md | 4 ++-- docs/06-transferring-props.md | 4 ++-- docs/06-transferring-props.zh-CN.md | 4 ++-- docs/ref-09-glossary.md | 14 +++++++------- 10 files changed, 22 insertions(+), 22 deletions(-) diff --git a/_posts/2013-07-23-community-roundup-5.md b/_posts/2013-07-23-community-roundup-5.md index fb8bca7a..7c6927b7 100644 --- a/_posts/2013-07-23-community-roundup-5.md +++ b/_posts/2013-07-23-community-roundup-5.md @@ -60,7 +60,7 @@ React.renderComponent( -, document.body); +, document.getElementById('example')); ``` diff --git a/_posts/2013-07-30-use-react-and-jsx-in-ruby-on-rails.md b/_posts/2013-07-30-use-react-and-jsx-in-ruby-on-rails.md index c8ccc4a6..77c517ba 100644 --- a/_posts/2013-07-30-use-react-and-jsx-in-ruby-on-rails.md +++ b/_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(, document.body) +React.renderComponent(, document.getElementById('example')) ``` diff --git a/_posts/2014-08-03-community-roundup-21.md b/_posts/2014-08-03-community-roundup-21.md index 3c4bb3c2..37126da6 100644 --- a/_posts/2014-08-03-community-roundup-21.md +++ b/_posts/2014-08-03-community-roundup-21.md @@ -16,7 +16,7 @@ React.renderComponent(( -), document.body); +), document.getElementById('example')); ``` ## Going Big with React diff --git a/docs/02-displaying-data.md b/docs/02-displaying-data.md index 36197071..74f5297a 100644 --- a/docs/02-displaying-data.md +++ b/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: diff --git a/docs/02-displaying-data.zh-CN.md b/docs/02-displaying-data.zh-CN.md index 160cc1b7..2cd2e79c 100644 --- a/docs/02-displaying-data.zh-CN.md +++ b/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 标签提供内置工厂方法。 diff --git a/docs/02.1-jsx-in-depth.md b/docs/02.1-jsx-in-depth.md index 7669ada9..3ded4bd5 100644 --- a/docs/02.1-jsx-in-depth.md +++ b/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 =
; -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 = ; -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. diff --git a/docs/02.1-jsx-in-depth.zh-CN.md b/docs/02.1-jsx-in-depth.zh-CN.md index 33a4181f..0a020538 100644 --- a/docs/02.1-jsx-in-depth.zh-CN.md +++ b/docs/02.1-jsx-in-depth.zh-CN.md @@ -28,7 +28,7 @@ React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。 ```javascript var myDivElement =
; -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 = ; -React.render(myElement, document.body); +React.render(myElement, document.getElementById('example')); ``` React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。 diff --git a/docs/06-transferring-props.md b/docs/06-transferring-props.md index 9ad68ae8..8dd63a5e 100644 --- a/docs/06-transferring-props.md +++ b/docs/06-transferring-props.md @@ -41,7 +41,7 @@ React.render( Hello world! , - document.body + document.getElementById('example') ); ``` @@ -78,7 +78,7 @@ React.render( Hello world! , - document.body + document.getElementById('example') ); ``` diff --git a/docs/06-transferring-props.zh-CN.md b/docs/06-transferring-props.zh-CN.md index 30930f2f..0d2766b8 100644 --- a/docs/06-transferring-props.zh-CN.md +++ b/docs/06-transferring-props.zh-CN.md @@ -42,7 +42,7 @@ React.render( Hello world! , - document.body + document.getElementById('example') ); ``` @@ -76,7 +76,7 @@ React.render( Hello world! , - document.body + document.getElementById('example') ); ``` diff --git a/docs/ref-09-glossary.md b/docs/ref-09-glossary.md index 90b644dc..68a34d58 100644 --- a/docs/ref-09-glossary.md +++ b/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 =
  • Text Content
; -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 = ; 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(, document.body); -var componentB = React.render(, document.body); +var componentA = React.render(, document.getElementById('example')); +var componentB = React.render(, document.getElementById('example')); componentA === componentB; // true ```