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

Author: jimfb

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')
 );

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')
 );

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')
 );

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')
 );

docs/_js/html-jsx.js

@@ -78,5 +78,5 @@ var HELLO_COMPONENT = "\
     }
   });
 
-  React.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
+  ReactDOM.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
 }());

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
         );

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>

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

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:

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のタグについてはビルトインの関数を持っています。