React -> ReactDOM for render() and findDOMNode()

benmills · Oct 6, 2015 · 712199e · 712199e
1 parent 94ccda8
commit 712199e
Show file tree

Hide file tree

Showing 113 changed files with 7,244 additions and 8,048 deletions.
diff --git a/docs/_js/examples/hello.js b/docs/_js/examples/hello.js
@@ -5,10 +5,10 @@ var HelloMessage = React.createClass({
   }
 });
 
-React.render(<HelloMessage name="John" />, mountNode);
+ReactDOM.render(<HelloMessage name="John" />, mountNode);
 `;
 
-React.render(
+ReactDOM.render(
   <ReactPlayground codeText={HELLO_COMPONENT} />,
   document.getElementById('helloExample')
 );
diff --git a/docs/_js/examples/markdown.js b/docs/_js/examples/markdown.js
@@ -4,7 +4,7 @@ var MarkdownEditor = React.createClass({
     return {value: 'Type some *markdown* here!'};
   },
   handleChange: function() {
-    this.setState({value: React.findDOMNode(this.refs.textarea).value});
+    this.setState({value: this.refs.textarea.value});
   },
   rawMarkup: function() {
     return { __html: marked(this.state.value, {sanitize: true}) };
@@ -27,10 +27,10 @@ var MarkdownEditor = React.createClass({
   }
 });
 
-React.render(<MarkdownEditor />, mountNode);
+ReactDOM.render(<MarkdownEditor />, mountNode);
 `;
 
-React.render(
+ReactDOM.render(
   <ReactPlayground codeText={MARKDOWN_COMPONENT} />,
   document.getElementById('markdownExample')
 );
diff --git a/docs/_js/examples/timer.js b/docs/_js/examples/timer.js
@@ -19,10 +19,10 @@ var Timer = React.createClass({
   }
 });
 
-React.render(<Timer />, mountNode);
+ReactDOM.render(<Timer />, mountNode);
 `;
 
-React.render(
+ReactDOM.render(
   <ReactPlayground codeText={TIMER_COMPONENT} />,
   document.getElementById('timerExample')
 );
diff --git a/docs/_js/examples/todo.js b/docs/_js/examples/todo.js
@@ -34,10 +34,10 @@ var TodoApp = React.createClass({
   }
 });
 
-React.render(<TodoApp />, mountNode);
+ReactDOM.render(<TodoApp />, mountNode);
 `;
 
-React.render(
+ReactDOM.render(
   <ReactPlayground codeText={TODO_COMPONENT} />,
   document.getElementById('todoExample')
 );
diff --git a/docs/_js/html-jsx.js b/docs/_js/html-jsx.js
@@ -78,5 +78,5 @@ var HELLO_COMPONENT = "\
     }
   });
 
-  React.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
+  ReactDOM.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
 }());
diff --git a/docs/_js/live_editor.js b/docs/_js/live_editor.js
@@ -21,7 +21,7 @@ var CodeMirrorEditor = React.createClass({
   componentDidMount: function() {
     if (IS_MOBILE) return;
 
-    this.editor = CodeMirror.fromTextArea(React.findDOMNode(this.refs.editor), {
+    this.editor = CodeMirror.fromTextArea(ReactDOM.findDOMNode(this.refs.editor), {
       mode: 'javascript',
       lineNumbers: this.props.lineNumbers,
       lineWrapping: true,
@@ -194,16 +194,16 @@ var ReactPlayground = React.createClass({
   },
 
   executeCode: function() {
-    var mountNode = React.findDOMNode(this.refs.mount);
+    var mountNode = ReactDOM.findDOMNode(this.refs.mount);
 
     try {
-      React.unmountComponentAtNode(mountNode);
+      ReactDOM.unmountComponentAtNode(mountNode);
     } catch (e) { }
 
     try {
       var compiledCode = this.compileCode();
       if (this.props.renderCode) {
-        React.render(
+        ReactDOM.render(
           <CodeMirrorEditor codeText={compiledCode} readOnly={true} />,
           mountNode
         );
@@ -212,7 +212,7 @@ var ReactPlayground = React.createClass({
       }
     } catch (err) {
       this.setTimeout(function() {
-        React.render(
+        ReactDOM.render(
           <div className="playgroundError">{err.toString()}</div>,
           mountNode
         );

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -31,6 +31,7 @@
   <script src="/react/js/codemirror.js"></script>
   <script src="/react/js/javascript.js"></script>
   <script src="/react/js/react.js"></script>
+  <script src="/react/js/react-dom.js"></script>
   <script src="/react/js/babel-browser.min.js"></script>
   <script src="/react/js/live_editor.js"></script>
 </head>

diff --git a/docs/_posts/2015-10-01-react-render-and-top-level-api.md b/docs/_posts/2015-10-01-react-render-and-top-level-api.md
@@ -1,5 +1,5 @@
 ---
-title: "React.render and the Top Level React API"
+title: "ReactDOM.render and the Top Level React API"
 author: jimandsebastian
 ---
 

diff --git a/docs/docs/02-displaying-data.it-IT.md b/docs/docs/02-displaying-data.it-IT.md
@@ -48,7 +48,7 @@ var HelloWorld = React.createClass({
 });
 
 setInterval(function() {
-  React.render(
+  ReactDOM.render(
     <HelloWorld date={new Date()} />,
     document.getElementById('example')
   );
@@ -107,7 +107,7 @@ JSX è completamente opzionale; non è necessario utilizzare JSX con React. Puoi
 var child1 = React.createElement('li', null, 'Primo Contenuto di Testo');
 var child2 = React.createElement('li', null, 'Secondo Contenuto di Testo');
 var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
-React.render(root, document.getElementById('example'));
+ReactDOM.render(root, document.getElementById('example'));
 ```
 
 Per comodità, puoi creare funzioni factory scorciatoia per costruire elementi da componenti personalizzati.
@@ -116,7 +116,7 @@ Per comodità, puoi creare funzioni factory scorciatoia per costruire elementi d
 var Factory = React.createFactory(ComponentClass);
 ...
 var root = Factory({ custom: 'prop' });
-React.render(root, document.getElementById('example'));
+ReactDOM.render(root, document.getElementById('example'));
 ```
 
 React possiede già delle factory predefinite per i tag HTML comuni:

diff --git a/docs/docs/02-displaying-data.ja-JP.md b/docs/docs/02-displaying-data.ja-JP.md
@@ -48,7 +48,7 @@ var HelloWorld = React.createClass({
 });
 
 setInterval(function() {
-  React.render(
+  ReactDOM.render(
     <HelloWorld date={new Date()} />,
     document.getElementById('example')
   );
@@ -104,15 +104,15 @@ JSXは完全にオプションです。Reactと一緒にJSXを使う必要はあ
 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.getElementById('example'));
+ReactDOM.render(root, document.getElementById('example'));
 ```
 便利に書くために、カスタムコンポーネントで要素を作るために簡略した記法でファクトリー関数を作ることができます。
 
 ```javascript
 var Factory = React.createFactory(ComponentClass);
 ...
 var root = Factory({ custom: 'prop' });
-React.render(root, document.getElementById('example'));
+ReactDOM.render(root, document.getElementById('example'));
 ```
 
 Reactはすでに、共通なHTMLのタグについてはビルトインの関数を持っています。

diff --git a/docs/docs/02-displaying-data.ko-KR.md b/docs/docs/02-displaying-data.ko-KR.md
@@ -47,7 +47,7 @@ var HelloWorld = React.createClass({
 });
 
 setInterval(function() {
-  React.render(
+  ReactDOM.render(
     <HelloWorld date={new Date()} />,
     document.getElementById('example')
   );
@@ -106,7 +106,7 @@ JSX는 완전히 선택적입니다. 당신은 React와 JSX를 함께 사용하
 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.getElementById('example'));
+ReactDOM.render(root, document.getElementById('example'));
 ```
 
 편의를 위하여, 당신은 팩토리 함수 헬퍼들을 이용해 커스텀 컴포넌트로부터 엘리먼트들을 만들 수 있습니다.
@@ -115,7 +115,7 @@ React.render(root, document.getElementById('example'));
 var Factory = React.createFactory(ComponentClass);
 ...
 var root = Factory({ custom: 'prop' });
-React.render(root, document.getElementById('example'));
+ReactDOM.render(root, document.getElementById('example'));
 ```
 
 React는 이미 일반적인 HTML 태그에 대한 빌트인 팩토리를 가지고 있습니다.

diff --git a/docs/docs/02-displaying-data.md b/docs/docs/02-displaying-data.md
@@ -48,7 +48,7 @@ var HelloWorld = React.createClass({
 });
 
 setInterval(function() {
-  React.render(
+  ReactDOM.render(
     <HelloWorld date={new Date()} />,
     document.getElementById('example')
   );
@@ -107,7 +107,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.getElementById('example'));
+ReactDOM.render(root, document.getElementById('example'));
 ```
 
 For convenience, you can create short-hand factory functions to create elements from custom components.
@@ -116,7 +116,7 @@ For 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.getElementById('example'));
+ReactDOM.render(root, document.getElementById('example'));
 ```
 
 React already has built-in factories for common HTML tags:

diff --git a/docs/docs/02-displaying-data.zh-CN.md b/docs/docs/02-displaying-data.zh-CN.md
@@ -49,7 +49,7 @@ var HelloWorld = React.createClass({
 });
 
 setInterval(function() {
-  React.render(
+  ReactDOM.render(
     <HelloWorld date={new Date()} />,
     document.getElementById('example')
   );
@@ -105,7 +105,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.getElementById('example'));
+ReactDOM.render(root, document.getElementById('example'));
 ```
 
 方便起见，你可以创建基于自定义组件的速记工厂方法。
@@ -114,7 +114,7 @@ React.render(root, document.getElementById('example'));
 var Factory = React.createFactory(ComponentClass);
 ...
 var root = Factory({ custom: 'prop' });
-React.render(root, document.getElementById('example'));
+ReactDOM.render(root, document.getElementById('example'));
 ```
 
 React 已经为 HTML 标签提供内置工厂方法。

diff --git a/docs/docs/02.1-jsx-in-depth.it-IT.md b/docs/docs/02.1-jsx-in-depth.it-IT.md
@@ -26,15 +26,15 @@ Per rendere untag HTML, usa nomi di tag minuscoli in JSX:
 
 ```javascript
 var myDivElement = <div className="foo" />;
-React.render(myDivElement, document.getElementById('example'));
+ReactDOM.render(myDivElement, document.getElementById('example'));
 ```
 
 Per rendere un componente React, definisci una variabile locale che comincia con una lettera maiuscola:
 
 ```javascript
 var MyComponent = React.createClass({/*...*/});
 var myElement = <MyComponent someProperty={true} />;
-React.render(myElement, document.getElementById('example'));
+ReactDOM.render(myElement, document.getElementById('example'));
 ```
 
 Il JSX di React utilizza la convenzione maiuscolo o minuscolo per distinguere tra classi di componenti locali e tag HTML.

diff --git a/docs/docs/02.1-jsx-in-depth.ja-JP.md b/docs/docs/02.1-jsx-in-depth.ja-JP.md
@@ -26,15 +26,15 @@ ReactはHTMLタグ（文字列）とReactコンポーネント（クラス）の
 
 ```javascript
 var myDivElement = <div className="foo" />;
-React.render(myDivElement, document.getElementById('example'));
+ReactDOM.render(myDivElement, document.getElementById('example'));
 ```
 
 以下のように大文字から始まるローカル変数を作成するだけで、Reactのコンポーネントをレンダリングできます。
 
 ```javascript
 var MyComponent = React.createClass({/*...*/});
 var myElement = <MyComponent someProperty={true} />;
-React.render(myElement, document.getElementById('example'));
+ReactDOM.render(myElement, document.getElementById('example'));
 ```
 
 ReactのJSXは大文字と小文字を使うことで、ローカルのコンポーネントクラスとHTMLタグを識別する習慣があります。

diff --git a/docs/docs/02.1-jsx-in-depth.ko-KR.md b/docs/docs/02.1-jsx-in-depth.ko-KR.md
@@ -26,15 +26,15 @@ HTML 태그를 렌더하려면, 그냥 JSX에 소문자 태그를 사용하세
 
 ```javascript
 var myDivElement = <div className="foo" />;
-React.render(myDivElement, document.getElementById('example'));
+ReactDOM.render(myDivElement, document.getElementById('example'));
 ```
 
 React 컴포넌트를 렌더하려면, 대문자로 시작하는 로컬 변수를 만드세요.
 
 ```javascript
 var MyComponent = React.createClass({/*...*/});
 var myElement = <MyComponent someProperty={true} />;
-React.render(myElement, document.getElementById('example'));
+ReactDOM.render(myElement, document.getElementById('example'));
 ```
 
 React JSX는 대소문자를 로컬 컴포넌트 클래스와 HTML 태그를 구별하는 컨벤션으로 사용합니다.

diff --git a/docs/docs/02.1-jsx-in-depth.md b/docs/docs/02.1-jsx-in-depth.md
@@ -26,15 +26,15 @@ To render a HTML tag, just use lower-case tag names in JSX:
 
 ```javascript
 var myDivElement = <div className="foo" />;
-React.render(myDivElement, document.getElementById('example'));
+ReactDOM.render(myDivElement, document.getElementById('example'));
 ```
 
 To render a React Component, just create a local variable that starts with an upper-case letter:
 
 ```javascript
 var MyComponent = React.createClass({/*...*/});
 var myElement = <MyComponent someProperty={true} />;
-React.render(myElement, document.getElementById('example'));
+ReactDOM.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/docs/02.1-jsx-in-depth.zh-CN.md b/docs/docs/02.1-jsx-in-depth.zh-CN.md
@@ -28,15 +28,15 @@ React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
 
 ```javascript
 var myDivElement = <div className="foo" />;
-React.render(myDivElement, document.getElementById('example'));
+ReactDOM.render(myDivElement, document.getElementById('example'));
 ```
 
 要渲染 React 组件，只需创建一个大写字母开头的本地变量。
 
 ```javascript
 var MyComponent = React.createClass({/*...*/});
 var myElement = <MyComponent someProperty={true} />;
-React.render(myElement, document.getElementById('example'));
+ReactDOM.render(myElement, document.getElementById('example'));
 ```
 
 React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。

diff --git a/docs/docs/03-interactivity-and-dynamic-uis.it-IT.md b/docs/docs/03-interactivity-and-dynamic-uis.it-IT.md
@@ -29,7 +29,7 @@ var LikeButton = React.createClass({
   }
 });
 
-React.render(
+ReactDOM.render(
   <LikeButton />,
   document.getElementById('example')
 );

diff --git a/docs/docs/03-interactivity-and-dynamic-uis.ja-JP.md b/docs/docs/03-interactivity-and-dynamic-uis.ja-JP.md
@@ -29,7 +29,7 @@ var LikeButton = React.createClass({
   }
 });
 
-React.render(
+ReactDOM.render(
   <LikeButton />,
   document.getElementById('example')
 );

diff --git a/docs/docs/03-interactivity-and-dynamic-uis.ko-KR.md b/docs/docs/03-interactivity-and-dynamic-uis.ko-KR.md
@@ -29,7 +29,7 @@ var LikeButton = React.createClass({
   }
 });
 
-React.render(
+ReactDOM.render(
   <LikeButton />,
   document.getElementById('example')
 );

diff --git a/docs/docs/03-interactivity-and-dynamic-uis.md b/docs/docs/03-interactivity-and-dynamic-uis.md
@@ -29,7 +29,7 @@ var LikeButton = React.createClass({
   }
 });
 
-React.render(
+ReactDOM.render(
   <LikeButton />,
   document.getElementById('example')
 );

diff --git a/docs/docs/03-interactivity-and-dynamic-uis.zh-CN.md b/docs/docs/03-interactivity-and-dynamic-uis.zh-CN.md
@@ -29,7 +29,7 @@ var LikeButton = React.createClass({
   }
 });
 
-React.render(
+ReactDOM.render(
   <LikeButton />,
   document.getElementById('example')
 );

diff --git a/docs/docs/04-multiple-components.it-IT.md b/docs/docs/04-multiple-components.it-IT.md
@@ -48,7 +48,7 @@ var ProfileLink = React.createClass({
   }
 });
 
-React.render(
+ReactDOM.render(
   <Avatar username="pwh" />,
   document.getElementById('example')
 );
-Original file line number
+Diff line change
@@ Expand Up / @@ -78,5 +78,5 @@ var HELLO_COMPONENT = "\ @@
         }
       });
-      React.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
+      ReactDOM.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
     }());