From 33cd980f0e0e7bc9b5ec444d11de8de214e63514 Mon Sep 17 00:00:00 2001 From: Jim Date: Mon, 5 Oct 2015 15:02:34 -0700 Subject: [PATCH] React -> ReactDOM for render() and findDOMNode() --- _js/examples/hello.js | 4 +- _js/examples/markdown.js | 6 +- _js/examples/timer.js | 4 +- _js/examples/todo.js | 4 +- _js/html-jsx.js | 2 +- _js/live_editor.js | 10 +- _layouts/default.html | 1 + ...15-10-01-react-render-and-top-level-api.md | 2 +- docs/02-displaying-data.it-IT.md | 6 +- docs/02-displaying-data.ja-JP.md | 6 +- docs/02-displaying-data.ko-KR.md | 6 +- docs/02-displaying-data.md | 6 +- docs/02-displaying-data.zh-CN.md | 6 +- docs/02.1-jsx-in-depth.it-IT.md | 4 +- docs/02.1-jsx-in-depth.ja-JP.md | 4 +- docs/02.1-jsx-in-depth.ko-KR.md | 4 +- docs/02.1-jsx-in-depth.md | 4 +- docs/02.1-jsx-in-depth.zh-CN.md | 4 +- .../03-interactivity-and-dynamic-uis.it-IT.md | 2 +- .../03-interactivity-and-dynamic-uis.ja-JP.md | 2 +- .../03-interactivity-and-dynamic-uis.ko-KR.md | 2 +- docs/03-interactivity-and-dynamic-uis.md | 2 +- .../03-interactivity-and-dynamic-uis.zh-CN.md | 2 +- docs/04-multiple-components.it-IT.md | 2 +- docs/04-multiple-components.ja-JP.md | 2 +- docs/04-multiple-components.ko-KR.md | 2 +- docs/04-multiple-components.md | 2 +- docs/04-multiple-components.zh-CN.md | 2 +- docs/05-reusable-components.it-IT.md | 10 +- docs/05-reusable-components.ja-JP.md | 6 +- docs/05-reusable-components.ko-KR.md | 6 +- docs/05-reusable-components.md | 10 +- docs/05-reusable-components.zh-CN.md | 6 +- docs/06-transferring-props.it-IT.md | 4 +- docs/06-transferring-props.ja-JP.md | 4 +- docs/06-transferring-props.ko-KR.md | 4 +- docs/06-transferring-props.md | 4 +- docs/06-transferring-props.zh-CN.md | 4 +- docs/08-working-with-the-browser.ja-JP.md | 6 +- docs/08-working-with-the-browser.ko-KR.md | 6 +- docs/08-working-with-the-browser.zh-CN.md | 6 +- docs/08.1-more-about-ref-zh-CN.md | 6 +- docs/08.1-more-about-refs.it-IT.md | 18 +- docs/08.1-more-about-refs.ja-JP.md | 8 +- docs/08.1-more-about-refs.ko-KR.md | 8 +- docs/08.1-more-about-refs.md | 18 +- docs/08.1-more-about-refs.zh-CN.md | 6 +- docs/09-tooling-integration.it-IT.md | 4 +- docs/09-tooling-integration.md | 4 +- docs/09-tooling-integration.zh-CN.md | 4 +- docs/10.4-test-utils.it-IT.md | 6 +- docs/10.4-test-utils.ja-JP.md | 4 +- docs/10.4-test-utils.ko-KR.md | 4 +- docs/10.4-test-utils.md | 6 +- docs/10.5-clone-with-props.it-IT.md | 2 +- docs/10.5-clone-with-props.ja-JP.md | 2 +- docs/10.5-clone-with-props.ko-KR.md | 2 +- docs/10.5-clone-with-props.md | 2 +- docs/getting-started.it-IT.md | 6 +- docs/getting-started.ja-JP.md | 6 +- docs/getting-started.ko-KR.md | 6 +- docs/getting-started.md | 6 +- docs/getting-started.zh-CN.md | 6 +- docs/ref-01-top-level-api.it-IT.md | 18 +- docs/ref-01-top-level-api.ko-KR.md | 18 +- docs/ref-01-top-level-api.md | 18 +- docs/ref-02-component-api.it-IT.md | 10 +- docs/ref-02-component-api.ko-KR.md | 10 +- docs/ref-02-component-api.md | 10 +- docs/ref-03-component-specs.it-IT.md | 4 +- docs/ref-03-component-specs.ko-KR.md | 4 +- docs/ref-03-component-specs.md | 4 +- docs/ref-09-glossary.it-IT.md | 22 +- docs/ref-09-glossary.ko-KR.md | 22 +- docs/ref-09-glossary.md | 22 +- docs/thinking-in-react.it-IT.md | 2 +- docs/thinking-in-react.ko-KR.md | 2 +- docs/thinking-in-react.md | 2 +- docs/tutorial.it-IT.md | 34 +- docs/tutorial.ja-JP.md | 32 +- docs/tutorial.ko-KR.md | 34 +- docs/tutorial.md | 34 +- downloads.md | 4 +- js/react-dom.js | 42 + js/react.js | 14536 ++++++++-------- tips/02-inline-styles.ko-KR.md | 2 +- tips/02-inline-styles.md | 2 +- tips/03-if-else-in-JSX.ko-KR.md | 6 +- tips/03-if-else-in-JSX.md | 6 +- tips/06-style-props-value-px.ko-KR.md | 2 +- tips/06-style-props-value-px.md | 2 +- tips/07-children-props-type.ko-KR.md | 4 +- tips/07-children-props-type.md | 4 +- tips/08-controlled-input-null-value.ko-KR.md | 4 +- tips/08-controlled-input-null-value.md | 4 +- ...n-getInitialState-as-anti-pattern.ko-KR.md | 6 +- ...rops-in-getInitialState-as-anti-pattern.md | 6 +- tips/11-dom-event-listeners.ko-KR.md | 2 +- tips/11-dom-event-listeners.md | 2 +- tips/12-initial-ajax.ko-KR.md | 2 +- tips/12-initial-ajax.md | 2 +- tips/13-false-in-jsx.ko-KR.md | 6 +- tips/13-false-in-jsx.md | 6 +- ...14-communicate-between-components.ko-KR.md | 2 +- tips/14-communicate-between-components.md | 2 +- tips/15-expose-component-functions.ko-KR.md | 2 +- tips/15-expose-component-functions.md | 2 +- tips/16-references-to-components.ko-KR.md | 6 +- tips/17-children-undefined.ko-KR.md | 2 +- tips/17-children-undefined.md | 2 +- ...18-use-react-with-other-libraries.ko-KR.md | 4 +- tips/18-use-react-with-other-libraries.md | 4 +- 112 files changed, 7243 insertions(+), 8048 deletions(-) create mode 100644 js/react-dom.js diff --git a/_js/examples/hello.js b/_js/examples/hello.js index 61a5e732..bab86329 100644 --- a/_js/examples/hello.js +++ b/_js/examples/hello.js @@ -5,10 +5,10 @@ var HelloMessage = React.createClass({ } }); -React.render(, mountNode); +ReactDOM.render(, mountNode); `; -React.render( +ReactDOM.render( , document.getElementById('helloExample') ); diff --git a/_js/examples/markdown.js b/_js/examples/markdown.js index 249f978b..a1abfe01 100644 --- a/_js/examples/markdown.js +++ b/_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(, mountNode); +ReactDOM.render(, mountNode); `; -React.render( +ReactDOM.render( , document.getElementById('markdownExample') ); diff --git a/_js/examples/timer.js b/_js/examples/timer.js index 44b5981a..af9ebbd8 100644 --- a/_js/examples/timer.js +++ b/_js/examples/timer.js @@ -19,10 +19,10 @@ var Timer = React.createClass({ } }); -React.render(, mountNode); +ReactDOM.render(, mountNode); `; -React.render( +ReactDOM.render( , document.getElementById('timerExample') ); diff --git a/_js/examples/todo.js b/_js/examples/todo.js index 2f80ed48..5358f41a 100644 --- a/_js/examples/todo.js +++ b/_js/examples/todo.js @@ -34,10 +34,10 @@ var TodoApp = React.createClass({ } }); -React.render(, mountNode); +ReactDOM.render(, mountNode); `; -React.render( +ReactDOM.render( , document.getElementById('todoExample') ); diff --git a/_js/html-jsx.js b/_js/html-jsx.js index a28e9f0e..ade01466 100644 --- a/_js/html-jsx.js +++ b/_js/html-jsx.js @@ -78,5 +78,5 @@ var HELLO_COMPONENT = "\ } }); - React.render(, document.getElementById('jsxCompiler')); + ReactDOM.render(, document.getElementById('jsxCompiler')); }()); diff --git a/_js/live_editor.js b/_js/live_editor.js index 0468e3fd..531dca80 100644 --- a/_js/live_editor.js +++ b/_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( , mountNode ); @@ -212,7 +212,7 @@ var ReactPlayground = React.createClass({ } } catch (err) { this.setTimeout(function() { - React.render( + ReactDOM.render(
{err.toString()}
, mountNode ); diff --git a/_layouts/default.html b/_layouts/default.html index e6808367..c3f29367 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -31,6 +31,7 @@ + diff --git a/_posts/2015-10-01-react-render-and-top-level-api.md b/_posts/2015-10-01-react-render-and-top-level-api.md index 8f7a857f..1811f1b0 100644 --- a/_posts/2015-10-01-react-render-and-top-level-api.md +++ b/_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/02-displaying-data.it-IT.md b/docs/02-displaying-data.it-IT.md index 26634692..d2fd2f27 100644 --- a/docs/02-displaying-data.it-IT.md +++ b/docs/02-displaying-data.it-IT.md @@ -48,7 +48,7 @@ var HelloWorld = React.createClass({ }); setInterval(function() { - React.render( + ReactDOM.render( , 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/02-displaying-data.ja-JP.md b/docs/02-displaying-data.ja-JP.md index 8ccccd2f..f8aa3e63 100644 --- a/docs/02-displaying-data.ja-JP.md +++ b/docs/02-displaying-data.ja-JP.md @@ -48,7 +48,7 @@ var HelloWorld = React.createClass({ }); setInterval(function() { - React.render( + ReactDOM.render( , document.getElementById('example') ); @@ -104,7 +104,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')); ``` 便利に書くために、カスタムコンポーネントで要素を作るために簡略した記法でファクトリー関数を作ることができます。 @@ -112,7 +112,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/02-displaying-data.ko-KR.md b/docs/02-displaying-data.ko-KR.md index 2c6141f6..f90fc1a6 100644 --- a/docs/02-displaying-data.ko-KR.md +++ b/docs/02-displaying-data.ko-KR.md @@ -47,7 +47,7 @@ var HelloWorld = React.createClass({ }); setInterval(function() { - React.render( + ReactDOM.render( , 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/02-displaying-data.md b/docs/02-displaying-data.md index 2e9742b3..81dad852 100644 --- a/docs/02-displaying-data.md +++ b/docs/02-displaying-data.md @@ -48,7 +48,7 @@ var HelloWorld = React.createClass({ }); setInterval(function() { - React.render( + ReactDOM.render( , 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/02-displaying-data.zh-CN.md b/docs/02-displaying-data.zh-CN.md index c95ff4d1..020f9697 100644 --- a/docs/02-displaying-data.zh-CN.md +++ b/docs/02-displaying-data.zh-CN.md @@ -49,7 +49,7 @@ var HelloWorld = React.createClass({ }); setInterval(function() { - React.render( + ReactDOM.render( , 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/02.1-jsx-in-depth.it-IT.md b/docs/02.1-jsx-in-depth.it-IT.md index f84d997e..0da7a603 100644 --- a/docs/02.1-jsx-in-depth.it-IT.md +++ b/docs/02.1-jsx-in-depth.it-IT.md @@ -26,7 +26,7 @@ Per rendere untag HTML, usa nomi di tag minuscoli in JSX: ```javascript var myDivElement =
; -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: @@ -34,7 +34,7 @@ Per rendere un componente React, definisci una variabile locale che comincia con ```javascript var MyComponent = React.createClass({/*...*/}); var myElement = ; -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/02.1-jsx-in-depth.ja-JP.md b/docs/02.1-jsx-in-depth.ja-JP.md index 2809412a..5c0f895a 100644 --- a/docs/02.1-jsx-in-depth.ja-JP.md +++ b/docs/02.1-jsx-in-depth.ja-JP.md @@ -26,7 +26,7 @@ ReactはHTMLタグ（文字列）とReactコンポーネント（クラス）の ```javascript var myDivElement =
; -React.render(myDivElement, document.getElementById('example')); +ReactDOM.render(myDivElement, document.getElementById('example')); ``` 以下のように大文字から始まるローカル変数を作成するだけで、Reactのコンポーネントをレンダリングできます。 @@ -34,7 +34,7 @@ React.render(myDivElement, document.getElementById('example')); ```javascript var MyComponent = React.createClass({/*...*/}); var myElement = ; -React.render(myElement, document.getElementById('example')); +ReactDOM.render(myElement, document.getElementById('example')); ``` ReactのJSXは大文字と小文字を使うことで、ローカルのコンポーネントクラスとHTMLタグを識別する習慣があります。 diff --git a/docs/02.1-jsx-in-depth.ko-KR.md b/docs/02.1-jsx-in-depth.ko-KR.md index 7230f567..fcd1f08d 100644 --- a/docs/02.1-jsx-in-depth.ko-KR.md +++ b/docs/02.1-jsx-in-depth.ko-KR.md @@ -26,7 +26,7 @@ HTML 태그를 렌더하려면, 그냥 JSX에 소문자 태그를 사용하세 ```javascript var myDivElement =
; -React.render(myDivElement, document.getElementById('example')); +ReactDOM.render(myDivElement, document.getElementById('example')); ``` React 컴포넌트를 렌더하려면, 대문자로 시작하는 로컬 변수를 만드세요. @@ -34,7 +34,7 @@ React 컴포넌트를 렌더하려면, 대문자로 시작하는 로컬 변수 ```javascript var MyComponent = React.createClass({/*...*/}); var myElement = ; -React.render(myElement, document.getElementById('example')); +ReactDOM.render(myElement, document.getElementById('example')); ``` React JSX는 대소문자를 로컬 컴포넌트 클래스와 HTML 태그를 구별하는 컨벤션으로 사용합니다. diff --git a/docs/02.1-jsx-in-depth.md b/docs/02.1-jsx-in-depth.md index d1c91b8f..a1dc5d97 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.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: @@ -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.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/02.1-jsx-in-depth.zh-CN.md b/docs/02.1-jsx-in-depth.zh-CN.md index c4442311..ae0289cb 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.getElementById('example')); +ReactDOM.render(myDivElement, document.getElementById('example')); ``` 要渲染 React 组件，只需创建一个大写字母开头的本地变量。 @@ -36,7 +36,7 @@ React.render(myDivElement, document.getElementById('example')); ```javascript var MyComponent = React.createClass({/*...*/}); var myElement = ; -React.render(myElement, document.getElementById('example')); +ReactDOM.render(myElement, document.getElementById('example')); ``` React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。 diff --git a/docs/03-interactivity-and-dynamic-uis.it-IT.md b/docs/03-interactivity-and-dynamic-uis.it-IT.md index 32e00dc8..0bfbbdb3 100644 --- a/docs/03-interactivity-and-dynamic-uis.it-IT.md +++ b/docs/03-interactivity-and-dynamic-uis.it-IT.md @@ -29,7 +29,7 @@ var LikeButton = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); diff --git a/docs/03-interactivity-and-dynamic-uis.ja-JP.md b/docs/03-interactivity-and-dynamic-uis.ja-JP.md index e54fc9d7..23e0b788 100644 --- a/docs/03-interactivity-and-dynamic-uis.ja-JP.md +++ b/docs/03-interactivity-and-dynamic-uis.ja-JP.md @@ -29,7 +29,7 @@ var LikeButton = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); diff --git a/docs/03-interactivity-and-dynamic-uis.ko-KR.md b/docs/03-interactivity-and-dynamic-uis.ko-KR.md index a8c48268..0a145a31 100644 --- a/docs/03-interactivity-and-dynamic-uis.ko-KR.md +++ b/docs/03-interactivity-and-dynamic-uis.ko-KR.md @@ -29,7 +29,7 @@ var LikeButton = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); diff --git a/docs/03-interactivity-and-dynamic-uis.md b/docs/03-interactivity-and-dynamic-uis.md index 94262dac..f26307e4 100644 --- a/docs/03-interactivity-and-dynamic-uis.md +++ b/docs/03-interactivity-and-dynamic-uis.md @@ -29,7 +29,7 @@ var LikeButton = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); diff --git a/docs/03-interactivity-and-dynamic-uis.zh-CN.md b/docs/03-interactivity-and-dynamic-uis.zh-CN.md index 8d747596..467ce513 100644 --- a/docs/03-interactivity-and-dynamic-uis.zh-CN.md +++ b/docs/03-interactivity-and-dynamic-uis.zh-CN.md @@ -29,7 +29,7 @@ var LikeButton = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); diff --git a/docs/04-multiple-components.it-IT.md b/docs/04-multiple-components.it-IT.md index f5bde3c7..84b6f80a 100644 --- a/docs/04-multiple-components.it-IT.md +++ b/docs/04-multiple-components.it-IT.md @@ -48,7 +48,7 @@ var ProfileLink = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); diff --git a/docs/04-multiple-components.ja-JP.md b/docs/04-multiple-components.ja-JP.md index 809d3a0c..1d6e363e 100644 --- a/docs/04-multiple-components.ja-JP.md +++ b/docs/04-multiple-components.ja-JP.md @@ -46,7 +46,7 @@ var ProfileLink = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); diff --git a/docs/04-multiple-components.ko-KR.md b/docs/04-multiple-components.ko-KR.md index d1eefc04..70ec3bb3 100644 --- a/docs/04-multiple-components.ko-KR.md +++ b/docs/04-multiple-components.ko-KR.md @@ -48,7 +48,7 @@ var ProfileLink = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); diff --git a/docs/04-multiple-components.md b/docs/04-multiple-components.md index 32389e42..03cd8077 100644 --- a/docs/04-multiple-components.md +++ b/docs/04-multiple-components.md @@ -48,7 +48,7 @@ var ProfileLink = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); diff --git a/docs/04-multiple-components.zh-CN.md b/docs/04-multiple-components.zh-CN.md index 2e717ff5..cb5bbd35 100644 --- a/docs/04-multiple-components.zh-CN.md +++ b/docs/04-multiple-components.zh-CN.md @@ -47,7 +47,7 @@ var ProfileLink = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); diff --git a/docs/05-reusable-components.it-IT.md b/docs/05-reusable-components.it-IT.md index 0a8a26b2..284f9b22 100644 --- a/docs/05-reusable-components.it-IT.md +++ b/docs/05-reusable-components.it-IT.md @@ -111,7 +111,7 @@ var CheckLink = React.createClass({ } }); -React.render( +ReactDOM.render( Clicca qui! , @@ -179,7 +179,7 @@ var TickTock = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); @@ -197,7 +197,7 @@ class HelloMessage extends React.Component { return
Ciao {this.props.name}
; } } -React.render(, mountNode); +ReactDOM.render(, mountNode); ``` L'API è simile a `React.createClass` con l'eccezione del metodo `getInitialState`. Anziché fornire un metodo `getInitialState` a parte, imposti la tua proprietà `state` nel costruttore. @@ -243,14 +243,14 @@ Puoi anche definire le tue classi React come semplici funzioni JavaScript. Ad es function HelloMessage(props) { return
Ciao {props.name}
; } -React.render(, mountNode); +ReactDOM.render(, mountNode); ``` Oppure usando la nuova sintassi freccia di ES6: ```javascript var HelloMessage = (props) =>
Ciao {props.name}
; -React.render(, mountNode); +ReactDOM.render(, mountNode); ``` diff --git a/docs/05-reusable-components.ja-JP.md b/docs/05-reusable-components.ja-JP.md index d7d1ceef..0fdb0326 100644 --- a/docs/05-reusable-components.ja-JP.md +++ b/docs/05-reusable-components.ja-JP.md @@ -107,7 +107,7 @@ var CheckLink = React.createClass({ } }); -React.render( +ReactDOM.render( Click here! , @@ -175,7 +175,7 @@ var TickTock = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); @@ -193,7 +193,7 @@ class HelloMessage extends React.Component { return
Hello {this.props.name}
; } } -React.render(, mountNode); +ReactDOM.render(, mountNode); ``` APIは `getInitialState` という例外を除き、 `React.createClass` と同じです。APIが異なっている `getInitialState` メソッドを提供する代わりに、コンストラクタの中に `state` プロパティをセットします。 diff --git a/docs/05-reusable-components.ko-KR.md b/docs/05-reusable-components.ko-KR.md index 491b6d19..c53f7abc 100644 --- a/docs/05-reusable-components.ko-KR.md +++ b/docs/05-reusable-components.ko-KR.md @@ -108,7 +108,7 @@ var CheckLink = React.createClass({ } }); -React.render( +ReactDOM.render( Click here! , @@ -176,7 +176,7 @@ var TickTock = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); @@ -195,7 +195,7 @@ class HelloMessage extends React.Component { return
Hello {this.props.name}
; } } -React.render(, mountNode); +ReactDOM.render(, mountNode); ``` API는 `getInitialState`를 제외하고 `React.createClass`와 유사합니다. 별도의 `getInitialState` 메소드 대신에, 필요한 `state` 프로퍼티를 생성자에서 설정할 수 있습니다. diff --git a/docs/05-reusable-components.md b/docs/05-reusable-components.md index d975ec7e..bd24f6c7 100644 --- a/docs/05-reusable-components.md +++ b/docs/05-reusable-components.md @@ -110,7 +110,7 @@ var CheckLink = React.createClass({ } }); -React.render( +ReactDOM.render( Click here! , @@ -179,7 +179,7 @@ var TickTock = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); @@ -197,7 +197,7 @@ class HelloMessage extends React.Component { return
Hello {this.props.name}
; } } -React.render(, mountNode); +ReactDOM.render(, mountNode); ``` The API is similar to `React.createClass` with the exception of `getInitialState`. Instead of providing a separate `getInitialState` method, you set up your own `state` property in the constructor. @@ -243,14 +243,14 @@ You may also define your React classes as a plain JavaScript function. For examp function HelloMessage(props) { return
Hello {props.name}
; } -React.render(, mountNode); +ReactDOM.render(, mountNode); ``` Or using the new ES6 arrow syntax: ```javascript var HelloMessage = (props) =>
Hello {props.name}
; -React.render(, mountNode); +ReactDOM.render(, mountNode); ``` diff --git a/docs/05-reusable-components.zh-CN.md b/docs/05-reusable-components.zh-CN.md index b84b6371..58bf64c2 100644 --- a/docs/05-reusable-components.zh-CN.md +++ b/docs/05-reusable-components.zh-CN.md @@ -105,7 +105,7 @@ var CheckLink = React.createClass({ } }); -React.render( +ReactDOM.render( Click here! , @@ -174,7 +174,7 @@ var TickTock = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); @@ -192,7 +192,7 @@ class HelloMessage extends React.Component { return
Hello {this.props.name}
; } } -React.render(, mountNode); +ReactDOM.render(, mountNode); ``` API近似于 `React.createClass` 除了 `getInitialState`。 你应该在构造函数里设置你的`state`，而不是提供一个单独的 `getInitialState` 方法。 diff --git a/docs/06-transferring-props.it-IT.md b/docs/06-transferring-props.it-IT.md index 70c356b3..f38cd1fc 100644 --- a/docs/06-transferring-props.it-IT.md +++ b/docs/06-transferring-props.it-IT.md @@ -37,7 +37,7 @@ var FancyCheckbox = React.createClass({ ); } }); -React.render( +ReactDOM.render( Ciao mondo! , @@ -74,7 +74,7 @@ var FancyCheckbox = React.createClass({ ); } }); -React.render( +ReactDOM.render( Ciao mondo! , diff --git a/docs/06-transferring-props.ja-JP.md b/docs/06-transferring-props.ja-JP.md index 1c3f4bfb..0119dd4d 100644 --- a/docs/06-transferring-props.ja-JP.md +++ b/docs/06-transferring-props.ja-JP.md @@ -39,7 +39,7 @@ var FancyCheckbox = React.createClass({ ); } }); -React.render( +ReactDOM.render( Hello world! , @@ -75,7 +75,7 @@ var FancyCheckbox = React.createClass({ ); } }); -React.render( +ReactDOM.render( Hello world! , diff --git a/docs/06-transferring-props.ko-KR.md b/docs/06-transferring-props.ko-KR.md index f0110996..7ab65fdd 100644 --- a/docs/06-transferring-props.ko-KR.md +++ b/docs/06-transferring-props.ko-KR.md @@ -37,7 +37,7 @@ var FancyCheckbox = React.createClass({ ); } }); -React.render( +ReactDOM.render( 세상아 안녕! , @@ -74,7 +74,7 @@ var FancyCheckbox = React.createClass({ ); } }); -React.render( +ReactDOM.render( 세상아 안녕! , diff --git a/docs/06-transferring-props.md b/docs/06-transferring-props.md index 70cbe385..0bac12a1 100644 --- a/docs/06-transferring-props.md +++ b/docs/06-transferring-props.md @@ -37,7 +37,7 @@ var FancyCheckbox = React.createClass({ ); } }); -React.render( +ReactDOM.render( Hello world! , @@ -74,7 +74,7 @@ var FancyCheckbox = React.createClass({ ); } }); -React.render( +ReactDOM.render( Hello world! , diff --git a/docs/06-transferring-props.zh-CN.md b/docs/06-transferring-props.zh-CN.md index 08ceebf6..c36015a4 100644 --- a/docs/06-transferring-props.zh-CN.md +++ b/docs/06-transferring-props.zh-CN.md @@ -37,7 +37,7 @@ var FancyCheckbox = React.createClass({ ); } }); -React.render( +ReactDOM.render( Hello world! , @@ -74,7 +74,7 @@ var FancyCheckbox = React.createClass({ ); } }); -React.render( +ReactDOM.render( Hello world! , diff --git a/docs/08-working-with-the-browser.ja-JP.md b/docs/08-working-with-the-browser.ja-JP.md index f801ed34..e84b07c1 100644 --- a/docs/08-working-with-the-browser.ja-JP.md +++ b/docs/08-working-with-the-browser.ja-JP.md @@ -18,7 +18,7 @@ ReactはDOMと直接対話を行わないため、とても速いです。React ## 参照とfindDOMNode() -ブラウザと相互に影響するために、DOMノードへの参照が必要になるでしょう。ReactはコンポーネントのDOMノードへの参照を得ることができる `React.findDOMNode(component)` 関数を持っています。 +ブラウザと相互に影響するために、DOMノードへの参照が必要になるでしょう。ReactはコンポーネントのDOMノードへの参照を得ることができる `ReactDOM.findDOMNode(component)` 関数を持っています。 > 注意: > `findDOMNode()` はマウントされたコンポーネントの上でのみ動きます（これは、DOMに配置されたコンポーネントという意味です）。まだマウントされていない（まだ作成されていないコンポーネントの上で `render()` の `findDOMNode()` を呼ぶようなものです）コンポーネントの上でこれを呼ぼうとした場合、例外がスローされます。 @@ -29,7 +29,7 @@ Reactのコンポーネントへの参照を得るためには、現在のReact var MyComponent = React.createClass({ handleClick: function() { // 生のDOMのAPIを使ってテキスト入力に明確にフォーカスします。 - React.findDOMNode(this.refs.myTextInput).focus(); + ReactDOM.findDOMNode(this.refs.myTextInput).focus(); }, render: function() { // この参照属性はコンポーネントがマウントされた時に、 @@ -47,7 +47,7 @@ var MyComponent = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); diff --git a/docs/08-working-with-the-browser.ko-KR.md b/docs/08-working-with-the-browser.ko-KR.md index 9f69a9d7..ea9a6075 100644 --- a/docs/08-working-with-the-browser.ko-KR.md +++ b/docs/08-working-with-the-browser.ko-KR.md @@ -20,7 +20,7 @@ React는 DOM을 직접 다루지 않기 때문에 굉장히 빠릅니다. React ## Refs와 findDOMNode() -브라우저와 상호 작용하려면 DOM 노드에 대한 참조가 필요합니다. React는 `React.findDOMNode(component)` 함수를 갖고 있으며, 이를 통해서 컴포넌트의 DOM 노드의 참조를 얻을 수 있습니다. +브라우저와 상호 작용하려면 DOM 노드에 대한 참조가 필요합니다. React는 `ReactDOM.findDOMNode(component)` 함수를 갖고 있으며, 이를 통해서 컴포넌트의 DOM 노드의 참조를 얻을 수 있습니다. > 주의: > @@ -32,7 +32,7 @@ React 컴포넌트에 대한 참조는 현재의 React 컴포넌트를 위해 `t var MyComponent = React.createClass({ handleClick: function() { // raw DOM API를 사용해 명시적으로 텍스트 인풋을 포커스 합니다. - React.findDOMNode(this.refs.myTextInput).focus(); + ReactDOM.findDOMNode(this.refs.myTextInput).focus(); }, render: function() { // ref 어트리뷰트는 컴포넌트가 마운트되면 그에 대한 참조를 this.refs에 추가합니다. @@ -49,7 +49,7 @@ var MyComponent = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); diff --git a/docs/08-working-with-the-browser.zh-CN.md b/docs/08-working-with-the-browser.zh-CN.md index 1cecd802..4dc1b1d2 100644 --- a/docs/08-working-with-the-browser.zh-CN.md +++ b/docs/08-working-with-the-browser.zh-CN.md @@ -20,7 +20,7 @@ React如此快速是因为它从不直接操作DOM。React维持了一个快速 ## Refs 和 findDOMNode() -为了与浏览器互动，你需要一个指向DOM node的引用。React有一个函数`React.findDOMNode(component)` ，你能调用以得到一个指向指向组件的DOM node的引用。 +为了与浏览器互动，你需要一个指向DOM node的引用。React有一个函数`ReactDOM.findDOMNode(component)` ，你能调用以得到一个指向指向组件的DOM node的引用。 > 注意: > @@ -32,7 +32,7 @@ React如此快速是因为它从不直接操作DOM。React维持了一个快速 var MyComponent = React.createClass({ handleClick: function() { // 明确的强制text input使用原生DOM API。 - React.findDOMNode(this.refs.myTextInput).focus(); + ReactDOM.findDOMNode(this.refs.myTextInput).focus(); }, render: function() { // 当组件被挂载时 @@ -50,7 +50,7 @@ var MyComponent = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); diff --git a/docs/08.1-more-about-ref-zh-CN.md b/docs/08.1-more-about-ref-zh-CN.md index 69f1fa21..575d571b 100644 --- a/docs/08.1-more-about-ref-zh-CN.md +++ b/docs/08.1-more-about-ref-zh-CN.md @@ -83,7 +83,7 @@ React 假设你可以向任何的从`render()` 中返回的组件附加一个特 this.refs.myInput ``` -通过调用`React.findDOMNode(this.refs.myInput)` 你可以直接方法这个组建的DOM。 +通过调用`this.refs.myInput` 你可以直接方法这个组建的DOM。 ## ref 回调属性 @@ -132,7 +132,7 @@ React 假设你可以向任何的从`render()` 中返回的组件附加一个特 // 清空input this.setState({userInput: ''}, function() { // 当这个组件被再次渲染之后，这个代码执行 - React.findDOMNode(this.refs.theInput).focus(); //获取焦点了！ + this.refs.theInput.focus(); //获取焦点了！ }); }, render: function() { @@ -163,7 +163,7 @@ React 假设你可以向任何的从`render()` 中返回的组件附加一个特 - 在你的组件类中你可以定义任意的公开方法（例如在一个Typeahead定义一个reset方法），然后通过refs来调用这些方法（像这样`this.refs.myTypeahead.reset()`)。 -- 执行 DOM操作，总是要求诸如`` 这样的一个“原生”组件，并通过`React.findDOMNode(this.refs.myInput)` 来访问她的低层的MOD 节点。Refs是可以做成这个事的唯一的实践可行的方法。 +- 执行 DOM操作，总是要求诸如`` 这样的一个“原生”组件，并通过`this.refs.myInput` 来访问她的低层的MOD 节点。Refs是可以做成这个事的唯一的实践可行的方法。 - Refs自动管理！如果孩子被销毁了，它的ref也被销毁。在这里不用担心内存（除非你做了一些疯狂的事情来自己保持一个引用）。 diff --git a/docs/08.1-more-about-refs.it-IT.md b/docs/08.1-more-about-refs.it-IT.md index be012d11..2fbff0b7 100644 --- a/docs/08.1-more-about-refs.it-IT.md +++ b/docs/08.1-more-about-refs.it-IT.md @@ -9,13 +9,13 @@ Dopo aver costruito il tuo componente, potresti trovarti nella situazione di vol Vediamo come ottenere un ref, e quindi passiamo ad un esempio completo. -## Il ref restituito da React.render +## Il ref restituito da ReactDOM.render -Da non confondersi con il metodo `render()` che definisci sul tuo componente (il quale restituisce un elemento DOM virtuale), [React.render()](/react/docs/top-level-api-it-IT.html#react.render) restituisce un riferimento all'**istanza di supporto** del tuo componente (o `null` per i [componenti privi di stato](/react/docs/reusable-components.html#stateless-functions)). +Da non confondersi con il metodo `render()` che definisci sul tuo componente (il quale restituisce un elemento DOM virtuale), [ReactDOM.render()](/react/docs/top-level-api-it-IT.html#reactdom.render) restituisce un riferimento all'**istanza di supporto** del tuo componente (o `null` per i [componenti privi di stato](/react/docs/reusable-components.html#stateless-functions)). ```js -var myComponent = React.render(, myContainer); +var myComponent = ReactDOM.render(, myContainer); ``` Tieni a mente, tuttavia, che JSX non restituisce un'istanza di un componente! È solo un **ReactElement**: una rappresentazione leggera che istruisce React su come il componente montato debba apparire. @@ -25,7 +25,7 @@ var myComponentElement = ; // Questo è un semplice ReactElement. // Qui va del codice... -var myComponentInstance = React.render(myComponentElement, myContainer); +var myComponentInstance = ReactDOM.render(myComponentElement, myContainer); myComponentInstance.doSomething(); ``` @@ -66,7 +66,7 @@ oppure usando una funzione freccia ES6: Nota che quando il componente referenziato viene smontato e quando il valore di ref cambia, ref sarà chiamata con `null` come argomento. Ciò impedisce i memory leak nel caso in cui l'istanza venga conservata, come nel primo esempio. Nota che quando assegni il valore di ref a un'espressione di funzione in linea come negli esempi precedenti, React vede un oggetto funzione diverso ogni volta e pertanto in occasione di ciascun aggiornamento, ref verrà chiamata con `null` immediatamente prima di essere chiamata con l'istanza del componente. -Puoi accedere al nodo DOM del componente direttamente chiamando `React.findDOMNode(argomentoDellaTuaCallback)`. +Puoi accedere al nodo DOM del componente direttamente chiamando `ReactDOM.findDOMNode(argomentoDellaTuaCallback)`. ## L'Attributo ref Come Stringa @@ -85,7 +85,7 @@ React supporta anche l'uso di una stringa (anziché una callback) come propriet this.refs.myInput ``` - Puoi accedere direttamente al nodo DOM del componente chiamando `React.findDOMNode(this.refs.myInput)`. + Puoi accedere direttamente al nodo DOM del componente chiamando `ReactDOM.findDOMNode(this.refs.myInput)`. ## Un Esempio Completo @@ -113,7 +113,7 @@ var MyComponent = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); @@ -121,7 +121,7 @@ React.render( In questo esempio, otteniamo un riferimento all'**istanza di supporto** del campo di testo e vi invochiamo il metodo `focus()` quando il bottone viene cliccato. -Per componenti compositi, il riferimento si riferisce a un'istanza della classe del componente, quindi puoi invocare ogni metodo definito in tale classe. Se devi accedere al nodo DOM sottostante per il componente, puoi usare [React.findDOMNode](/react/docs/top-level-api-it-IT.html#react.finddomnode). +Per componenti compositi, il riferimento si riferisce a un'istanza della classe del componente, quindi puoi invocare ogni metodo definito in tale classe. Se devi accedere al nodo DOM sottostante per il componente, puoi usare [ReactDOM.findDOMNode](/react/docs/top-level-api-it-IT.html#reactdom.finddomnode). ## Riassunto @@ -130,7 +130,7 @@ I riferimenti `ref` sono la maniera corretta di inviare un messaggio a una preci ### Benefici: - Puoi definire ogni metodo pubblico nelle classi dei tuoi componenti (come un metodo per reimpostare un Typeahead) e chiamare tali metodi pubblici attraverso i riferimenti (come ad esempio `this.refs.myTypeahead.reset()`). -- Effettuare misure sul DOM richiede quasi sempre l'accesso ad un componente "nativo" come `` accedendo il suo nodo DOM sottostante attraverso `React.findDOMNode(this.refs.myInput)`. I riferimenti sono uno degli unici metodi praticabili per fare ciò in maniera affidabile. +- Effettuare misure sul DOM richiede quasi sempre l'accesso ad un componente "nativo" come `` accedendo il suo nodo DOM sottostante attraverso `ReactDOM.findDOMNode(this.refs.myInput)`. I riferimenti sono uno degli unici metodi praticabili per fare ciò in maniera affidabile. - I riferimenti sono gestiti automaticamente per te! Se un figlio è distrutto, anche il suo riferimento è distrutto. Pertanto non preoccuparti del consumo di memoria (a meno che tu non faccia qualcosa di folle per conservare un riferimento). ### Precauzioni: diff --git a/docs/08.1-more-about-refs.ja-JP.md b/docs/08.1-more-about-refs.ja-JP.md index 79b8cc38..0956ea76 100644 --- a/docs/08.1-more-about-refs.ja-JP.md +++ b/docs/08.1-more-about-refs.ja-JP.md @@ -81,7 +81,7 @@ Reactは `render()` からの出力であるコンポーネントであれば何 this.refs.myInput ``` -`React.findDOMNode(this.refs.myInput)` を呼ぶことで、コンポーネントのDOMノードに直接アクセスできる。 +`ReactDOM.findDOMNode(this.refs.myInput)` を呼ぶことで、コンポーネントのDOMノードに直接アクセスできる。 ## 参照のコールバック属性 @@ -90,7 +90,7 @@ Reactは `render()` からの出力であるコンポーネントであれば何 これは、以下のように、 `render` でリターンされてきたものに `ref` 属性をアサインするのと同じくらい簡単です。 ```html - + ``` @@ -108,7 +108,7 @@ Reactは `render()` からの出力であるコンポーネントであれば何 // inputをクリアする this.setState({userInput: ''}, function() { // このコードはコンポーネントが再度レンダリングされた後に実行されます。 - React.findDOMNode(this.refs.theInput).focus(); // どーん！フォーカスされました！ + ReactDOM.findDOMNode(this.refs.theInput).focus(); // どーん！フォーカスされました！ }); }, render: function() { @@ -137,7 +137,7 @@ Reactは `render()` からの出力であるコンポーネントであれば何 ### 利益: - コンポーネントクラス（例えば、Typeaheadのリセットメソッドのようなもの）にパブリックなメソッドを定義できる。また、参照（例えば、 `this.refs.myTypeahead.reset()` のように）を通してそれらのパブリックなメソッドを呼べる。 -- DOMの計測を行うことは大体いつも `` のような「ネイティブの」コンポーネントや `React.findDOMNode(this.refs.myInput)` を通した根本のDOMノードにアクセスすることを必要とします。参照は、こういったことを期待通りに行う唯一の実用的な方法です。 +- DOMの計測を行うことは大体いつも `` のような「ネイティブの」コンポーネントや `ReactDOM.findDOMNode(this.refs.myInput)` を通した根本のDOMノードにアクセスすることを必要とします。参照は、こういったことを期待通りに行う唯一の実用的な方法です。 - 参照は自動的に管理されます！もし子要素が削除されたら、その参照もまた削除されます。メモリに関しての心配は要りません（あなた自身が参照を維持するために何かおかしなことを行っていなければ）。 ### 警告: diff --git a/docs/08.1-more-about-refs.ko-KR.md b/docs/08.1-more-about-refs.ko-KR.md index 9877e3d9..fd43af9b 100644 --- a/docs/08.1-more-about-refs.ko-KR.md +++ b/docs/08.1-more-about-refs.ko-KR.md @@ -84,7 +84,7 @@ React는 `render()`로 출력된 컴포넌트에 추가할 수 있는 아주 특 this.refs.myInput ``` - `React.findDOMNode(this.refs.myInput)`를 호출해 컴포넌트의 DOM 노드에 접근할 수 있습니다. + `this.refs.myInput`를 호출해 컴포넌트의 DOM 노드에 접근할 수 있습니다. ## ref 콜백 어트리뷰트 @@ -93,7 +93,7 @@ React는 `render()`로 출력된 컴포넌트에 추가할 수 있는 아주 특 `render`에서 반환한 모든 것에 간단하게 `ref` 어트리뷰트를 할당할 수 있습니다: ```html - + ``` ## 예제 완성하기 @@ -110,7 +110,7 @@ React는 `render()`로 출력된 컴포넌트에 추가할 수 있는 아주 특 // input을 비워준다 this.setState({userInput: ''}, function() { // 이 코드는 컴포넌트가 다시 렌더 된 다음 실행됩니다 - React.findDOMNode(this.refs.theInput).focus(); // 짠! 포커스 됨! + this.refs.theInput.focus(); // 짠! 포커스 됨! }); }, render: function() { @@ -140,7 +140,7 @@ Refs는 반응적인 `props`와 `state` 스트리밍을 통해서는 불편했 ### 이점: - 컴포넌트 클래스에 public 메소드(ex. Typeahead의 reset)를 선언할 수 있으며 refs를 통해 그를 호출할 수 있습니다. (ex. `this.refs.myTypeahead.reset()`) -- DOM을 측정하기 위해서는 거의 항상 `` 같은 "기본" 컴포넌트를 다루고 `React.findDOMNode(this.refs.myInput)`를 통해 그 기저의 DOM 노드에 접근해야 합니다. Refs는 이 일을 확실하게 수행하는 몇 안 되는 실용적인 방법의 하나입니다. +- DOM을 측정하기 위해서는 거의 항상 `` 같은 "기본" 컴포넌트를 다루고 `this.refs.myInput`를 통해 그 기저의 DOM 노드에 접근해야 합니다. Refs는 이 일을 확실하게 수행하는 몇 안 되는 실용적인 방법의 하나입니다. - Refs는 자동으로 관리합니다! 자식이 파괴되면, 그의 ref도 마찬가지로 파괴됩니다. 참조를 유지하기 위해 뭔가 미친 짓을 하지 않는 한, 메모리 걱정은 하지 않아도 됩니다. ### 주의: diff --git a/docs/08.1-more-about-refs.md b/docs/08.1-more-about-refs.md index 5382ca4a..8eefaab1 100644 --- a/docs/08.1-more-about-refs.md +++ b/docs/08.1-more-about-refs.md @@ -9,13 +9,13 @@ After building your component, you may find yourself wanting to "reach out" and Let's look at how to get a ref, and then dive into a complete example. -## The ref returned from React.render +## The ref returned from ReactDOM.render -Not to be confused with the `render()` function that you define on your component (and which returns a virtual DOM element), [React.render()](/react/docs/top-level-api.html#react.render) will return a reference to your component's **backing instance** (or `null` for [stateless components](/react/docs/reusable-components.html#stateless-functions)). +Not to be confused with the `render()` function that you define on your component (and which returns a virtual DOM element), [ReactDOM.render()](/react/docs/top-level-api.html#reactdom.render) will return a reference to your component's **backing instance** (or `null` for [stateless components](/react/docs/reusable-components.html#stateless-functions)). ```js -var myComponent = React.render(, myContainer); +var myComponent = ReactDOM.render(, myContainer); ``` Keep in mind, however, that the JSX doesn't return a component instance! It's just a **ReactElement**: a lightweight representation that tells React what the mounted component should look like. @@ -25,7 +25,7 @@ var myComponentElement = ; // This is just a ReactElement. // Some code here... -var myComponentInstance = React.render(myComponentElement, myContainer); +var myComponentInstance = ReactDOM.render(myComponentElement, myContainer); myComponentInstance.doSomething(); ``` @@ -65,7 +65,7 @@ or using an ES6 arrow function: Note that when the referenced component is unmounted and whenever the ref changes, the old ref will be called with `null` as an argument. This prevents memory leaks in the case that the instance is stored, as in the first example. Also note that when writing refs with inline function expressions as in the examples here, React sees a different function object each time so on every update, ref will be called with `null` immediately before it's called with the component instance. -You can access the component's DOM node directly by calling `React.findDOMNode(argumentToYourCallback)`. +You can access the component's DOM node directly by calling `ReactDOM.findDOMNode(argumentToYourCallback)`. ## The ref String Attribute @@ -84,7 +84,7 @@ React also supports using a string (instead of a callback) as a ref prop on any this.refs.myInput ``` - You can access the component's DOM node directly by calling `React.findDOMNode(this.refs.myInput)`. + You can access the component's DOM node directly by calling `ReactDOM.findDOMNode(this.refs.myInput)`. ## A Complete Example @@ -112,7 +112,7 @@ var MyComponent = React.createClass({ } }); -React.render( +ReactDOM.render( , document.getElementById('example') ); @@ -120,7 +120,7 @@ React.render( In this example, we get a reference to the text input **backing instance** and we call `focus()` when the button is clicked. -For composite components, the reference will refer to an instance of the component class so you can invoke any methods that are defined on that class. If you need access to the underlying DOM node for that component, you can use [React.findDOMNode](/react/docs/top-level-api.html#react.finddomnode). +For composite components, the reference will refer to an instance of the component class so you can invoke any methods that are defined on that class. If you need access to the underlying DOM node for that component, you can use [ReactDOM.findDOMNode](/react/docs/top-level-api.html#reactdom.finddomnode). ## Summary @@ -129,7 +129,7 @@ Refs are a great way to send a message to a particular child instance in a way t ### Benefits: - You can define any public method on your component classes (such as a reset method on a Typeahead) and call those public methods through refs (such as `this.refs.myTypeahead.reset()`). -- Performing DOM measurements almost always requires reaching out to a "native" component such as `` and accessing its underlying DOM node via `React.findDOMNode(this.refs.myInput)`. Refs are one of the only practical ways of doing this reliably. +- Performing DOM measurements almost always requires reaching out to a "native" component such as `` and accessing its underlying DOM node via `ReactDOM.findDOMNode(this.refs.myInput)`. Refs are one of the only practical ways of doing this reliably. - Refs are automatically managed for you! If that child is destroyed, its ref is also destroyed for you. No worrying about memory here (unless you do something crazy to retain a reference yourself). ### Cautions: diff --git a/docs/08.1-more-about-refs.zh-CN.md b/docs/08.1-more-about-refs.zh-CN.md index 5091143c..149c6c7f 100644 --- a/docs/08.1-more-about-refs.zh-CN.md +++ b/docs/08.1-more-about-refs.zh-CN.md @@ -83,7 +83,7 @@ React支持一种非常特殊的属性，你可以附加到任何从`render()` this.refs.myInput ``` - 你可以直接通过调用`React.findDOMNode(this.refs.myInput)` 访问组件的DOM node。 + 你可以直接通过调用`ReactDOM.findDOMNode(this.refs.myInput)` 访问组件的DOM node。 ## ref 回调属性 @@ -133,7 +133,7 @@ React支持一种非常特殊的属性，你可以附加到任何从`render()` // Clear the input this.setState({userInput: ''}, function() { // This code executes after the component is re-rendered - React.findDOMNode(this.refs.theInput).focus(); // Boom! Focused! + ReactDOM.findDOMNode(this.refs.theInput).focus(); // Boom! Focused! }); }, render: function() { @@ -163,7 +163,7 @@ Refs是一种很好的发送消息给特定子实例(通过流式的Reactive `pr ### 优点: - 你可以在你的组件类里定义任何的公开方法（比如在一个Typeahead的重置方法）然后通过refs调用那些公开方法（比如`this.refs.myTypeahead.reset()`）。 -- 实行DOM测量几乎总是需要接触到"原生" 组件比如 `` 并且`React.findDOMNode(this.refs.myInput)`通过访问它的底层DOM 节点。 Refs 是唯一一个可靠的完成这件事的实际方式。 +- 实行DOM测量几乎总是需要接触到"原生" 组件比如 `` 并且`ReactDOM.findDOMNode(this.refs.myInput)`通过访问它的底层DOM 节点。 Refs 是唯一一个可靠的完成这件事的实际方式。 - Refs 是为你自动管理的！如果子级被销毁了，它的ref也同样为你销毁了。这里不用担心内存（除非你做了一些疯狂的事情来自己保持一份引用）。 ### 注意事项: diff --git a/docs/09-tooling-integration.it-IT.md b/docs/09-tooling-integration.it-IT.md index 3a4d65a2..a9e03108 100644 --- a/docs/09-tooling-integration.it-IT.md +++ b/docs/09-tooling-integration.it-IT.md @@ -48,7 +48,7 @@ var HelloMessage = React.createClass({ } }); -React.render(, mountNode); +ReactDOM.render(, mountNode); $ babel test.jsx "use strict"; @@ -65,7 +65,7 @@ var HelloMessage = React.createClass({ } }); -React.render(React.createElement(HelloMessage, { name: "John" }), mountNode); +ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode); ``` diff --git a/docs/09-tooling-integration.md b/docs/09-tooling-integration.md index 54fda84a..8f20f7dd 100644 --- a/docs/09-tooling-integration.md +++ b/docs/09-tooling-integration.md @@ -48,7 +48,7 @@ var HelloMessage = React.createClass({ } }); -React.render(, mountNode); +ReactDOM.render(, mountNode); $ babel test.jsx "use strict"; @@ -65,7 +65,7 @@ var HelloMessage = React.createClass({ } }); -React.render(React.createElement(HelloMessage, { name: "John" }), mountNode); +ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode); ``` diff --git a/docs/09-tooling-integration.zh-CN.md b/docs/09-tooling-integration.zh-CN.md index 855d7f02..a7d73b1c 100644 --- a/docs/09-tooling-integration.zh-CN.md +++ b/docs/09-tooling-integration.zh-CN.md @@ -48,7 +48,7 @@ var HelloMessage = React.createClass({ } }); -React.render(, mountNode); +ReactDOM.render(, mountNode); $ babel test.jsx "use strict"; @@ -65,7 +65,7 @@ var HelloMessage = React.createClass({ } }); -React.render(React.createElement(HelloMessage, { name: "John" }), mountNode); +ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode); ``` diff --git a/docs/10.4-test-utils.it-IT.md b/docs/10.4-test-utils.it-IT.md index 567bec19..b2d240fc 100644 --- a/docs/10.4-test-utils.it-IT.md +++ b/docs/10.4-test-utils.it-IT.md @@ -22,14 +22,14 @@ Simula l'inoltro di un evento su un nodo DOM con dei dati dell'evento opzionali **Cliccare un elemento** ```javascript -var node = React.findDOMNode(this.refs.button); +var node = ReactDOM.findDOMNode(this.refs.button); React.addons.TestUtils.Simulate.click(node); ``` **Cambiare il valore di un campo di input e in seguito premere INVIO** ```javascript -var node = React.findDOMNode(this.refs.input); +var node = ReactDOM.findDOMNode(this.refs.input); node.value = 'giraffe' React.addons.TestUtils.Simulate.change(node); React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); @@ -204,7 +204,7 @@ shallowRenderer.render( ) ``` -Simile a `React.render`. +Simile a `ReactDOM.render`. ```javascript ReactComponent shallowRenderer.getRenderOutput() diff --git a/docs/10.4-test-utils.ja-JP.md b/docs/10.4-test-utils.ja-JP.md index f211018f..81d0d16b 100644 --- a/docs/10.4-test-utils.ja-JP.md +++ b/docs/10.4-test-utils.ja-JP.md @@ -19,7 +19,7 @@ Simulate.{eventName}(DOMElement element, object eventData) 使用例: ```javascript -var node = React.findDOMNode(this.refs.input); +var node = ReactDOM.findDOMNode(this.refs.input); React.addons.TestUtils.Simulate.click(node); React.addons.TestUtils.Simulate.change(node, {target: {value: 'Hello, world'}}); React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"}); @@ -154,7 +154,7 @@ ReactShallowRenderer createRenderer() shallowRenderer.render(ReactElement element) ``` -`React.render` に同様。 +`ReactDOM.render` に同様。 ```javascript ReactComponent shallowRenderer.getRenderOutput() diff --git a/docs/10.4-test-utils.ko-KR.md b/docs/10.4-test-utils.ko-KR.md index 1683bf05..7ba0e98d 100644 --- a/docs/10.4-test-utils.ko-KR.md +++ b/docs/10.4-test-utils.ko-KR.md @@ -19,7 +19,7 @@ DOM 노드에 이벤트 디스패치하는 것을 시뮬레이트합니다. 선 사용 예: ```javascript -var node = React.findDOMNode(this.refs.input); +var node = ReactDOM.findDOMNode(this.refs.input); React.addons.TestUtils.Simulate.click(node); React.addons.TestUtils.Simulate.change(node, {target: {value: 'Hello, world'}}); React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"}); @@ -152,7 +152,7 @@ ReactShallowRenderer createRenderer() shallowRenderer.render(ReactElement element) ``` -`React.render`와 유사합니다. +`ReactDOM.render`와 유사합니다. ```javascript ReactComponent shallowRenderer.getRenderOutput() diff --git a/docs/10.4-test-utils.md b/docs/10.4-test-utils.md index 7ec1aa72..24eac44a 100644 --- a/docs/10.4-test-utils.md +++ b/docs/10.4-test-utils.md @@ -22,14 +22,14 @@ Simulate an event dispatch on a DOM node with optional `eventData` event data. * **Clicking an element** ```javascript -var node = React.findDOMNode(this.refs.button); +var node = ReactDOM.findDOMNode(this.refs.button); React.addons.TestUtils.Simulate.click(node); ``` **Changing the value of an input field and then pressing ENTER** ```javascript -var node = React.findDOMNode(this.refs.input); +var node = ReactDOM.findDOMNode(this.refs.input); node.value = 'giraffe' React.addons.TestUtils.Simulate.change(node); React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); @@ -209,7 +209,7 @@ shallowRenderer.render( ) ``` -Similar to `React.render`. +Similar to `ReactDOM.render`. ```javascript ReactComponent shallowRenderer.getRenderOutput() diff --git a/docs/10.5-clone-with-props.it-IT.md b/docs/10.5-clone-with-props.it-IT.md index a8b76922..019af4ed 100644 --- a/docs/10.5-clone-with-props.it-IT.md +++ b/docs/10.5-clone-with-props.it-IT.md @@ -23,7 +23,7 @@ var Blue = React.createClass({ } }); -React.render( +ReactDOM.render(

Questo testo è blu.

, diff --git a/docs/10.5-clone-with-props.ja-JP.md b/docs/10.5-clone-with-props.ja-JP.md index 655f90f8..728d0550 100644 --- a/docs/10.5-clone-with-props.ja-JP.md +++ b/docs/10.5-clone-with-props.ja-JP.md @@ -23,7 +23,7 @@ var Blue = React.createClass({ } }); -React.render( +ReactDOM.render(

This text is blue.

, diff --git a/docs/10.5-clone-with-props.ko-KR.md b/docs/10.5-clone-with-props.ko-KR.md index 3b7bbc0b..085d83f3 100644 --- a/docs/10.5-clone-with-props.ko-KR.md +++ b/docs/10.5-clone-with-props.ko-KR.md @@ -23,7 +23,7 @@ var Blue = React.createClass({ } }); -React.render( +ReactDOM.render(

This text is blue.

, diff --git a/docs/10.5-clone-with-props.md b/docs/10.5-clone-with-props.md index 37fd92e8..597b9b78 100644 --- a/docs/10.5-clone-with-props.md +++ b/docs/10.5-clone-with-props.md @@ -23,7 +23,7 @@ var Blue = React.createClass({ } }); -React.render( +ReactDOM.render(

This text is blue.

, diff --git a/docs/getting-started.it-IT.md b/docs/getting-started.it-IT.md index 0c9da732..1c572cbf 100644 --- a/docs/getting-started.it-IT.md +++ b/docs/getting-started.it-IT.md @@ -37,7 +37,7 @@ Nella directory principale dello starter kit, crea `helloworld.html` con il segu