@samitouri / QOS-React-2 / commits / 712199ef98

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

Jim committed Oct 5, 2015 at 15:02 UTC 712199ef9830359c35c1c2442d79676396c06a2d

113 files changed +7244 -8048

docs/_js/examples/hello.js

+2 -2

@@ -5,10 +5,10 @@ var HelloMessage = React.createClass({

5 }

6 });

8 -React.render(<HelloMessage name="John" />, mountNode);

8 +ReactDOM.render(<HelloMessage name="John" />, mountNode);

9 `;

11 -React.render(

11 +ReactDOM.render(

12 <ReactPlayground codeText={HELLO_COMPONENT} />,

13 document.getElementById('helloExample')

14 );

docs/_js/examples/markdown.js

+3 -3

@@ -4,7 +4,7 @@ var MarkdownEditor = React.createClass({

4 return {value: 'Type some *markdown* here!'};

5 },

6 handleChange: function() {

7 - this.setState({value: React.findDOMNode(this.refs.textarea).value});

7 + this.setState({value: this.refs.textarea.value});

8 },

9 rawMarkup: function() {

10 return { __html: marked(this.state.value, {sanitize: true}) };

@@ -27,10 +27,10 @@ var MarkdownEditor = React.createClass({

27 }

28 });

30 -React.render(<MarkdownEditor />, mountNode);

30 +ReactDOM.render(<MarkdownEditor />, mountNode);

31 `;

33 -React.render(

33 +ReactDOM.render(

34 <ReactPlayground codeText={MARKDOWN_COMPONENT} />,

35 document.getElementById('markdownExample')

36 );

docs/_js/examples/timer.js

+2 -2

@@ -19,10 +19,10 @@ var Timer = React.createClass({

19 }

20 });

22 -React.render(<Timer />, mountNode);

22 +ReactDOM.render(<Timer />, mountNode);

23 `;

25 -React.render(

25 +ReactDOM.render(

26 <ReactPlayground codeText={TIMER_COMPONENT} />,

27 document.getElementById('timerExample')

28 );

docs/_js/examples/todo.js

+2 -2

@@ -34,10 +34,10 @@ var TodoApp = React.createClass({

34 }

35 });

37 -React.render(<TodoApp />, mountNode);

37 +ReactDOM.render(<TodoApp />, mountNode);

38 `;

40 -React.render(

40 +ReactDOM.render(

41 <ReactPlayground codeText={TODO_COMPONENT} />,

42 document.getElementById('todoExample')

43 );

docs/_js/html-jsx.js

+1 -1

@@ -78,5 +78,5 @@ var HELLO_COMPONENT = "\

78 }

79 });

81 - React.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));

81 + ReactDOM.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));

82 }());

docs/_js/live_editor.js

+5 -5

@@ -21,7 +21,7 @@ var CodeMirrorEditor = React.createClass({

21 componentDidMount: function() {

22 if (IS_MOBILE) return;

24 - this.editor = CodeMirror.fromTextArea(React.findDOMNode(this.refs.editor), {

24 + this.editor = CodeMirror.fromTextArea(ReactDOM.findDOMNode(this.refs.editor), {

25 mode: 'javascript',

26 lineNumbers: this.props.lineNumbers,

27 lineWrapping: true,

@@ -194,16 +194,16 @@ var ReactPlayground = React.createClass({

194 },

195

196 executeCode: function() {

197 - var mountNode = React.findDOMNode(this.refs.mount);

197 + var mountNode = ReactDOM.findDOMNode(this.refs.mount);

198

199 try {

200 - React.unmountComponentAtNode(mountNode);

200 + ReactDOM.unmountComponentAtNode(mountNode);

201 } catch (e) { }

202

203 try {

204 var compiledCode = this.compileCode();

205 if (this.props.renderCode) {

206 - React.render(

206 + ReactDOM.render(

207 <CodeMirrorEditor codeText={compiledCode} readOnly={true} />,

208 mountNode

209 );

@@ -212,7 +212,7 @@ var ReactPlayground = React.createClass({

212 }

213 } catch (err) {

214 this.setTimeout(function() {

215 - React.render(

215 + ReactDOM.render(

216 <div className="playgroundError">{err.toString()}</div>,

217 mountNode

218 );

docs/_layouts/default.html

@@ -31,6 +31,7 @@

31 <script src="/react/js/codemirror.js"></script>

32 <script src="/react/js/javascript.js"></script>

33 <script src="/react/js/react.js"></script>

34 + <script src="/react/js/react-dom.js"></script>

35 <script src="/react/js/babel-browser.min.js"></script>

36 <script src="/react/js/live_editor.js"></script>

37 </head>

docs/_posts/2015-10-01-react-render-and-top-level-api.md

+1 -1

@@ -1,5 +1,5 @@

1 ---

2 -title: "React.render and the Top Level React API"

2 +title: "ReactDOM.render and the Top Level React API"

3 author: jimandsebastian

4 ---

docs/docs/02-displaying-data.it-IT.md

+3 -3

@@ -48,7 +48,7 @@ var HelloWorld = React.createClass({

48 });

50 setInterval(function() {

51 - React.render(

51 + ReactDOM.render(

52 <HelloWorld date={new Date()} />,

53 document.getElementById('example')

54 );

@@ -107,7 +107,7 @@ JSX è completamente opzionale; non è necessario utilizzare JSX con React. Puoi

107 var child1 = React.createElement('li', null, 'Primo Contenuto di Testo');

108 var child2 = React.createElement('li', null, 'Secondo Contenuto di Testo');

109 var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

110 -React.render(root, document.getElementById('example'));

110 +ReactDOM.render(root, document.getElementById('example'));

111 ```

112

113 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

116 var Factory = React.createFactory(ComponentClass);

117 ...

118 var root = Factory({ custom: 'prop' });

119 -React.render(root, document.getElementById('example'));

119 +ReactDOM.render(root, document.getElementById('example'));

120 ```

121

122 React possiede già delle factory predefinite per i tag HTML comuni:

docs/docs/02-displaying-data.ja-JP.md

+3 -3

@@ -48,7 +48,7 @@ var HelloWorld = React.createClass({

48 });

50 setInterval(function() {

51 - React.render(

51 + ReactDOM.render(

52 <HelloWorld date={new Date()} />,

53 document.getElementById('example')

54 );

@@ -104,7 +104,7 @@ JSXは完全にオプションです。Reactと一緒にJSXを使う必要はあ

104 var child1 = React.createElement('li', null, 'First Text Content');

105 var child2 = React.createElement('li', null, 'Second Text Content');

106 var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

107 -React.render(root, document.getElementById('example'));

107 +ReactDOM.render(root, document.getElementById('example'));

108 ```

109 便利に書くために、カスタムコンポーネントで要素を作るために簡略した記法でファクトリー関数を作ることができます。

110

@@ -112,7 +112,7 @@ React.render(root, document.getElementById('example'));

112 var Factory = React.createFactory(ComponentClass);

113 ...

114 var root = Factory({ custom: 'prop' });

115 -React.render(root, document.getElementById('example'));

115 +ReactDOM.render(root, document.getElementById('example'));

116 ```

117

118 Reactはすでに、共通なHTMLのタグについてはビルトインの関数を持っています。

docs/docs/02-displaying-data.ko-KR.md

+3 -3

@@ -47,7 +47,7 @@ var HelloWorld = React.createClass({

47 });

49 setInterval(function() {

50 - React.render(

50 + ReactDOM.render(

51 <HelloWorld date={new Date()} />,

52 document.getElementById('example')

53 );

@@ -106,7 +106,7 @@ JSX는 완전히 선택적입니다. 당신은 React와 JSX를 함께 사용하

106 var child1 = React.createElement('li', null, 'First Text Content');

107 var child2 = React.createElement('li', null, 'Second Text Content');

108 var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

109 -React.render(root, document.getElementById('example'));

109 +ReactDOM.render(root, document.getElementById('example'));

110 ```

111

112 편의를 위하여, 당신은 팩토리 함수 헬퍼들을 이용해 커스텀 컴포넌트로부터 엘리먼트들을 만들 수 있습니다.

@@ -115,7 +115,7 @@ React.render(root, document.getElementById('example'));

115 var Factory = React.createFactory(ComponentClass);

116 ...

117 var root = Factory({ custom: 'prop' });

118 -React.render(root, document.getElementById('example'));

118 +ReactDOM.render(root, document.getElementById('example'));

119 ```

120

121 React는 이미 일반적인 HTML 태그에 대한 빌트인 팩토리를 가지고 있습니다.

docs/docs/02-displaying-data.md

+3 -3

@@ -48,7 +48,7 @@ var HelloWorld = React.createClass({

48 });

50 setInterval(function() {

51 - React.render(

51 + ReactDOM.render(

52 <HelloWorld date={new Date()} />,

53 document.getElementById('example')

54 );

@@ -107,7 +107,7 @@ JSX is completely optional; you don't have to use JSX with React. You can create

107 var child1 = React.createElement('li', null, 'First Text Content');

108 var child2 = React.createElement('li', null, 'Second Text Content');

109 var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

110 -React.render(root, document.getElementById('example'));

110 +ReactDOM.render(root, document.getElementById('example'));

111 ```

112

113 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

116 var Factory = React.createFactory(ComponentClass);

117 ...

118 var root = Factory({ custom: 'prop' });

119 -React.render(root, document.getElementById('example'));

119 +ReactDOM.render(root, document.getElementById('example'));

120 ```

121

122 React already has built-in factories for common HTML tags:

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

+3 -3

@@ -49,7 +49,7 @@ var HelloWorld = React.createClass({

49 });

51 setInterval(function() {

52 - React.render(

52 + ReactDOM.render(

53 <HelloWorld date={new Date()} />,

54 document.getElementById('example')

55 );

@@ -105,7 +105,7 @@ JSX 类似于 HTML，但不是完全一样。参考 [JSX 陷阱](/react/docs/jsx

105 ```javascript

106 var child = React.createElement('li', null, 'Text Content');

107 var root = React.createElement('ul', { className: 'my-list' }, child);

108 -React.render(root, document.getElementById('example'));

108 +ReactDOM.render(root, document.getElementById('example'));

109 ```

110

111 方便起见，你可以创建基于自定义组件的速记工厂方法。

@@ -114,7 +114,7 @@ React.render(root, document.getElementById('example'));

114 var Factory = React.createFactory(ComponentClass);

115 ...

116 var root = Factory({ custom: 'prop' });

117 -React.render(root, document.getElementById('example'));

117 +ReactDOM.render(root, document.getElementById('example'));

118 ```

119

120 React 已经为 HTML 标签提供内置工厂方法。

docs/docs/02.1-jsx-in-depth.it-IT.md

+2 -2

@@ -26,7 +26,7 @@ Per rendere untag HTML, usa nomi di tag minuscoli in JSX:

27 ```javascript

28 var myDivElement = <div className="foo" />;

29 -React.render(myDivElement, document.getElementById('example'));

29 +ReactDOM.render(myDivElement, document.getElementById('example'));

30 ```

32 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

34 ```javascript

35 var MyComponent = React.createClass({/*...*/});

36 var myElement = <MyComponent someProperty={true} />;

37 -React.render(myElement, document.getElementById('example'));

37 +ReactDOM.render(myElement, document.getElementById('example'));

38 ```

40 Il JSX di React utilizza la convenzione maiuscolo o minuscolo per distinguere tra classi di componenti locali e tag HTML.

docs/docs/02.1-jsx-in-depth.ja-JP.md

+2 -2

@@ -26,7 +26,7 @@ ReactはHTMLタグ（文字列）とReactコンポーネント（クラス）の

27 ```javascript

28 var myDivElement = <div className="foo" />;

29 -React.render(myDivElement, document.getElementById('example'));

29 +ReactDOM.render(myDivElement, document.getElementById('example'));

30 ```

32 以下のように大文字から始まるローカル変数を作成するだけで、Reactのコンポーネントをレンダリングできます。

@@ -34,7 +34,7 @@ React.render(myDivElement, document.getElementById('example'));

34 ```javascript

35 var MyComponent = React.createClass({/*...*/});

36 var myElement = <MyComponent someProperty={true} />;

37 -React.render(myElement, document.getElementById('example'));

37 +ReactDOM.render(myElement, document.getElementById('example'));

38 ```

40 ReactのJSXは大文字と小文字を使うことで、ローカルのコンポーネントクラスとHTMLタグを識別する習慣があります。

docs/docs/02.1-jsx-in-depth.ko-KR.md

+2 -2

@@ -26,7 +26,7 @@ HTML 태그를 렌더하려면, 그냥 JSX에 소문자 태그를 사용하세

27 ```javascript

28 var myDivElement = <div className="foo" />;

29 -React.render(myDivElement, document.getElementById('example'));

29 +ReactDOM.render(myDivElement, document.getElementById('example'));

30 ```

32 React 컴포넌트를 렌더하려면, 대문자로 시작하는 로컬 변수를 만드세요.

@@ -34,7 +34,7 @@ React 컴포넌트를 렌더하려면, 대문자로 시작하는 로컬 변수

34 ```javascript

35 var MyComponent = React.createClass({/*...*/});

36 var myElement = <MyComponent someProperty={true} />;

37 -React.render(myElement, document.getElementById('example'));

37 +ReactDOM.render(myElement, document.getElementById('example'));

38 ```

40 React JSX는 대소문자를 로컬 컴포넌트 클래스와 HTML 태그를 구별하는 컨벤션으로 사용합니다.

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

+2 -2

@@ -26,7 +26,7 @@ To render a HTML tag, just use lower-case tag names in JSX:

27 ```javascript

28 var myDivElement = <div className="foo" />;

29 -React.render(myDivElement, document.getElementById('example'));

29 +ReactDOM.render(myDivElement, document.getElementById('example'));

30 ```

32 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

34 ```javascript

35 var MyComponent = React.createClass({/*...*/});

36 var myElement = <MyComponent someProperty={true} />;

37 -React.render(myElement, document.getElementById('example'));

37 +ReactDOM.render(myElement, document.getElementById('example'));

38 ```

40 React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.

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

+2 -2

@@ -28,7 +28,7 @@ React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

29 ```javascript

30 var myDivElement = <div className="foo" />;

31 -React.render(myDivElement, document.getElementById('example'));

31 +ReactDOM.render(myDivElement, document.getElementById('example'));

32 ```

34 要渲染 React 组件，只需创建一个大写字母开头的本地变量。

@@ -36,7 +36,7 @@ React.render(myDivElement, document.getElementById('example'));

36 ```javascript

37 var MyComponent = React.createClass({/*...*/});

38 var myElement = <MyComponent someProperty={true} />;

39 -React.render(myElement, document.getElementById('example'));

39 +ReactDOM.render(myElement, document.getElementById('example'));

40 ```

42 React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。

docs/docs/03-interactivity-and-dynamic-uis.it-IT.md

+1 -1

@@ -29,7 +29,7 @@ var LikeButton = React.createClass({

29 }

30 });

32 -React.render(

32 +ReactDOM.render(

33 <LikeButton />,

34 document.getElementById('example')

35 );

docs/docs/03-interactivity-and-dynamic-uis.ja-JP.md

+1 -1

@@ -29,7 +29,7 @@ var LikeButton = React.createClass({

29 }

30 });

32 -React.render(

32 +ReactDOM.render(

33 <LikeButton />,

34 document.getElementById('example')

35 );

docs/docs/03-interactivity-and-dynamic-uis.ko-KR.md

+1 -1

@@ -29,7 +29,7 @@ var LikeButton = React.createClass({

29 }

30 });

32 -React.render(

32 +ReactDOM.render(

33 <LikeButton />,

34 document.getElementById('example')

35 );

docs/docs/03-interactivity-and-dynamic-uis.md

+1 -1

@@ -29,7 +29,7 @@ var LikeButton = React.createClass({

29 }

30 });

32 -React.render(

32 +ReactDOM.render(

33 <LikeButton />,

34 document.getElementById('example')

35 );

docs/docs/03-interactivity-and-dynamic-uis.zh-CN.md

+1 -1

@@ -29,7 +29,7 @@ var LikeButton = React.createClass({

29 }

30 });

32 -React.render(

32 +ReactDOM.render(

33 <LikeButton />,

34 document.getElementById('example')

35 );

docs/docs/04-multiple-components.it-IT.md

+1 -1

@@ -48,7 +48,7 @@ var ProfileLink = React.createClass({

48 }

49 });

51 -React.render(

51 +ReactDOM.render(

52 <Avatar username="pwh" />,

53 document.getElementById('example')

54 );

docs/docs/04-multiple-components.ja-JP.md

+1 -1

@@ -46,7 +46,7 @@ var ProfileLink = React.createClass({

46 }

47 });

49 -React.render(

49 +ReactDOM.render(

50 <Avatar username="pwh" />,

51 document.getElementById('example')

52 );

docs/docs/04-multiple-components.ko-KR.md

+1 -1

@@ -48,7 +48,7 @@ var ProfileLink = React.createClass({

48 }

49 });

51 -React.render(

51 +ReactDOM.render(

52 <Avatar username="pwh" />,

53 document.getElementById('example')

54 );

docs/docs/04-multiple-components.md

+1 -1

@@ -48,7 +48,7 @@ var ProfileLink = React.createClass({

48 }

49 });

51 -React.render(

51 +ReactDOM.render(

52 <Avatar username="pwh" />,

53 document.getElementById('example')

54 );

docs/docs/04-multiple-components.zh-CN.md

+1 -1

@@ -47,7 +47,7 @@ var ProfileLink = React.createClass({

47 }

48 });

50 -React.render(

50 +ReactDOM.render(

51 <Avatar username="pwh" />,

52 document.getElementById('example')

53 );

docs/docs/05-reusable-components.it-IT.md

+5 -5

@@ -111,7 +111,7 @@ var CheckLink = React.createClass({

111 }

112 });

113

114 -React.render(

114 +ReactDOM.render(

115 <CheckLink href="/checked.html">

116 Clicca qui!

117 </CheckLink>,

@@ -179,7 +179,7 @@ var TickTock = React.createClass({

179 }

180 });

181

182 -React.render(

182 +ReactDOM.render(

183 <TickTock />,

184 document.getElementById('example')

185 );

@@ -197,7 +197,7 @@ class HelloMessage extends React.Component {

197 return <div>Ciao {this.props.name}</div>;

198 }

199 }

200 -React.render(<HelloMessage name="Sebastian" />, mountNode);

200 +ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);

201 ```

202

203 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

243 function HelloMessage(props) {

244 return <div>Ciao {props.name}</div>;

245 }

246 -React.render(<HelloMessage name="Sebastian" />, mountNode);

246 +ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);

247 ```

248

249 Oppure usando la nuova sintassi freccia di ES6:

250

251 ```javascript

252 var HelloMessage = (props) => <div>Ciao {props.name}</div>;

253 -React.render(<HelloMessage name="Sebastian" />, mountNode);

253 +ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);

254 ```

255

256

docs/docs/05-reusable-components.ja-JP.md

+3 -3

@@ -107,7 +107,7 @@ var CheckLink = React.createClass({

107 }

108 });

109

110 -React.render(

110 +ReactDOM.render(

111 <CheckLink href="/checked.html">

112 Click here!

113 </CheckLink>,

@@ -175,7 +175,7 @@ var TickTock = React.createClass({

175 }

176 });

177

178 -React.render(

178 +ReactDOM.render(

179 <TickTock />,

180 document.getElementById('example')

181 );

@@ -193,7 +193,7 @@ class HelloMessage extends React.Component {

193 return <div>Hello {this.props.name}</div>;

194 }

195 }

196 -React.render(<HelloMessage name="Sebastian" />, mountNode);

196 +ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);

197 ```

198

199 APIは `getInitialState` という例外を除き、 `React.createClass` と同じです。APIが異なっている `getInitialState` メソッドを提供する代わりに、コンストラクタの中に `state` プロパティをセットします。

docs/docs/05-reusable-components.ko-KR.md

+3 -3

@@ -108,7 +108,7 @@ var CheckLink = React.createClass({

108 }

109 });

110

111 -React.render(

111 +ReactDOM.render(

112 <CheckLink href="/checked.html">

113 Click here!

114 </CheckLink>,

@@ -176,7 +176,7 @@ var TickTock = React.createClass({

176 }

177 });

178

179 -React.render(

179 +ReactDOM.render(

180 <TickTock />,

181 document.getElementById('example')

182 );

@@ -195,7 +195,7 @@ class HelloMessage extends React.Component {

195 return <div>Hello {this.props.name}</div>;

196 }

197 }

198 -React.render(<HelloMessage name="Sebastian" />, mountNode);

198 +ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);

199 ```

200

201 API는 `getInitialState`를 제외하고 `React.createClass`와 유사합니다. 별도의 `getInitialState` 메소드 대신에, 필요한 `state` 프로퍼티를 생성자에서 설정할 수 있습니다.

docs/docs/05-reusable-components.md

+5 -5

@@ -110,7 +110,7 @@ var CheckLink = React.createClass({

110 }

111 });

112

113 -React.render(

113 +ReactDOM.render(

114 <CheckLink href="/checked.html">

115 Click here!

116 </CheckLink>,

@@ -179,7 +179,7 @@ var TickTock = React.createClass({

179 }

180 });

181

182 -React.render(

182 +ReactDOM.render(

183 <TickTock />,

184 document.getElementById('example')

185 );

@@ -197,7 +197,7 @@ class HelloMessage extends React.Component {

197 return <div>Hello {this.props.name}</div>;

198 }

199 }

200 -React.render(<HelloMessage name="Sebastian" />, mountNode);

200 +ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);

201 ```

202

203 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

243 function HelloMessage(props) {

244 return <div>Hello {props.name}</div>;

245 }

246 -React.render(<HelloMessage name="Sebastian" />, mountNode);

246 +ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);

247 ```

248

249 Or using the new ES6 arrow syntax:

250

251 ```javascript

252 var HelloMessage = (props) => <div>Hello {props.name}</div>;

253 -React.render(<HelloMessage name="Sebastian" />, mountNode);

253 +ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);

254 ```

255

256

docs/docs/05-reusable-components.zh-CN.md

+3 -3

@@ -105,7 +105,7 @@ var CheckLink = React.createClass({

105 }

106 });

107

108 -React.render(

108 +ReactDOM.render(

109 <CheckLink href="/checked.html">

110 Click here!

111 </CheckLink>,

@@ -174,7 +174,7 @@ var TickTock = React.createClass({

174 }

175 });

176

177 -React.render(

177 +ReactDOM.render(

178 <TickTock />,

179 document.getElementById('example')

180 );

@@ -192,7 +192,7 @@ class HelloMessage extends React.Component {

192 return <div>Hello {this.props.name}</div>;

193 }

194 }

195 -React.render(<HelloMessage name="Sebastian" />, mountNode);

195 +ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);

196 ```

197

198 API近似于 `React.createClass` 除了 `getInitialState`。你应该在构造函数里设置你的`state`，而不是提供一个单独的 `getInitialState` 方法。

docs/docs/06-transferring-props.it-IT.md

+2 -2

@@ -37,7 +37,7 @@ var FancyCheckbox = React.createClass({

37 );

38 }

39 });

40 -React.render(

40 +ReactDOM.render(

41 <FancyCheckbox checked={true} onClick={console.log.bind(console)}>

42 Ciao mondo!

43 </FancyCheckbox>,

@@ -74,7 +74,7 @@ var FancyCheckbox = React.createClass({

74 );

75 }

76 });

77 -React.render(

77 +ReactDOM.render(

78 <FancyCheckbox checked={true} onClick={console.log.bind(console)}>

79 Ciao mondo!

80 </FancyCheckbox>,

docs/docs/06-transferring-props.ja-JP.md

+2 -2

@@ -39,7 +39,7 @@ var FancyCheckbox = React.createClass({

39 );

40 }

41 });

42 -React.render(

42 +ReactDOM.render(

43 <FancyCheckbox checked={true} onClick={console.log.bind(console)}>

44 Hello world!

45 </FancyCheckbox>,

@@ -75,7 +75,7 @@ var FancyCheckbox = React.createClass({

75 );

76 }

77 });

78 -React.render(

78 +ReactDOM.render(

79 <FancyCheckbox checked={true} onClick={console.log.bind(console)}>

80 Hello world!

81 </FancyCheckbox>,

docs/docs/06-transferring-props.ko-KR.md

+2 -2

@@ -37,7 +37,7 @@ var FancyCheckbox = React.createClass({

37 );

38 }

39 });

40 -React.render(

40 +ReactDOM.render(

41 <FancyCheckbox checked={true} onClick={console.log.bind(console)}>

42 세상아 안녕!

43 </FancyCheckbox>,

@@ -74,7 +74,7 @@ var FancyCheckbox = React.createClass({

74 );

75 }

76 });

77 -React.render(

77 +ReactDOM.render(

78 <FancyCheckbox checked={true} onClick={console.log.bind(console)}>

79 세상아 안녕!

80 </FancyCheckbox>,

docs/docs/06-transferring-props.md

+2 -2

@@ -37,7 +37,7 @@ var FancyCheckbox = React.createClass({

37 );

38 }

39 });

40 -React.render(

40 +ReactDOM.render(

41 <FancyCheckbox checked={true} onClick={console.log.bind(console)}>

42 Hello world!

43 </FancyCheckbox>,

@@ -74,7 +74,7 @@ var FancyCheckbox = React.createClass({

74 );

75 }

76 });

77 -React.render(

77 +ReactDOM.render(

78 <FancyCheckbox checked={true} onClick={console.log.bind(console)}>

79 Hello world!

80 </FancyCheckbox>,

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

+2 -2

@@ -37,7 +37,7 @@ var FancyCheckbox = React.createClass({

37 );

38 }

39 });

40 -React.render(

40 +ReactDOM.render(

41 <FancyCheckbox checked={true} onClick={console.log.bind(console)}>

42 Hello world!

43 </FancyCheckbox>,

@@ -74,7 +74,7 @@ var FancyCheckbox = React.createClass({

74 );

75 }

76 });

77 -React.render(

77 +ReactDOM.render(

78 <FancyCheckbox checked={true} onClick={console.log.bind(console)}>

79 Hello world!

80 </FancyCheckbox>,

docs/docs/08-working-with-the-browser.ja-JP.md

+3 -3

@@ -18,7 +18,7 @@ ReactはDOMと直接対話を行わないため、とても速いです。React

19 ## 参照とfindDOMNode()

21 -ブラウザと相互に影響するために、DOMノードへの参照が必要になるでしょう。ReactはコンポーネントのDOMノードへの参照を得ることができる `React.findDOMNode(component)` 関数を持っています。

21 +ブラウザと相互に影響するために、DOMノードへの参照が必要になるでしょう。ReactはコンポーネントのDOMノードへの参照を得ることができる `ReactDOM.findDOMNode(component)` 関数を持っています。

23 > 注意:

24 > `findDOMNode()` はマウントされたコンポーネントの上でのみ動きます（これは、DOMに配置されたコンポーネントという意味です）。まだマウントされていない（まだ作成されていないコンポーネントの上で `render()` の `findDOMNode()` を呼ぶようなものです）コンポーネントの上でこれを呼ぼうとした場合、例外がスローされます。

@@ -29,7 +29,7 @@ Reactのコンポーネントへの参照を得るためには、現在のReact

29 var MyComponent = React.createClass({

30 handleClick: function() {

31 // 生のDOMのAPIを使ってテキスト入力に明確にフォーカスします。

32 - React.findDOMNode(this.refs.myTextInput).focus();

32 + ReactDOM.findDOMNode(this.refs.myTextInput).focus();

33 },

34 render: function() {

35 // この参照属性はコンポーネントがマウントされた時に、

@@ -47,7 +47,7 @@ var MyComponent = React.createClass({

47 }

48 });

50 -React.render(

50 +ReactDOM.render(

51 <MyComponent />,

52 document.getElementById('example')

53 );

docs/docs/08-working-with-the-browser.ko-KR.md

+3 -3

@@ -20,7 +20,7 @@ React는 DOM을 직접 다루지 않기 때문에 굉장히 빠릅니다. React

21 ## Refs와 findDOMNode()

23 -브라우저와 상호 작용하려면 DOM 노드에 대한 참조가 필요합니다. React는 `React.findDOMNode(component)` 함수를 갖고 있으며, 이를 통해서 컴포넌트의 DOM 노드의 참조를 얻을 수 있습니다.

23 +브라우저와 상호 작용하려면 DOM 노드에 대한 참조가 필요합니다. React는 `ReactDOM.findDOMNode(component)` 함수를 갖고 있으며, 이를 통해서 컴포넌트의 DOM 노드의 참조를 얻을 수 있습니다.

25 > 주의:

26 >

@@ -32,7 +32,7 @@ React 컴포넌트에 대한 참조는 현재의 React 컴포넌트를 위해 `t

32 var MyComponent = React.createClass({

33 handleClick: function() {

34 // raw DOM API를 사용해 명시적으로 텍스트 인풋을 포커스 합니다.

35 - React.findDOMNode(this.refs.myTextInput).focus();

35 + ReactDOM.findDOMNode(this.refs.myTextInput).focus();

36 },

37 render: function() {

38 // ref 어트리뷰트는 컴포넌트가 마운트되면 그에 대한 참조를 this.refs에 추가합니다.

@@ -49,7 +49,7 @@ var MyComponent = React.createClass({

49 }

50 });

52 -React.render(

52 +ReactDOM.render(

53 <MyComponent />,

54 document.getElementById('example')

55 );

docs/docs/08-working-with-the-browser.zh-CN.md

+3 -3

@@ -20,7 +20,7 @@ React如此快速是因为它从不直接操作DOM。React维持了一个快速

21 ## Refs 和 findDOMNode()

23 -为了与浏览器互动，你需要一个指向DOM node的引用。React有一个函数`React.findDOMNode(component)` ，你能调用以得到一个指向指向组件的DOM node的引用。

23 +为了与浏览器互动，你需要一个指向DOM node的引用。React有一个函数`ReactDOM.findDOMNode(component)` ，你能调用以得到一个指向指向组件的DOM node的引用。

25 > 注意:

26 >

@@ -32,7 +32,7 @@ React如此快速是因为它从不直接操作DOM。React维持了一个快速

32 var MyComponent = React.createClass({

33 handleClick: function() {

34 // 明确的强制text input使用原生DOM API。

35 - React.findDOMNode(this.refs.myTextInput).focus();

35 + ReactDOM.findDOMNode(this.refs.myTextInput).focus();

36 },

37 render: function() {

38 // 当组件被挂载时

@@ -50,7 +50,7 @@ var MyComponent = React.createClass({

50 }

51 });

53 -React.render(

53 +ReactDOM.render(

54 <MyComponent />,

55 document.getElementById('example')

56 );

docs/docs/08.1-more-about-ref-zh-CN.md

+3 -3

@@ -83,7 +83,7 @@ React 假设你可以向任何的从`render()` 中返回的组件附加一个特

83 this.refs.myInput

84 ```

86 -通过调用`React.findDOMNode(this.refs.myInput)` 你可以直接方法这个组建的DOM。

86 +通过调用`this.refs.myInput` 你可以直接方法这个组建的DOM。

89 ## ref 回调属性

@@ -132,7 +132,7 @@ React 假设你可以向任何的从`render()` 中返回的组件附加一个特

132 // 清空input

133 this.setState({userInput: ''}, function() {

134 // 当这个组件被再次渲染之后，这个代码执行

135 - React.findDOMNode(this.refs.theInput).focus(); //获取焦点了！

135 + this.refs.theInput.focus(); //获取焦点了！

136 });

137 },

138 render: function() {

@@ -163,7 +163,7 @@ React 假设你可以向任何的从`render()` 中返回的组件附加一个特

163

164 - 在你的组件类中你可以定义任意的公开方法（例如在一个Typeahead定义一个reset方法），然后通过refs来调用这些方法（像这样`this.refs.myTypeahead.reset()`)。

165

166 -- 执行 DOM操作，总是要求诸如`<input />` 这样的一个“原生”组件，并通过`React.findDOMNode(this.refs.myInput)` 来访问她的低层的MOD 节点。Refs是可以做成这个事的唯一的实践可行的方法。

166 +- 执行 DOM操作，总是要求诸如`<input />` 这样的一个“原生”组件，并通过`this.refs.myInput` 来访问她的低层的MOD 节点。Refs是可以做成这个事的唯一的实践可行的方法。

167

168 - Refs自动管理！如果孩子被销毁了，它的ref也被销毁。在这里不用担心内存（除非你做了一些疯狂的事情来自己保持一个引用）。

169

docs/docs/08.1-more-about-refs.it-IT.md

+9 -9

@@ -9,13 +9,13 @@ Dopo aver costruito il tuo componente, potresti trovarti nella situazione di vol

10 Vediamo come ottenere un ref, e quindi passiamo ad un esempio completo.

12 -## Il ref restituito da React.render

12 +## Il ref restituito da ReactDOM.render

14 -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)).

14 +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)).

17 ```js

18 -var myComponent = React.render(<MyComponent />, myContainer);

18 +var myComponent = ReactDOM.render(<MyComponent />, myContainer);

19 ```

21 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 = <MyComponent />; // Questo è un semplice ReactElement.

26 // Qui va del codice...

28 -var myComponentInstance = React.render(myComponentElement, myContainer);

28 +var myComponentInstance = ReactDOM.render(myComponentElement, myContainer);

29 myComponentInstance.doSomething();

30 ```

@@ -66,7 +66,7 @@ oppure usando una funzione freccia ES6:

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

69 -Puoi accedere al nodo DOM del componente direttamente chiamando `React.findDOMNode(argomentoDellaTuaCallback)`.

69 +Puoi accedere al nodo DOM del componente direttamente chiamando `ReactDOM.findDOMNode(argomentoDellaTuaCallback)`.

72 ## L'Attributo ref Come Stringa

@@ -85,7 +85,7 @@ React supporta anche l'uso di una stringa (anziché una callback) come propriet

85 this.refs.myInput

86 ```

88 - Puoi accedere direttamente al nodo DOM del componente chiamando `React.findDOMNode(this.refs.myInput)`.

88 + Puoi accedere direttamente al nodo DOM del componente chiamando `ReactDOM.findDOMNode(this.refs.myInput)`.

91 ## Un Esempio Completo

@@ -113,7 +113,7 @@ var MyComponent = React.createClass({

113 }

114 });

115

116 -React.render(

116 +ReactDOM.render(

117 <MyComponent />,

118 document.getElementById('example')

119 );

@@ -121,7 +121,7 @@ React.render(

121

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

123

124 -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).

124 +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).

125

126 ## Riassunto

127

@@ -130,7 +130,7 @@ I riferimenti `ref` sono la maniera corretta di inviare un messaggio a una preci

130 ### Benefici:

131

132 - 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()`).

133 -- Effettuare misure sul DOM richiede quasi sempre l'accesso ad un componente "nativo" come `<input />` 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.

133 +- Effettuare misure sul DOM richiede quasi sempre l'accesso ad un componente "nativo" come `<input />` 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.

134 - 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).

135

136 ### Precauzioni:

docs/docs/08.1-more-about-refs.ja-JP.md

+4 -4

@@ -81,7 +81,7 @@ Reactは `render()` からの出力であるコンポーネントであれば何

81 this.refs.myInput

82 ```

84 -`React.findDOMNode(this.refs.myInput)` を呼ぶことで、コンポーネントのDOMノードに直接アクセスできる。

84 +`ReactDOM.findDOMNode(this.refs.myInput)` を呼ぶことで、コンポーネントのDOMノードに直接アクセスできる。

86 ## 参照のコールバック属性

@@ -90,7 +90,7 @@ Reactは `render()` からの出力であるコンポーネントであれば何

90 これは、以下のように、 `render` でリターンされてきたものに `ref` 属性をアサインするのと同じくらい簡単です。

92 ```html

93 - <input ref={ function(component){ React.findDOMNode(component).focus();} } />

93 + <input ref={ function(component){ ReactDOM.findDOMNode(component).focus();} } />

94 ```

@@ -108,7 +108,7 @@ Reactは `render()` からの出力であるコンポーネントであれば何

108 // inputをクリアする

109 this.setState({userInput: ''}, function() {

110 // このコードはコンポーネントが再度レンダリングされた後に実行されます。

111 - React.findDOMNode(this.refs.theInput).focus(); // どーん！フォーカスされました！

111 + ReactDOM.findDOMNode(this.refs.theInput).focus(); // どーん！フォーカスされました！

112 });

113 },

114 render: function() {

@@ -137,7 +137,7 @@ Reactは `render()` からの出力であるコンポーネントであれば何

137 ### 利益:

138

139 - コンポーネントクラス（例えば、Typeaheadのリセットメソッドのようなもの）にパブリックなメソッドを定義できる。また、参照（例えば、 `this.refs.myTypeahead.reset()` のように）を通してそれらのパブリックなメソッドを呼べる。

140 -- DOMの計測を行うことは大体いつも `<input />` のような「ネイティブの」コンポーネントや `React.findDOMNode(this.refs.myInput)` を通した根本のDOMノードにアクセスすることを必要とします。参照は、こういったことを期待通りに行う唯一の実用的な方法です。

140 +- DOMの計測を行うことは大体いつも `<input />` のような「ネイティブの」コンポーネントや `ReactDOM.findDOMNode(this.refs.myInput)` を通した根本のDOMノードにアクセスすることを必要とします。参照は、こういったことを期待通りに行う唯一の実用的な方法です。

141 - 参照は自動的に管理されます！もし子要素が削除されたら、その参照もまた削除されます。メモリに関しての心配は要りません（あなた自身が参照を維持するために何かおかしなことを行っていなければ）。

142

143 ### 警告:

docs/docs/08.1-more-about-refs.ko-KR.md

+4 -4

@@ -84,7 +84,7 @@ React는 `render()`로 출력된 컴포넌트에 추가할 수 있는 아주 특

84 this.refs.myInput

85 ```

87 - `React.findDOMNode(this.refs.myInput)`를 호출해 컴포넌트의 DOM 노드에 접근할 수 있습니다.

87 + `this.refs.myInput`를 호출해 컴포넌트의 DOM 노드에 접근할 수 있습니다.

89 ## ref 콜백 어트리뷰트

@@ -93,7 +93,7 @@ React는 `render()`로 출력된 컴포넌트에 추가할 수 있는 아주 특

93 `render`에서 반환한 모든 것에 간단하게 `ref` 어트리뷰트를 할당할 수 있습니다:

95 ```html

96 - <input ref={ function(component){ React.findDOMNode(component).focus();} } />

96 + <input ref={ function(component){component.focus();} } />

97 ```

99 ## 예제 완성하기

@@ -110,7 +110,7 @@ React는 `render()`로 출력된 컴포넌트에 추가할 수 있는 아주 특

110 // input을 비워준다

111 this.setState({userInput: ''}, function() {

112 // 이 코드는 컴포넌트가 다시 렌더 된 다음 실행됩니다

113 - React.findDOMNode(this.refs.theInput).focus(); // 짠! 포커스 됨!

113 + this.refs.theInput.focus(); // 짠! 포커스 됨!

114 });

115 },

116 render: function() {

@@ -140,7 +140,7 @@ Refs는 반응적인 `props`와 `state` 스트리밍을 통해서는 불편했

140 ### 이점:

141

142 - 컴포넌트 클래스에 public 메소드(ex. Typeahead의 reset)를 선언할 수 있으며 refs를 통해 그를 호출할 수 있습니다. (ex. `this.refs.myTypeahead.reset()`)

143 -- DOM을 측정하기 위해서는 거의 항상 `<input />` 같은 "기본" 컴포넌트를 다루고 `React.findDOMNode(this.refs.myInput)`를 통해 그 기저의 DOM 노드에 접근해야 합니다. Refs는 이 일을 확실하게 수행하는 몇 안 되는 실용적인 방법의 하나입니다.

143 +- DOM을 측정하기 위해서는 거의 항상 `<input />` 같은 "기본" 컴포넌트를 다루고 `this.refs.myInput`를 통해 그 기저의 DOM 노드에 접근해야 합니다. Refs는 이 일을 확실하게 수행하는 몇 안 되는 실용적인 방법의 하나입니다.

144 - Refs는 자동으로 관리합니다! 자식이 파괴되면, 그의 ref도 마찬가지로 파괴됩니다. 참조를 유지하기 위해 뭔가 미친 짓을 하지 않는 한, 메모리 걱정은 하지 않아도 됩니다.

145

146 ### 주의:

docs/docs/08.1-more-about-refs.md

+9 -9

@@ -9,13 +9,13 @@ After building your component, you may find yourself wanting to "reach out" and

10 Let's look at how to get a ref, and then dive into a complete example.

12 -## The ref returned from React.render

12 +## The ref returned from ReactDOM.render

14 -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)).

14 +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)).

17 ```js

18 -var myComponent = React.render(<MyComponent />, myContainer);

18 +var myComponent = ReactDOM.render(<MyComponent />, myContainer);

19 ```

21 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 = <MyComponent />; // This is just a ReactElement.

26 // Some code here...

28 -var myComponentInstance = React.render(myComponentElement, myContainer);

28 +var myComponentInstance = ReactDOM.render(myComponentElement, myContainer);

29 myComponentInstance.doSomething();

30 ```

@@ -65,7 +65,7 @@ or using an ES6 arrow function:

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

68 -You can access the component's DOM node directly by calling `React.findDOMNode(argumentToYourCallback)`.

68 +You can access the component's DOM node directly by calling `ReactDOM.findDOMNode(argumentToYourCallback)`.

71 ## The ref String Attribute

@@ -84,7 +84,7 @@ React also supports using a string (instead of a callback) as a ref prop on any

84 this.refs.myInput

85 ```

87 - You can access the component's DOM node directly by calling `React.findDOMNode(this.refs.myInput)`.

87 + You can access the component's DOM node directly by calling `ReactDOM.findDOMNode(this.refs.myInput)`.

90 ## A Complete Example

@@ -112,7 +112,7 @@ var MyComponent = React.createClass({

112 }

113 });

114

115 -React.render(

115 +ReactDOM.render(

116 <MyComponent />,

117 document.getElementById('example')

118 );

@@ -120,7 +120,7 @@ React.render(

120

121 In this example, we get a reference to the text input **backing instance** and we call `focus()` when the button is clicked.

122

123 -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).

123 +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).

124

125 ## Summary

126

@@ -129,7 +129,7 @@ Refs are a great way to send a message to a particular child instance in a way t

129 ### Benefits:

130

131 - 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()`).

132 -- Performing DOM measurements almost always requires reaching out to a "native" component such as `<input />` and accessing its underlying DOM node via `React.findDOMNode(this.refs.myInput)`. Refs are one of the only practical ways of doing this reliably.

132 +- Performing DOM measurements almost always requires reaching out to a "native" component such as `<input />` and accessing its underlying DOM node via `ReactDOM.findDOMNode(this.refs.myInput)`. Refs are one of the only practical ways of doing this reliably.

133 - 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).

134

135 ### Cautions:

docs/docs/08.1-more-about-refs.zh-CN.md

+3 -3

@@ -83,7 +83,7 @@ React支持一种非常特殊的属性，你可以附加到任何从`render()`

83 this.refs.myInput

84 ```

86 - 你可以直接通过调用`React.findDOMNode(this.refs.myInput)` 访问组件的DOM node。

86 + 你可以直接通过调用`ReactDOM.findDOMNode(this.refs.myInput)` 访问组件的DOM node。

89 ## ref 回调属性

@@ -133,7 +133,7 @@ React支持一种非常特殊的属性，你可以附加到任何从`render()`

133 // Clear the input

134 this.setState({userInput: ''}, function() {

135 // This code executes after the component is re-rendered

136 - React.findDOMNode(this.refs.theInput).focus(); // Boom! Focused!

136 + ReactDOM.findDOMNode(this.refs.theInput).focus(); // Boom! Focused!

137 });

138 },

139 render: function() {

@@ -163,7 +163,7 @@ Refs是一种很好的发送消息给特定子实例(通过流式的Reactive `pr

163 ### 优点:

164

165 - 你可以在你的组件类里定义任何的公开方法（比如在一个Typeahead的重置方法）然后通过refs调用那些公开方法（比如`this.refs.myTypeahead.reset()`）。

166 -- 实行DOM测量几乎总是需要接触到"原生" 组件比如 `<input />` 并且`React.findDOMNode(this.refs.myInput)`通过访问它的底层DOM 节点。 Refs 是唯一一个可靠的完成这件事的实际方式。

166 +- 实行DOM测量几乎总是需要接触到"原生" 组件比如 `<input />` 并且`ReactDOM.findDOMNode(this.refs.myInput)`通过访问它的底层DOM 节点。 Refs 是唯一一个可靠的完成这件事的实际方式。

167 - Refs 是为你自动管理的！如果子级被销毁了，它的ref也同样为你销毁了。这里不用担心内存（除非你做了一些疯狂的事情来自己保持一份引用）。

168

169 ### 注意事项:

docs/docs/09-tooling-integration.it-IT.md

+2 -2

@@ -48,7 +48,7 @@ var HelloMessage = React.createClass({

48 }

49 });

51 -React.render(<HelloMessage name="John" />, mountNode);

51 +ReactDOM.render(<HelloMessage name="John" />, mountNode);

52 $ babel test.jsx

53 "use strict";

@@ -65,7 +65,7 @@ var HelloMessage = React.createClass({

65 }

66 });

68 -React.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

68 +ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

69 ```

docs/docs/09-tooling-integration.md

+2 -2

@@ -48,7 +48,7 @@ var HelloMessage = React.createClass({

48 }

49 });

51 -React.render(<HelloMessage name="John" />, mountNode);

51 +ReactDOM.render(<HelloMessage name="John" />, mountNode);

52 $ babel test.jsx

53 "use strict";

@@ -65,7 +65,7 @@ var HelloMessage = React.createClass({

65 }

66 });

68 -React.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

68 +ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

69 ```

docs/docs/09-tooling-integration.zh-CN.md

+2 -2

@@ -48,7 +48,7 @@ var HelloMessage = React.createClass({

48 }

49 });

51 -React.render(<HelloMessage name="John" />, mountNode);

51 +ReactDOM.render(<HelloMessage name="John" />, mountNode);

52 $ babel test.jsx

53 "use strict";

@@ -65,7 +65,7 @@ var HelloMessage = React.createClass({

65 }

66 });

68 -React.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

68 +ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

69 ```

docs/docs/10.4-test-utils.it-IT.md

+3 -3

@@ -22,14 +22,14 @@ Simula l'inoltro di un evento su un nodo DOM con dei dati dell'evento opzionali

22 **Cliccare un elemento**

24 ```javascript

25 -var node = React.findDOMNode(this.refs.button);

25 +var node = ReactDOM.findDOMNode(this.refs.button);

26 React.addons.TestUtils.Simulate.click(node);

27 ```

29 **Cambiare il valore di un campo di input e in seguito premere INVIO**

31 ```javascript

32 -var node = React.findDOMNode(this.refs.input);

32 +var node = ReactDOM.findDOMNode(this.refs.input);

33 node.value = 'giraffe'

34 React.addons.TestUtils.Simulate.change(node);

35 React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});

@@ -204,7 +204,7 @@ shallowRenderer.render(

204 )

205 ```

206

207 -Simile a `React.render`.

207 +Simile a `ReactDOM.render`.

208

209 ```javascript

210 ReactComponent shallowRenderer.getRenderOutput()

docs/docs/10.4-test-utils.ja-JP.md

+2 -2

@@ -19,7 +19,7 @@ Simulate.{eventName}(DOMElement element, object eventData)

19 使用例:

21 ```javascript

22 -var node = React.findDOMNode(this.refs.input);

22 +var node = ReactDOM.findDOMNode(this.refs.input);

23 React.addons.TestUtils.Simulate.click(node);

24 React.addons.TestUtils.Simulate.change(node, {target: {value: 'Hello, world'}});

25 React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"});

@@ -154,7 +154,7 @@ ReactShallowRenderer createRenderer()

154 shallowRenderer.render(ReactElement element)

155 ```

156

157 -`React.render` に同様。

157 +`ReactDOM.render` に同様。

158

159 ```javascript

160 ReactComponent shallowRenderer.getRenderOutput()

docs/docs/10.4-test-utils.ko-KR.md

+2 -2

@@ -19,7 +19,7 @@ DOM 노드에 이벤트 디스패치하는 것을 시뮬레이트합니다. 선

19 사용 예:

21 ```javascript

22 -var node = React.findDOMNode(this.refs.input);

22 +var node = ReactDOM.findDOMNode(this.refs.input);

23 React.addons.TestUtils.Simulate.click(node);

24 React.addons.TestUtils.Simulate.change(node, {target: {value: 'Hello, world'}});

25 React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"});

@@ -152,7 +152,7 @@ ReactShallowRenderer createRenderer()

152 shallowRenderer.render(ReactElement element)

153 ```

154

155 -`React.render`와 유사합니다.

155 +`ReactDOM.render`와 유사합니다.

156

157 ```javascript

158 ReactComponent shallowRenderer.getRenderOutput()

docs/docs/10.4-test-utils.md

+3 -3

@@ -22,14 +22,14 @@ Simulate an event dispatch on a DOM node with optional `eventData` event data. *

22 **Clicking an element**

24 ```javascript

25 -var node = React.findDOMNode(this.refs.button);

25 +var node = ReactDOM.findDOMNode(this.refs.button);

26 React.addons.TestUtils.Simulate.click(node);

27 ```

29 **Changing the value of an input field and then pressing ENTER**

31 ```javascript

32 -var node = React.findDOMNode(this.refs.input);

32 +var node = ReactDOM.findDOMNode(this.refs.input);

33 node.value = 'giraffe'

34 React.addons.TestUtils.Simulate.change(node);

35 React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});

@@ -209,7 +209,7 @@ shallowRenderer.render(

209 )

210 ```

211

212 -Similar to `React.render`.

212 +Similar to `ReactDOM.render`.

213

214 ```javascript

215 ReactComponent shallowRenderer.getRenderOutput()

docs/docs/10.5-clone-with-props.it-IT.md

+1 -1

@@ -23,7 +23,7 @@ var Blue = React.createClass({

23 }

24 });

26 -React.render(

26 +ReactDOM.render(

27 <Blue>

28 <p>Questo testo è blu.</p>

29 </Blue>,

docs/docs/10.5-clone-with-props.ja-JP.md

+1 -1

@@ -23,7 +23,7 @@ var Blue = React.createClass({

23 }

24 });

26 -React.render(

26 +ReactDOM.render(

27 <Blue>

28 <p>This text is blue.</p>

29 </Blue>,

docs/docs/10.5-clone-with-props.ko-KR.md

+1 -1

@@ -23,7 +23,7 @@ var Blue = React.createClass({

23 }

24 });

26 -React.render(

26 +ReactDOM.render(

27 <Blue>

28 <p>This text is blue.</p>

29 </Blue>,

docs/docs/10.5-clone-with-props.md

+1 -1

@@ -23,7 +23,7 @@ var Blue = React.createClass({

23 }

24 });

26 -React.render(

26 +ReactDOM.render(

27 <Blue>

28 <p>This text is blue.</p>

29 </Blue>,

docs/docs/getting-started.it-IT.md

+3 -3

@@ -37,7 +37,7 @@ Nella directory principale dello starter kit, crea `helloworld.html` con il segu

37 <body>

38 <div id="example"></div>

39 <script type="text/babel">

40 - React.render(

40 + ReactDOM.render(

41 <h1>Cial, mondo!</h1>,

42 document.getElementById('example')

43 );

@@ -53,7 +53,7 @@ La sintassi XML all'interno di JavaScript è chiamata JSX; dài un'occhiata alla

53 Il tuo codice React JSX può trovarsi in un file a parte. Crea il seguente `src/helloworld.js`.

55 ```javascript

56 -React.render(

56 +ReactDOM.render(

57 <h1>Ciao, mondo!</h1>,

58 document.getElementById('example')

59 );

@@ -85,7 +85,7 @@ babel src --watch --out-dir build

85 Il file `build/helloworld.js` è generato automaticamente ogni qualvolta effettui un cambiamento. Leggi la [documentazione di Babel CLI](http://babeljs.io/docs/usage/cli/) per un uso più avanzato.

87 ```javascript{2}

88 -React.render(

88 +ReactDOM.render(

89 React.createElement('h1', null, 'Ciao, mondo!'),

90 document.getElementById('example')

91 );

docs/docs/getting-started.ja-JP.md

+3 -3

@@ -37,7 +37,7 @@ React でのハッキングを始めるにあたり、一番簡単なものと

37 <body>

38 <div id="example"></div>

39 <script type="text/babel">

40 - React.render(

40 + ReactDOM.render(

41 <h1>Hello, world!</h1>,

42 document.getElementById('example')

43 );

@@ -53,7 +53,7 @@ JavaScript の中に書かれた XML シンタックスは JSX と呼ばれる

53 React の JSX コードは別ファイルに分離することができます。次のような `src/helloworld.js` を作ってみましょう。

55 ```javascript

56 -React.render(

56 +ReactDOM.render(

57 <h1>Hello, world!</h1>,

58 document.getElementById('example')

59 );

@@ -83,7 +83,7 @@ jsx --watch src/ build/

83 すると、`src/helloword.js` に変更を加えるごとに `build/helloworld.js` が自動で生成されるようになります。

85 ```javascript{2}

86 -React.render(

86 +ReactDOM.render(

87 React.createElement('h1', null, 'Hello, world!'),

88 document.getElementById('example')

89 );

docs/docs/getting-started.ko-KR.md

+3 -3

@@ -37,7 +37,7 @@ React를 시작하는 가장 빠른 방법은 다음의 Hello World JSFiddle 예

37 <body>

38 <div id="example"></div>

39 <script type="text/babel">

40 - React.render(

40 + ReactDOM.render(

41 <h1>Hello, world!</h1>,

42 document.getElementById('example')

43 );

@@ -53,7 +53,7 @@ JavaScript 안에 보이는 XML 구문은 JSX라고 합니다; 더 자세한 내

53 React JSX 코드는 분리된 파일로 존재할 수 있습니다. 다음 내용으로 `src/helloworld.js`를 생성해보세요.

55 ```javascript

56 -React.render(

56 +ReactDOM.render(

57 <h1>Hello, world!</h1>,

58 document.getElementById('example')

59 );

@@ -84,7 +84,7 @@ jsx --watch src/ build/

84 수정할 때마다 `build/helloworld.js` 파일이 자동생성됩니다.

86 ```javascript{2}

87 -React.render(

87 +ReactDOM.render(

88 React.createElement('h1', null, 'Hello, world!'),

89 document.getElementById('example')

90 );

docs/docs/getting-started.md

+3 -3

@@ -36,7 +36,7 @@ In the root directory of the starter kit, create a `helloworld.html` with the fo

36 <body>

37 <div id="example"></div>

38 <script type="text/babel">

39 - React.render(

39 + ReactDOM.render(

40 <h1>Hello, world!</h1>,

41 document.getElementById('example')

42 );

@@ -52,7 +52,7 @@ The XML syntax inside of JavaScript is called JSX; check out the [JSX syntax](/r

52 Your React JSX code can live in a separate file. Create the following `src/helloworld.js`.

54 ```javascript

55 -React.render(

55 +ReactDOM.render(

56 <h1>Hello, world!</h1>,

57 document.getElementById('example')

58 );

@@ -84,7 +84,7 @@ babel src --watch --out-dir build

84 The file `build/helloworld.js` is autogenerated whenever you make a change. Read the [Babel CLI documentation](http://babeljs.io/docs/usage/cli/) for more advanced usage.

86 ```javascript{2}

87 -React.render(

87 +ReactDOM.render(

88 React.createElement('h1', null, 'Hello, world!'),

89 document.getElementById('example')

90 );

docs/docs/getting-started.zh-CN.md

+3 -3

@@ -37,7 +37,7 @@ redirect_from: "docs/index-zh-CN.html"

37 <body>

38 <div id="example"></div>

39 <script type="text/babel">

40 - React.render(

40 + ReactDOM.render(

41 <h1>Hello, world!</h1>,

42 document.getElementById('example')

43 );

@@ -53,7 +53,7 @@ redirect_from: "docs/index-zh-CN.html"

53 你的 React JSX 代码文件可以写在另外的文件里。新建下面的 `src/helloworld.js`。

55 ```javascript

56 -React.render(

56 +ReactDOM.render(

57 <h1>Hello, world!</h1>,

58 document.getElementById('example')

59 );

@@ -83,7 +83,7 @@ jsx --watch src/ build/

83 只要你修改了， `build/helloworld.js` 文件会自动生成。

85 ```javascript{2}

86 -React.render(

86 +ReactDOM.render(

87 React.createElement('h1', null, 'Hello, world!'),

88 document.getElementById('example')

89 );

docs/docs/ref-01-top-level-api.it-IT.md

+9 -9

@@ -70,7 +70,7 @@ l'argomento `type` può essere sia la stringa contenente il nome di un tag HTML

70 `ReactClass`.

73 -### React.render

73 +### ReactDOM.render

75 ```javascript

76 ReactComponent render(

@@ -88,15 +88,15 @@ Se la callback opzionale è fornita, sarà eseguita dopo che il rendering o l'ag

89 > Nota:

90 >

91 -> `React.render()` controlla i contenuti del nodo contenitore che viene passato come argomento `container`. Gli elementi DOM

91 +> `ReactDOM.render()` controlla i contenuti del nodo contenitore che viene passato come argomento `container`. Gli elementi DOM

92 > esistenti al suo interno sono sostituiti quando viene chiamata la prima volta. Le chiamate successive usano l'algoritmo di

93 > differenza di React per aggiornamenti efficienti.

94 >

95 -> `React.render()` non modifica il nodo contenitore (modifica soltanto i figli del contenitore). In

95 +> `ReactDOM.render()` non modifica il nodo contenitore (modifica soltanto i figli del contenitore). In

96 > futuro potrebbe essere possibile inserire un componente in un nodo DOM esistente senza sovrascrivere i figli esistenti.

99 -### React.unmountComponentAtNode

99 +### ReactDOM.unmountComponentAtNode

100

101 ```javascript

102 boolean unmountComponentAtNode(DOMElement container)

@@ -105,7 +105,7 @@ boolean unmountComponentAtNode(DOMElement container)

105 Rimuove un componente React montato nel DOM e ripulisce i suoi gestori di evento e lo stato. Se nessun componente è stato montato nel contenitore `container`, chiamare questa funzione non ha alcun effetto. Restituisce `true` se il componente è stato smontato e `false` se non è stato trovato un componente da smontare.

106

107

108 -### React.renderToString

108 +### ReactDOM.renderToString

109

110 ```javascript

111 string renderToString(ReactElement element)

@@ -113,10 +113,10 @@ string renderToString(ReactElement element)

113

114 Effettua il rendering di un ReactElement come il suo HTML iniziale. Questo dovrebe essere utilizzato soltanto lato server. React restituirà una stringa di HTML. Puoi usare questo metodo per generare HTML sul server e inviare il markup come risposta alla richiesta iniziale per un più rapido caricamento della pagina, e permettere ai motori di ricerca di effettuare il crawling della tua pagina per ottimizzazione SEO.

115

116 -Se chiami `React.render()` su un nodo che possiede già questo markup generato lato server, React lo preserverà e vi attaccherà soltanto i gestori di eventi, permettendoti di avere una esperienza di primo caricamento altamente efficiente.

116 +Se chiami `ReactDOM.render()` su un nodo che possiede già questo markup generato lato server, React lo preserverà e vi attaccherà soltanto i gestori di eventi, permettendoti di avere una esperienza di primo caricamento altamente efficiente.

117

118

119 -### React.renderToStaticMarkup

119 +### ReactDOM.renderToStaticMarkup

120

121 ```javascript

122 string renderToStaticMarkup(ReactElement element)

@@ -125,7 +125,7 @@ string renderToStaticMarkup(ReactElement element)

125 Simile a `renderToString`, eccetto che non crea attributi DOM aggiuntivi come `data-react-id`, che React utilizza internamente. Questo è utile se vuoi usare React come un semplice generatore di pagine statiche, in quanto eliminare gli attributi aggiuntivi può risparmiare parecchi byte.

126

127

128 -### React.isValidElement

128 +### ReactDOM.isValidElement

129

130 ```javascript

131 boolean isValidElement(* object)

@@ -134,7 +134,7 @@ boolean isValidElement(* object)

134 Verifica che `object` sia un ReactElement.

135

136

137 -### React.findDOMNode

137 +### ReactDOM.findDOMNode

138

139 ```javascript

140 DOMElement findDOMNode(ReactComponent component)

docs/docs/ref-01-top-level-api.ko-KR.md

+9 -9

@@ -68,7 +68,7 @@ factoryFunction createFactory(

68 주어진 타입의 ReactElement를 만들어주는 함수를 리턴합니다. `React.createElement`와 마찬가지로 `type` 인자는 HTML 태그명 문자열 (예: 'div', 'span' 등) 또는 `ReactClass`입니다.

71 -### React.render

71 +### ReactDOM.render

73 ```javascript

74 ReactComponent render(

@@ -86,12 +86,12 @@ ReactComponent render(

87 > 주의:

88 >

89 -> `React.render()`는 넘어온 컨테이너 노드의 내용을 교체합니다. 안에 있는 DOM 엘리먼트는 첫 호출을 할 때 교체됩니다. 그 후의 호출에는 효율석으로 업데이트하기 위해 React의 DOM diff 알고리즘을 사용합니다.

89 +> `ReactDOM.render()`는 넘어온 컨테이너 노드의 내용을 교체합니다. 안에 있는 DOM 엘리먼트는 첫 호출을 할 때 교체됩니다. 그 후의 호출에는 효율석으로 업데이트하기 위해 React의 DOM diff 알고리즘을 사용합니다.

90 >

91 -> `React.render()`는 컨테이너 노드를 수정하지 않습니다. (컨테이너의 자식만 수정함) 추후에 기존 자식들을 덮어쓰지 않고 이미 있는 DOM 노드에 컴포넌트를 삽입하는 것도 지원할 가능성이 있습니다.

91 +> `ReactDOM.render()`는 컨테이너 노드를 수정하지 않습니다. (컨테이너의 자식만 수정함) 추후에 기존 자식들을 덮어쓰지 않고 이미 있는 DOM 노드에 컴포넌트를 삽입하는 것도 지원할 가능성이 있습니다.

94 -### React.unmountComponentAtNode

94 +### ReactDOM.unmountComponentAtNode

96 ```javascript

97 boolean unmountComponentAtNode(DOMElement container)

@@ -100,7 +100,7 @@ boolean unmountComponentAtNode(DOMElement container)

100 DOM에 마운트된 React 컴포넌트를 제거하고 이벤트 핸들러 및 state를 정리합니다. 컨테이너에 마운트된 컴포넌트가 없는 경우에는 호출해도 아무 동작을 하지 않습니다. 컴포넌트가 마운트 해제된 경우 `true`를, 마운트 해제할 컴포넌트가 없으면 `false`를 리턴합니다.

101

102

103 -### React.renderToString

103 +### ReactDOM.renderToString

104

105 ```javascript

106 string renderToString(ReactElement element)

@@ -108,10 +108,10 @@ string renderToString(ReactElement element)

108

109 주어진 ReactElement의 최초 HTML을 렌더링합니다. 이 함수는 서버에서만 사용해야 합니다. React가 HTML 문자열을 리턴합니다. HTML을 서버에서 생성하고 마크업을 최초 요청에 내려보내서, 페이지 로딩을 빠르게 하거나 검색 엔진이 크롤링할 수 있도록 하는 SEO 목적으로 이 메소드를 사용할 수 있습니다.

110

111 -또한 이 메소드로 서버에서 렌더링한 마크업을 포함한 노드에 `React.render()`를 호출하면, React는 마크업을 보존하고 이벤트 핸들러만 붙이므로 최초 로딩을 매우 빠르게 느껴지게 할 수 있습니다.

111 +또한 이 메소드로 서버에서 렌더링한 마크업을 포함한 노드에 `ReactDOM.render()`를 호출하면, React는 마크업을 보존하고 이벤트 핸들러만 붙이므로 최초 로딩을 매우 빠르게 느껴지게 할 수 있습니다.

112

113

114 -### React.renderToStaticMarkup

114 +### ReactDOM.renderToStaticMarkup

115

116 ```javascript

117 string renderToStaticMarkup(ReactElement element)

@@ -120,7 +120,7 @@ string renderToStaticMarkup(ReactElement element)

120 `renderToString`와 비슷하지만 `data-react-id`처럼 React에서 내부적으로 사용하는 추가적인 DOM 어트리뷰트를 만들지 않습니다. 추가적인 어트리뷰트를 제거하면 생성되는 마크업의 용량을 줄일 수 있기 때문에 React를 단순한 정적 페이지 생성기로 사용할 때 유용합니다.

121

122

123 -### React.isValidElement

123 +### ReactDOM.isValidElement

124

125 ```javascript

126 boolean isValidElement(* object)

@@ -128,7 +128,7 @@ boolean isValidElement(* object)

128

129 주어진 객체가 ReactElement인지 확인합니다.

130

131 -### React.findDOMNode

131 +### ReactDOM.findDOMNode

132

133 ```javascript

134 DOMElement findDOMNode(ReactComponent component)

docs/docs/ref-01-top-level-api.md

+9 -9

@@ -71,7 +71,7 @@ the type argument can be either an html tag name string (eg. 'div', 'span', etc)

71 `ReactClass`.

74 -### React.render

74 +### ReactDOM.render

76 ```javascript

77 ReactComponent render(

@@ -89,16 +89,16 @@ If the optional callback is provided, it will be executed after the component is

90 > Note:

91 >

92 -> `React.render()` controls the contents of the container node you pass in. Any existing DOM elements

92 +> `ReactDOM.render()` controls the contents of the container node you pass in. Any existing DOM elements

93 > inside are replaced when first called. Later calls use React’s DOM diffing algorithm for efficient

94 > updates.

95 >

96 -> `React.render()` does not modify the container node (only modifies the children of the container). In

96 +> `ReactDOM.render()` does not modify the container node (only modifies the children of the container). In

97 > the future, it may be possible to insert a component to an existing DOM node without overwriting

98 > the existing children.

100

101 -### React.unmountComponentAtNode

101 +### ReactDOM.unmountComponentAtNode

102

103 ```javascript

104 boolean unmountComponentAtNode(DOMElement container)

@@ -107,7 +107,7 @@ boolean unmountComponentAtNode(DOMElement container)

107 Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns `true` if a component was unmounted and `false` if there was no component to unmount.

108

109

110 -### React.renderToString

110 +### ReactDOM.renderToString

111

112 ```javascript

113 string renderToString(ReactElement element)

@@ -115,10 +115,10 @@ string renderToString(ReactElement element)

115

116 Render a ReactElement to its initial HTML. This should only be used on the server. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.

117

118 -If you call `React.render()` on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.

118 +If you call `ReactDOM.render()` on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.

119

120

121 -### React.renderToStaticMarkup

121 +### ReactDOM.renderToStaticMarkup

122

123 ```javascript

124 string renderToStaticMarkup(ReactElement element)

@@ -127,7 +127,7 @@ string renderToStaticMarkup(ReactElement element)

127 Similar to `renderToString`, except this doesn't create extra DOM attributes such as `data-react-id`, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.

128

129

130 -### React.isValidElement

130 +### ReactDOM.isValidElement

131

132 ```javascript

133 boolean isValidElement(* object)

@@ -136,7 +136,7 @@ boolean isValidElement(* object)

136 Verifies the object is a ReactElement.

137

138

139 -### React.findDOMNode

139 +### ReactDOM.findDOMNode

140

141 ```javascript

142 DOMElement findDOMNode(ReactComponent component)

docs/docs/ref-02-component-api.it-IT.md

+5 -5

@@ -8,7 +8,7 @@ next: component-specs-it-IT.html

9 ## React.Component

11 -Istanze di un React Component sono create internamente a React durante il rendering. Queste istanze sono riutilizzate in rendering successivi, e possono essere accedute dai metodi del tuo componente come `this`. L'unica maniera di ottenere un riferimento a una istanza di un React Component fuori da React è conservare il valore restituito da `React.render`. All'interno di altri Component, puoi utilizzare [i ref](/react/docs/more-about-refs.html) per ottenere il medesimo risultato.

11 +Istanze di un React Component sono create internamente a React durante il rendering. Queste istanze sono riutilizzate in rendering successivi, e possono essere accedute dai metodi del tuo componente come `this`. L'unica maniera di ottenere un riferimento a una istanza di un React Component fuori da React è conservare il valore restituito da `ReactDOM.render`. All'interno di altri Component, puoi utilizzare [i ref](/react/docs/more-about-refs.html) per ottenere il medesimo risultato.

14 ### setState

@@ -91,7 +91,7 @@ Se questo componente è stato montato nel DOM, restituisce il corrispondente ele

92 > Nota:

93 >

94 -> getDOMNode è deprecato ed è stato sostituito da [React.findDOMNode()](/react/docs/top-level-api.html#react.finddomnode).

94 +> getDOMNode è deprecato ed è stato sostituito da [ReactDOM.findDOMNode()](/react/docs/top-level-api.html#reactdom.finddomnode).

95 >

96 > Questo metodo non è disponibile il componenti `class` ES6 che estendono `React.Component`. Potrebbe essere eliminato del tutto in una versione futura di React.

@@ -118,15 +118,15 @@ void setProps(

118 )

119 ```

120

121 -Quando stai integrando con un'applicazione JavaScript esterna puoi voler segnalare un cambiamento a un componente React il cui rendering è stato effettuato con `React.render()`.

121 +Quando stai integrando con un'applicazione JavaScript esterna puoi voler segnalare un cambiamento a un componente React il cui rendering è stato effettuato con `ReactDOM.render()`.

122

123 Chiamare `setProps()` su un componente al livello radice cambierà le sue proprietà e scatenerà un ri-rendering. Inoltre, puoi fornire una funzione callback opzionale che verrà eseguita quando `setProps` ha terminato e il rendering del componente è terminato.

124

125 > Nota:

126 >

127 -> Quando possibile, l'approccio dichiarativo di invocare nuovamente `React.render()` sullo stesso nodo è preferibile. Quest'ultimo tende a rendere gli aggiornamenti più comprensibili. (Non vi è una differenza significativa di prestazioni tra i due approcci.)

127 +> Quando possibile, l'approccio dichiarativo di invocare nuovamente `ReactDOM.render()` sullo stesso nodo è preferibile. Quest'ultimo tende a rendere gli aggiornamenti più comprensibili. (Non vi è una differenza significativa di prestazioni tra i due approcci.)

128 >

129 -> Questo metodo può essere chiamato soltanto su un componente al livello radice. Ovvero, è disponibile soltanto sul componente passato direttamente a `React.render()` e nessuno dei suoi figli. Se il tuo intento è usare `setProps()` su un componente figlio, approfitta degli aggiornamenti reattivi e passa la nuova proprietà al componente figlio quando viene creato in `render()`.

129 +> Questo metodo può essere chiamato soltanto su un componente al livello radice. Ovvero, è disponibile soltanto sul componente passato direttamente a `ReactDOM.render()` e nessuno dei suoi figli. Se il tuo intento è usare `setProps()` su un componente figlio, approfitta degli aggiornamenti reattivi e passa la nuova proprietà al componente figlio quando viene creato in `render()`.

130 >

131 > Questo metodo non è disponibile il componenti `class` ES6 che estendono `React.Component`. Potrebbe essere eliminato del tutto in una versione futura di React.

132

docs/docs/ref-02-component-api.ko-KR.md

+5 -5

@@ -8,7 +8,7 @@ next: component-specs-ko-KR.html

9 ## React.Component

11 -React 컴포넌트의 인스턴스는 React가 렌더링 시에 내부적으로 만듭니다. 이때 만들어진 인스턴스는 이후의 렌더링에서 다시 사용되고 컴포넌트의 메소드들에서 `this` 변수로 접근할 수 있습니다. React 외부에서 React 컴포넌트의 핸들을 얻는 방법은 `React.render`의 리턴값을 저장하는 것이 유일합니다. 다른 컴포넌트 안에서 비슷한 결과를 얻으려면 [refs](/react/docs/more-about-refs-ko-KR.html)를 사용해야 합니다.

11 +React 컴포넌트의 인스턴스는 React가 렌더링 시에 내부적으로 만듭니다. 이때 만들어진 인스턴스는 이후의 렌더링에서 다시 사용되고 컴포넌트의 메소드들에서 `this` 변수로 접근할 수 있습니다. React 외부에서 React 컴포넌트의 핸들을 얻는 방법은 `ReactDOM.render`의 리턴값을 저장하는 것이 유일합니다. 다른 컴포넌트 안에서 비슷한 결과를 얻으려면 [refs](/react/docs/more-about-refs-ko-KR.html)를 사용해야 합니다.

14 ### setState

@@ -84,7 +84,7 @@ DOMElement getDOMNode()

85 > 주의:

86 >

87 -> getDOMNode는 [React.findDOMNode()](/react/docs/top-level-api.html#react.finddomnode)로 교체되었습니다.

87 +> getDOMNode는 [ReactDOM.findDOMNode()](/react/docs/top-level-api.html#reactdom.finddomnode)로 교체되었습니다.

88 >

89 > 이 메소드는 `React.Component`를 확장한 ES6 `class` 컴포넌트에서는 사용할 수 없습니다. React의 미래 버전에서 이는 완전히 사라지게 될 것입니다.

@@ -108,15 +108,15 @@ boolean isMounted()

108 void setProps(object nextProps[, function callback])

109 ```

110

111 -외부 JavaScript 애플리케이션과 연동하는 경우 `React.render()`로 렌더링된 React 컴포넌트에 변경을 알리고 싶을 때가 있습니다.

111 +외부 JavaScript 애플리케이션과 연동하는 경우 `ReactDOM.render()`로 렌더링된 React 컴포넌트에 변경을 알리고 싶을 때가 있습니다.

112

113 최상위 컴포넌트에서 `setProps()`를 호출하면 프로퍼티를 변경하고 렌더를 다시 발생합니다. 거기에 콜백 함수를 넘기면 `setProps`가 완료되고 컴포넌트가 다시 렌더링된 다음에 한번 호출됩니다.

114

115 > 주의:

116 >

117 -> 가능하다면 이것 대신 `React.render()`를 같은 노드에서 다시 호출하는 선언적인 방법이 더 바람직합니다. 그렇게 하는 편이 업데이트에 대해 생각하는 것을 쉽게 만듭니다. (두가지 방식에 눈에 띄는 성능 차이는 없습니다.)

117 +> 가능하다면 이것 대신 `ReactDOM.render()`를 같은 노드에서 다시 호출하는 선언적인 방법이 더 바람직합니다. 그렇게 하는 편이 업데이트에 대해 생각하는 것을 쉽게 만듭니다. (두가지 방식에 눈에 띄는 성능 차이는 없습니다.)

118 >

119 -> 이 메소드는 최상위 컴포넌트에만 호출 가능합니다. 다시 말해, `React.render()`에 바로 넘긴 컴포넌트에서만 사용할 수 있고 자식에서는 불가능합니다. 자식 컴포넌트에 `setProps()`를 사용하고 싶다면, 그 대신 반응적인 업데이트의 장점을 활용하여 `render()` 안에서 자식 컴포넌트를 만들 때 새로운 prop을 넘기세요.

119 +> 이 메소드는 최상위 컴포넌트에만 호출 가능합니다. 다시 말해, `ReactDOM.render()`에 바로 넘긴 컴포넌트에서만 사용할 수 있고 자식에서는 불가능합니다. 자식 컴포넌트에 `setProps()`를 사용하고 싶다면, 그 대신 반응적인 업데이트의 장점을 활용하여 `render()` 안에서 자식 컴포넌트를 만들 때 새로운 prop을 넘기세요.

120 >

121 > 이 메소드는 `React.Component`를 확장한 ES6 `class` 컴포넌트에서는 사용할 수 없습니다. React의 미래 버전에서 이는 완전히 사라지게 될 것입니다.

122

docs/docs/ref-02-component-api.md

+5 -5

@@ -8,7 +8,7 @@ next: component-specs.html

9 ## React.Component

11 -Instances of a React Component are created internally in React when rendering. These instances are reused in subsequent renders, and can be accessed in your component methods as `this`. The only way to get a handle to a React Component instance outside of React is by storing the return value of `React.render`. Inside other Components, you may use [refs](/react/docs/more-about-refs.html) to achieve the same result.

11 +Instances of a React Component are created internally in React when rendering. These instances are reused in subsequent renders, and can be accessed in your component methods as `this`. The only way to get a handle to a React Component instance outside of React is by storing the return value of `ReactDOM.render`. Inside other Components, you may use [refs](/react/docs/more-about-refs.html) to achieve the same result.

14 ### setState

@@ -91,7 +91,7 @@ If this component has been mounted into the DOM, this returns the corresponding

92 > Note:

93 >

94 -> getDOMNode is deprecated and has been replaced with [React.findDOMNode()](/react/docs/top-level-api.html#react.finddomnode).

94 +> getDOMNode is deprecated and has been replaced with [ReactDOM.findDOMNode()](/react/docs/top-level-api.html#reactdom.finddomnode).

95 >

96 > This method is not available on ES6 `class` components that extend `React.Component`. It may be removed entirely in a future version of React.

@@ -118,15 +118,15 @@ void setProps(

118 )

119 ```

120

121 -When you're integrating with an external JavaScript application you may want to signal a change to a React component rendered with `React.render()`.

121 +When you're integrating with an external JavaScript application you may want to signal a change to a React component rendered with `ReactDOM.render()`.

122

123 Calling `setProps()` on a root-level component will change its properties and trigger a re-render. In addition, you can supply an optional callback function that is executed once `setProps` is completed and the component is re-rendered.

124

125 > Note:

126 >

127 -> When possible, the declarative approach of calling `React.render()` again on the same node is preferred instead. It tends to make updates easier to reason about. (There's no significant performance difference between the two approaches.)

127 +> When possible, the declarative approach of calling `ReactDOM.render()` again on the same node is preferred instead. It tends to make updates easier to reason about. (There's no significant performance difference between the two approaches.)

128 >

129 -> This method can only be called on a root-level component. That is, it's only available on the component passed directly to `React.render()` and none of its children. If you're inclined to use `setProps()` on a child component, instead take advantage of reactive updates and pass the new prop to the child component when it's created in `render()`.

129 +> This method can only be called on a root-level component. That is, it's only available on the component passed directly to `ReactDOM.render()` and none of its children. If you're inclined to use `setProps()` on a child component, instead take advantage of reactive updates and pass the new prop to the child component when it's created in `render()`.

130 >

131 > This method is not available on ES6 `class` components that extend `React.Component`. It may be removed entirely in a future version of React.

132

docs/docs/ref-03-component-specs.it-IT.md

+2 -2

@@ -24,7 +24,7 @@ Il metodo `render()` è richiesto.

25 Quando viene chiamato, dovrebbe esaminare `this.props` e `this.state` e restituire un singolo elemento figlio. Questo elemento figlio può essere sia una rappresentazione virtuale di un componente DOM nativo (come `<div />` o `React.DOM.div()`) o un altro componente composito che hai definito tu stesso.

27 -Puoi anche restituire `null` o `false` per indicare che desideri che non venga visualizzato nulla. Dietro le quinte, React visualizza un tag `<noscript>` per lavorare con il nostro attuale algoritmo di differenza. Quando si restituisce `null` o `false`, `React.findDOMNode(this)` restituirà `null`.

27 +Puoi anche restituire `null` o `false` per indicare che desideri che non venga visualizzato nulla. Dietro le quinte, React visualizza un tag `<noscript>` per lavorare con il nostro attuale algoritmo di differenza. Quando si restituisce `null` o `false`, `ReactDOM.findDOMNode(this)` restituirà `null`.

29 La funzione `render()` dovrebbe essere *pura*, nel senso che non modifica lo stato del componente, restituisce lo stesso risultato ogni volta che viene invocato, e non legge o scrive il DOM o interagisce in altro modo con il browser (ad es. usando `setTimeout`). Se devi interagire con il browser, effettua le tue operazioni in `componentDidMount()` o negli altri metodi del ciclo di vita. Mantenere `render()` puro rende il rendering lato server più praticabile e rende i componenti più facili da comprendere.

@@ -121,7 +121,7 @@ Invocato una volta, sia sul client che sul server, immediatamente prima che il r

121 void componentDidMount()

122 ```

123

124 -Invocato una volta, solo sul client (e non sul server), immediatamente dopo che il rendering iniziale ha avuto luogo. A questo punto del ciclo di vita, il componente ha una rappresentazione DOM che puoi accedere attraverso `React.findDOMNode(this)`. Il metodo `componentDidMount()` dei componenti figli è invocato prima di quello dei componenti genitori.

124 +Invocato una volta, solo sul client (e non sul server), immediatamente dopo che il rendering iniziale ha avuto luogo. A questo punto del ciclo di vita, il componente ha una rappresentazione DOM che puoi accedere attraverso `ReactDOM.findDOMNode(this)`. Il metodo `componentDidMount()` dei componenti figli è invocato prima di quello dei componenti genitori.

125

126 Se desideri integrare con altri framework JavaScript, impostare dei timer usando `setTimeout` o `setInterval`, oppure inviare richieste AJAX, effettua tali operazioni in questo metodo.

127

docs/docs/ref-03-component-specs.ko-KR.md

+2 -2

@@ -24,7 +24,7 @@ ReactElement render()

25 호출되면 `this.props`와 `this.state`를 토대로 하나의 자식 엘리먼트를 리턴합니다. 이 자식 엘리먼트는 네이티브 DOM 컴포넌트의 가상 표현 (`<div />`나 `React.DOM.div()` 등) 또는 직접 정의한 조합(composite) 컴포넌트가 될 수 있습니다.

27 -아무 것도 렌더링되지 않도록 하려면 `null`이나 `false`를 리턴합니다. React는 지금의 차이 비교 알고리즘이 작동할 수 있도록 내부적으로는 `<noscript>` 태그를 렌더링합니다. `null`이나 `false`를 리턴한 경우, `React.findDOMNode(this)`는 `null`을 리턴합니다.

27 +아무 것도 렌더링되지 않도록 하려면 `null`이나 `false`를 리턴합니다. React는 지금의 차이 비교 알고리즘이 작동할 수 있도록 내부적으로는 `<noscript>` 태그를 렌더링합니다. `null`이나 `false`를 리턴한 경우, `ReactDOM.findDOMNode(this)`는 `null`을 리턴합니다.

29 `render()` 함수는 순수 함수여야 합니다. 즉, 컴포넌트의 상태를 변경하지 않고, 여러번 호출해도 같은 결과를 리턴하며, DOM을 읽고 쓰거나 브라우저와 상호작용(예를 들어 `setTimeout`를 사용)하지 않아야 합니다. 브라우저와 상호작용해야 한다면 `componentDidMount()`나 다른 생명주기 메소드에서 수행해야 합니다. `render()` 함수를 순수 함수로 유지하면 서버 렌더링이 훨씬 쓸만해지고 컴포넌트에 대해 생각하기 쉬워집니다.

@@ -122,7 +122,7 @@ void componentWillMount()

122 void componentDidMount()

123 ```

124

125 -최초 렌더링이 일어난 다음 클라이언트에서만 한번 호출됩니다. (서버에서는 호출되지 않습니다.) 이 시점에 컴포넌트는 `React.findDOMNode(this)`로 접근 가능한 DOM 표현을 가집니다.

125 +최초 렌더링이 일어난 다음 클라이언트에서만 한번 호출됩니다. (서버에서는 호출되지 않습니다.) 이 시점에 컴포넌트는 `ReactDOM.findDOMNode(this)`로 접근 가능한 DOM 표현을 가집니다.

126

127 다른 JavaScript 프레임워크를 연동하거나, `setTimeout`/`setInterval`로 타이머를 설정하고 AJAX 요청을 보내는 등의 작업을 이 메소드에서 합니다.

128

docs/docs/ref-03-component-specs.md

+2 -2

@@ -24,7 +24,7 @@ The `render()` method is required.

25 When called, it should examine `this.props` and `this.state` and return a single child element. This child element can be either a virtual representation of a native DOM component (such as `<div />` or `React.DOM.div()`) or another composite component that you've defined yourself.

27 -You can also return `null` or `false` to indicate that you don't want anything rendered. Behind the scenes, React renders a `<noscript>` tag to work with our current diffing algorithm. When returning `null` or `false`, `React.findDOMNode(this)` will return `null`.

27 +You can also return `null` or `false` to indicate that you don't want anything rendered. Behind the scenes, React renders a `<noscript>` tag to work with our current diffing algorithm. When returning `null` or `false`, `ReactDOM.findDOMNode(this)` will return `null`.

29 The `render()` function should be *pure*, meaning that it does not modify component state, it returns the same result each time it's invoked, and it does not read from or write to the DOM or otherwise interact with the browser (e.g., by using `setTimeout`). If you need to interact with the browser, perform your work in `componentDidMount()` or the other lifecycle methods instead. Keeping `render()` pure makes server rendering more practical and makes components easier to think about.

@@ -121,7 +121,7 @@ Invoked once, both on the client and server, immediately before the initial rend

121 void componentDidMount()

122 ```

123

124 -Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via `React.findDOMNode(this)`. The `componentDidMount()` method of child components is invoked before that of parent components.

124 +Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via `ReactDOM.findDOMNode(this)`. The `componentDidMount()` method of child components is invoked before that of parent components.

125

126 If you want to integrate with other JavaScript frameworks, set timers using `setTimeout` or `setInterval`, or send AJAX requests, perform those operations in this method.

127

docs/docs/ref-09-glossary.it-IT.md

+11 -11

@@ -21,10 +21,10 @@ Puoi creare uno di questi oggetti attraverso `React.createElement`.

21 var root = React.createElement('div');

22 ```

24 -Per effettuare il rendering di un nuovo albero nel DOM, crei dei `ReactElement` ande li passi a `React.render` assieme a un `Element` DOM regolare (`HTMLElement` o `SVGElement`). I `ReactElement` non vanno confusi con gli `Element` del DOM. Un `ReactElement` è una rappresentazione leggera, priva di stato, immutabile e virtuale di un `Element` del DOM. È un DOM virtuale.

24 +Per effettuare il rendering di un nuovo albero nel DOM, crei dei `ReactElement` ande li passi a `ReactDOM.render` assieme a un `Element` DOM regolare (`HTMLElement` o `SVGElement`). I `ReactElement` non vanno confusi con gli `Element` del DOM. Un `ReactElement` è una rappresentazione leggera, priva di stato, immutabile e virtuale di un `Element` del DOM. È un DOM virtuale.

26 ```javascript

27 -React.render(root, document.getElementById('example'));

27 +ReactDOM.render(root, document.getElementById('example'));

28 ```

30 Per aggiungere proprietà ad un elemento DOM, passa un oggetto di proprietà come secondo argomento, e i figli come terzo argomento.

@@ -32,7 +32,7 @@ Per aggiungere proprietà ad un elemento DOM, passa un oggetto di proprietà com

32 ```javascript

33 var child = React.createElement('li', null, 'Contenuto di Testo');

34 var root = React.createElement('ul', { className: 'my-list' }, child);

35 -React.render(root, document.getElementById('example'));

35 +ReactDOM.render(root, document.getElementById('example'));

36 ```

38 Se usi React JSX, allora questi `ReactElement` verranno creati per te. Questa espressione è equivalente:

@@ -41,7 +41,7 @@ Se usi React JSX, allora questi `ReactElement` verranno creati per te. Questa es

41 var root = <ul className="my-list">

42 <li>Contenuto di Testo</li>

43 </ul>;

44 -React.render(root, document.getElementById('example'));

44 +ReactDOM.render(root, document.getElementById('example'));

45 ```

47 ### Le Factory

@@ -59,7 +59,7 @@ Ti permette di creare una conveniente scorciatoia anziché scrivere ogni volta `

59 ```javascript

60 var div = React.createFactory('div');

61 var root = div({ className: 'my-div' });

62 -React.render(root, document.getElementById('example'));

62 +ReactDOM.render(root, document.getElementById('example'));

63 ```

65 React possiede già factory integrate per tag HTML comuni:

@@ -119,17 +119,17 @@ OPPURE usando JSX:

119 var element = <MyComponent />;

120 ```

121

122 -Quando `element` viene passato a `React.render`, React chiamerà il costruttore al tuo posto e creerà un`ReactComponent`, che verrà restituito.

122 +Quando `element` viene passato a `ReactDOM.render`, React chiamerà il costruttore al tuo posto e creerà un`ReactComponent`, che verrà restituito.

123

124 ```javascript

125 -var component = React.render(element, document.getElementById('example'));

125 +var component = ReactDOM.render(element, document.getElementById('example'));

126 ```

127

128 -Se chiami ripetutamente `React.render` con lo stesso tipo di `ReactElement` e lo stesso `Element` DOM come contenitore, ti restituirà sempre la stessa istanza. Questa istanza è dotata di stato.

128 +Se chiami ripetutamente `ReactDOM.render` con lo stesso tipo di `ReactElement` e lo stesso `Element` DOM come contenitore, ti restituirà sempre la stessa istanza. Questa istanza è dotata di stato.

129

130 ```javascript

131 -var componentA = React.render(<MyComponent />, document.getElementById('example'));

132 -var componentB = React.render(<MyComponent />, document.getElementById('example'));

131 +var componentA = ReactDOM.render(<MyComponent />, document.getElementById('example'));

132 +var componentB = ReactDOM.render(<MyComponent />, document.getElementById('example'));

133 componentA === componentB; // true

134 ```

135

@@ -143,7 +143,7 @@ Ci si aspetta che il metodo `render` di un `ReactComponent` restituisca un altro

143 ### Punto di Entrata

144

145 ```

146 -React.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent;

146 +ReactDOM.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent;

147 ```

148

149 ### Nodi ed Elementi

docs/docs/ref-09-glossary.ko-KR.md

+11 -11

@@ -21,10 +21,10 @@ prev: reconciliation-ko-KR.html

21 var root = React.createElement('div');

22 ```

24 -DOM에 새로운 트리를 렌더링하기 위해서는 `ReactElement`를 만들고 일반적인 DOM `Element` (`HTMLElement` 또는 `SVGElement`)와 함께 `React.render`에 넘깁니다. `ReactElement`를 DOM `Element`와 혼동해서는 안됩니다. `ReactElement`는 가볍고, 상태를 갖지 않으며, 변경 불가능한, DOM `Element`의 가상 표현입니다. 즉 가상 DOM입니다.

24 +DOM에 새로운 트리를 렌더링하기 위해서는 `ReactElement`를 만들고 일반적인 DOM `Element` (`HTMLElement` 또는 `SVGElement`)와 함께 `ReactDOM.render`에 넘깁니다. `ReactElement`를 DOM `Element`와 혼동해서는 안됩니다. `ReactElement`는 가볍고, 상태를 갖지 않으며, 변경 불가능한, DOM `Element`의 가상 표현입니다. 즉 가상 DOM입니다.

26 ```javascript

27 -React.render(root, document.getElementById('example'));

27 +ReactDOM.render(root, document.getElementById('example'));

28 ```

30 DOM 엘리먼트에 프로퍼티를 추가하려면 두번째 인자로 프로퍼티 객체를, 세번째 인자로 자식을 넘깁니다.

@@ -32,7 +32,7 @@ DOM 엘리먼트에 프로퍼티를 추가하려면 두번째 인자로 프로

32 ```javascript

33 var child = React.createElement('li', null, 'Text Content');

34 var root = React.createElement('ul', { className: 'my-list' }, child);

35 -React.render(root, document.getElementById('example'));

35 +ReactDOM.render(root, document.getElementById('example'));

36 ```

38 React JSX를 사용하면 `ReactElement`가 알아서 만들어집니다. 따라서 다음 코드는 앞의 코드와 같습니다:

@@ -41,7 +41,7 @@ React JSX를 사용하면 `ReactElement`가 알아서 만들어집니다. 따라

41 var root = <ul className="my-list">

42 <li>Text Content</li>

43 </ul>;

44 -React.render(root, document.getElementById('example'));

44 +ReactDOM.render(root, document.getElementById('example'));

45 ```

47 __팩토리__

@@ -59,7 +59,7 @@ function createFactory(type) {

59 ```javascript

60 var div = React.createFactory('div');

61 var root = div({ className: 'my-div' });

62 -React.render(root, document.getElementById('example'));

62 +ReactDOM.render(root, document.getElementById('example'));

63 ```

65 React에는 이미 보통의 HTML 태그를 위한 팩토리가 내장되어 있습니다:

@@ -119,17 +119,17 @@ var element = React.createElement(MyComponent);

119 var element = <MyComponent />;

120 ```

121

122 -이것이 `React.render`에 넘겨지면 React가 알아서 생성자를 호출하여 `ReactComponent`를 만들고 리턴합니다.

122 +이것이 `ReactDOM.render`에 넘겨지면 React가 알아서 생성자를 호출하여 `ReactComponent`를 만들고 리턴합니다.

123

124 ```javascript

125 -var component = React.render(element, document.getElementById('example'));

125 +var component = ReactDOM.render(element, document.getElementById('example'));

126 ```

127

128 -같은 타입의 `ReactElement`와 같은 컨테이너 DOM `Element`를 가지고 `React.render`를 계속 호출하면 항상 같은 인스턴스를 리턴합니다. 이 인스턴스는 상태를 가집니다.

128 +같은 타입의 `ReactElement`와 같은 컨테이너 DOM `Element`를 가지고 `ReactDOM.render`를 계속 호출하면 항상 같은 인스턴스를 리턴합니다. 이 인스턴스는 상태를 가집니다.

129

130 ```javascript

131 -var componentA = React.render(<MyComponent />, document.getElementById('example'));

132 -var componentB = React.render(<MyComponent />, document.getElementById('example'));

131 +var componentA = ReactDOM.render(<MyComponent />, document.getElementById('example'));

132 +var componentB = ReactDOM.render(<MyComponent />, document.getElementById('example'));

133 componentA === componentB; // true

134 ```

135

@@ -143,7 +143,7 @@ componentA === componentB; // true

143 __진입점__

144

145 ```

146 -React.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent;

146 +ReactDOM.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent;

147 ```

148

149 __노드와 엘리먼트__

docs/docs/ref-09-glossary.md

+11 -11

@@ -21,10 +21,10 @@ You can create one of these objects through `React.createElement`.

21 var root = React.createElement('div');

22 ```

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

24 +To render a new tree into the DOM, you create `ReactElement`s and pass them to `ReactDOM.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.

26 ```javascript

27 -React.render(root, document.getElementById('example'));

27 +ReactDOM.render(root, document.getElementById('example'));

28 ```

30 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

32 ```javascript

33 var child = React.createElement('li', null, 'Text Content');

34 var root = React.createElement('ul', { className: 'my-list' }, child);

35 -React.render(root, document.getElementById('example'));

35 +ReactDOM.render(root, document.getElementById('example'));

36 ```

38 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

41 var root = <ul className="my-list">

42 <li>Text Content</li>

43 </ul>;

44 -React.render(root, document.getElementById('example'));

44 +ReactDOM.render(root, document.getElementById('example'));

45 ```

47 ### Factories

@@ -59,7 +59,7 @@ It allows you to create a convenient short-hand instead of typing out `React.cre

59 ```javascript

60 var div = React.createFactory('div');

61 var root = div({ className: 'my-div' });

62 -React.render(root, document.getElementById('example'));

62 +ReactDOM.render(root, document.getElementById('example'));

63 ```

65 React already has built-in factories for common HTML tags:

@@ -119,17 +119,17 @@ OR using JSX:

119 var element = <MyComponent />;

120 ```

121

122 -When this is passed to `React.render`, React will call the constructor for you and create a `ReactComponent`, which is returned.

122 +When this is passed to `ReactDOM.render`, React will call the constructor for you and create a `ReactComponent`, which is returned.

123

124 ```javascript

125 -var component = React.render(element, document.getElementById('example'));

125 +var component = ReactDOM.render(element, document.getElementById('example'));

126 ```

127

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

128 +If you keep calling `ReactDOM.render` with the same type of `ReactElement` and the same container DOM `Element` it always returns the same instance. This instance is stateful.

129

130 ```javascript

131 -var componentA = React.render(<MyComponent />, document.getElementById('example'));

132 -var componentB = React.render(<MyComponent />, document.getElementById('example'));

131 +var componentA = ReactDOM.render(<MyComponent />, document.getElementById('example'));

132 +var componentB = ReactDOM.render(<MyComponent />, document.getElementById('example'));

133 componentA === componentB; // true

134 ```

135

@@ -143,7 +143,7 @@ The `render` method of a `ReactComponent` is expected to return another `ReactEl

143 ### Entry Point

144

145 ```

146 -React.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent;

146 +ReactDOM.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent;

147 ```

148

149 ### Nodes and Elements

docs/docs/thinking-in-react.it-IT.md

+1 -1

@@ -69,7 +69,7 @@ Per costruire una versione statica della tua applicazione dhe visualizzi il tuo

70 Puoi costruire dall'alto in basso, o dal basso in alto. Ovvero, puoi cominciare a costruire i componenti più in alto nella gerarchia (cioè cominciare con `FilterableProductTable`) oppure con quelli più in basso (`ProductRow`). In esempi più semplici, è solitamente più facile andare dall'alto in basso, mentre in progetti più grandi è più facile andare dal basso in alto e scrivere test mentre costruisci.

72 -Alla fine di questo passo avrai una libreria di componenti riutilizzabili che visualizzano il tuo modello dati. I componenti avranno soltanto metodi `render()` dal momento che questa è una versione statica della tua applicazione. Il componente al vertice della gerarchia (`FilterableProductTable`) prenderà il tuo modello dati come una proprietà. Se apporti un cambiamento al tuo modello dati sottostante e chiami nuovamente `React.render()`, la UI sarà aggiornata. È facile vedere come la tua UI viene aggiornata e dove applicare cambiamenti dal momento che non c'è nulla di complicato. Il **flusso dati unidirezionale** di React (detto anche *binding unidirezionale*) mantiene tutto modulare e veloce.

72 +Alla fine di questo passo avrai una libreria di componenti riutilizzabili che visualizzano il tuo modello dati. I componenti avranno soltanto metodi `render()` dal momento che questa è una versione statica della tua applicazione. Il componente al vertice della gerarchia (`FilterableProductTable`) prenderà il tuo modello dati come una proprietà. Se apporti un cambiamento al tuo modello dati sottostante e chiami nuovamente `ReactDOM.render()`, la UI sarà aggiornata. È facile vedere come la tua UI viene aggiornata e dove applicare cambiamenti dal momento che non c'è nulla di complicato. Il **flusso dati unidirezionale** di React (detto anche *binding unidirezionale*) mantiene tutto modulare e veloce.

74 Fai riferimento alla [documentazione React](/react/docs/) se hai bisogno di aiuto nell'eseguire questo passo.

docs/docs/thinking-in-react.ko-KR.md

+1 -1

@@ -69,7 +69,7 @@ React의 많은 뛰어난 점들 중 하나는 생각을 하면서 애플리케

70 껍데기부터 혹은 속알맹이부터 만들 수 있습니다. 즉 계층구조상 위에서부터 (`FilterableProductTable` 부터) 혹은 아래에서부터 (`ProductRow`), 어느 방향에서든 시작해도 됩니다. 통상 큰 프로젝트에서는 계층구조상 위에서부터 시작하는 것이 쉽고, 테스트를 작성할때는, 아래에서부터 시작하는 것이 쉽습니다.

72 -이 단계의 결과, 자료 모델을 그리는 재활용 가능한 컴포넌트의 라이브러리를 갖게 되었습니다. 정적버전 이후로 컴포넌트들은 오직 `render()` 메소드만 갖고 있습니다. 계층구조상 가장 위의 컴포넌트 (`FilterableProductTable`)은 자료 모델을 prop으로 취할 것입니다. 자료 모델이 변했을 때, `React.render()`를 다시 부르면 UI가 업데이트 됩니다. 어떻게 UI가 업데이트 되는지 참 알기 쉽습니다. 자료가 바뀌어도 처리해야 할 복잡한 일이 아무것도 없습니다. React의 **단일 방향 자료 흐름** (혹은 *단일방향 바인딩*)이 모든것을 모듈식으로, 추론하기 쉽게, 그리고 빠르게 유지해줍니다.

72 +이 단계의 결과, 자료 모델을 그리는 재활용 가능한 컴포넌트의 라이브러리를 갖게 되었습니다. 정적버전 이후로 컴포넌트들은 오직 `render()` 메소드만 갖고 있습니다. 계층구조상 가장 위의 컴포넌트 (`FilterableProductTable`)은 자료 모델을 prop으로 취할 것입니다. 자료 모델이 변했을 때, `ReactDOM.render()`를 다시 부르면 UI가 업데이트 됩니다. 어떻게 UI가 업데이트 되는지 참 알기 쉽습니다. 자료가 바뀌어도 처리해야 할 복잡한 일이 아무것도 없습니다. React의 **단일 방향 자료 흐름** (혹은 *단일방향 바인딩*)이 모든것을 모듈식으로, 추론하기 쉽게, 그리고 빠르게 유지해줍니다.

74 이 단계를 진행하는 데에 도움이 필요하시다면, [React 문서](/react/docs/getting-started-ko-KR.html)를 참조하세요.

docs/docs/thinking-in-react.md

+1 -1

@@ -69,7 +69,7 @@ To build a static version of your app that renders your data model, you'll want

70 You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy (i.e. starting with `FilterableProductTable`) or with the ones lower in it (`ProductRow`). In simpler examples, it's usually easier to go top-down, and on larger projects, it's easier to go bottom-up and write tests as you build.

72 -At the end of this step, you'll have a library of reusable components that render your data model. The components will only have `render()` methods since this is a static version of your app. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. If you make a change to your underlying data model and call `React.render()` again, the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on. React's **one-way data flow** (also called *one-way binding*) keeps everything modular and fast.

72 +At the end of this step, you'll have a library of reusable components that render your data model. The components will only have `render()` methods since this is a static version of your app. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. If you make a change to your underlying data model and call `ReactDOM.render()` again, the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on. React's **one-way data flow** (also called *one-way binding*) keeps everything modular and fast.

74 Simply refer to the [React docs](/react/docs/) if you need help executing this step.

docs/docs/tutorial.it-IT.md

+17 -17

@@ -85,7 +85,7 @@ var CommentBox = React.createClass({

85 );

86 }

87 });

88 -React.render(

88 +ReactDOM.render(

89 <CommentBox />,

90 document.getElementById('content')

91 );

@@ -108,7 +108,7 @@ var CommentBox = React.createClass({displayName: 'CommentBox',

108 );

109 }

110 });

111 -React.render(

111 +ReactDOM.render(

112 React.createElement(CommentBox, null),

113 document.getElementById('content')

114 );

@@ -124,11 +124,11 @@ I tag `<div>` non sono veri nodi DOM; sono istanze dei componenti React `div`. P

124

125 Non devi necessariamente restituire semplice HTML. Puoi anche restituire un albero di componenti costruiti da te (o da qualcun altro). Questo è ciò che rende React **componibile**: una caratteristica chiave dei front-end manutenibili.

126

127 -`React.render()` istanzia il componente radice, avvia il framework, e inietta il markup in un elemento DOM nativo, fornito come secondo argomento.

127 +`ReactDOM.render()` istanzia il componente radice, avvia il framework, e inietta il markup in un elemento DOM nativo, fornito come secondo argomento.

128

129 ## Comporre componenti

130

131 -Costruiamo degli scheletri per `CommentList` e `CommentForm` che saranno, nuovamente, dei semplici `<div>`. Aggiungi questi due componenti al tuo file, mantenendo la dichiarazione esistente di `CommentBox` e la chiamata a `React.render`:

131 +Costruiamo degli scheletri per `CommentList` e `CommentForm` che saranno, nuovamente, dei semplici `<div>`. Aggiungi questi due componenti al tuo file, mantenendo la dichiarazione esistente di `CommentBox` e la chiamata a `ReactDOM.render`:

132

133 ```javascript

134 // tutorial2.js

@@ -293,7 +293,7 @@ var data = [

293 ];

294 ```

295

296 -Dobbiamo inserire questi dati in `CommentList` in maniera modulare. Modifica `CommentBox` e la chiamata a `React.render()` per passare questi dati a `CommentList` tramite proprietà:

296 +Dobbiamo inserire questi dati in `CommentList` in maniera modulare. Modifica `CommentBox` e la chiamata a `ReactDOM.render()` per passare questi dati a `CommentList` tramite proprietà:

297

298 ```javascript{7,15}

299 // tutorial9.js

@@ -309,7 +309,7 @@ var CommentBox = React.createClass({

309 }

310 });

311

312 -React.render(

312 +ReactDOM.render(

313 <CommentBox data={data} />,

314 document.getElementById('content')

315 );

@@ -345,7 +345,7 @@ Sostituiamo i dati scritti nel codice con dati dinamici ottenuti dal server. Rim

345

346 ```javascript{3}

347 // tutorial11.js

348 -React.render(

348 +ReactDOM.render(

349 <CommentBox url="/api/comments" />,

350 document.getElementById('content')

351 );

@@ -460,7 +460,7 @@ var CommentBox = React.createClass({

460 }

461 });

462

463 -React.render(

463 +ReactDOM.render(

464 <CommentBox url="/api/comments" pollInterval={2000} />,

465 document.getElementById('content')

466 );

@@ -495,14 +495,14 @@ Rendiamo il modulo interattivo. Quando l'utente invia il modulo, dobbiamo ripuli

495 var CommentForm = React.createClass({

496 handleSubmit: function(e) {

497 e.preventDefault();

498 - var author = React.findDOMNode(this.refs.author).value.trim();

499 - var text = React.findDOMNode(this.refs.text).value.trim();

498 + var author = ReactDOM.findDOMNode(this.refs.author).value.trim();

499 + var text = ReactDOM.findDOMNode(this.refs.text).value.trim();

500 if (!text || !author) {

501 return;

502 }

503 // TODO: invia la richiesta al server

504 - React.findDOMNode(this.refs.author).value = '';

505 - React.findDOMNode(this.refs.text).value = '';

504 + ReactDOM.findDOMNode(this.refs.author).value = '';

505 + ReactDOM.findDOMNode(this.refs.text).value = '';

506 return;

507 },

508 render: function() {

@@ -525,7 +525,7 @@ Chiamiamo `preventDefault()` sull'evento per prevenire l'azione predefinita del

525

526 ##### Refs

527

528 -Usiamo l'attributo `ref` per assegnare un nome a un componente figlio e `this.refs` per riferirsi al componente. Possiamo chiamare `React.findDOMNode(component)` su di un componente per ottenere l'elemento nativo del DOM del browser.

528 +Usiamo l'attributo `ref` per assegnare un nome a un componente figlio e `this.refs` per riferirsi al componente. Possiamo chiamare `ReactDOM.findDOMNode(component)` su di un componente per ottenere l'elemento nativo del DOM del browser.

529

530 ##### Callback come proprietà

531

@@ -578,14 +578,14 @@ Chiamiamo la callback da `CommentForm` quando l'utente invia il modulo:

578 var CommentForm = React.createClass({

579 handleSubmit: function(e) {

580 e.preventDefault();

581 - var author = React.findDOMNode(this.refs.author).value.trim();

582 - var text = React.findDOMNode(this.refs.text).value.trim();

581 + var author = ReactDOM.findDOMNode(this.refs.author).value.trim();

582 + var text = ReactDOM.findDOMNode(this.refs.text).value.trim();

583 if (!text || !author) {

584 return;

585 }

586 this.props.onCommentSubmit({author: author, text: text});

587 - React.findDOMNode(this.refs.author).value = '';

588 - React.findDOMNode(this.refs.text).value = '';

587 + ReactDOM.findDOMNode(this.refs.author).value = '';

588 + ReactDOM.findDOMNode(this.refs.text).value = '';

589 return;

590 },

591 render: function() {

docs/docs/tutorial.ja-JP.md

+16 -16

@@ -84,7 +84,7 @@ var CommentBox = React.createClass({

84 );

85 }

86 });

87 -React.render(

87 +ReactDOM.render(

88 <CommentBox />,

89 document.getElementById('content')

90 );

@@ -105,7 +105,7 @@ var CommentBox = React.createClass({displayName: 'CommentBox',

105 );

106 }

107 });

108 -React.render(

108 +ReactDOM.render(

109 React.createElement(CommentBox, null),

110 document.getElementById('content')

111 );

@@ -121,7 +121,7 @@ React.render(

121

122 実際の HTML を返す必要はありません。自分が（もしくは他の誰かが）組み立てたコンポーネントツリーを返せばいいのです。これこそ React が **composable**な（組み立てられる）ものである理由であり、この大事なルールを守ればフロントエンドはメンテナンスしやすいものとなります。

123

124 -`React.render()` はまずルートコンポーネントのインスタンスを作り、フレームワークを立ち上げます。そして、第2引数で与えられた実際の DOM 要素にマークアップを挿入します。

124 +`ReactDOM.render()` はまずルートコンポーネントのインスタンスを作り、フレームワークを立ち上げます。そして、第2引数で与えられた実際の DOM 要素にマークアップを挿入します。

125

126 ## コンポーネントの組み立て

127

@@ -286,7 +286,7 @@ var data = [

286 ];

287 ```

288

289 -このデータはモジュールを使って `CommentList` に取り込む必要があります。`CommentBox` の `React.render()` の部分を手直しして、props を通してデータが `CommentList` へ渡るようにしましょう。

289 +このデータはモジュールを使って `CommentList` に取り込む必要があります。`CommentBox` の `ReactDOM.render()` の部分を手直しして、props を通してデータが `CommentList` へ渡るようにしましょう。

290

291 ```javascript{7,15}

292 // tutorial9.js

@@ -302,7 +302,7 @@ var CommentBox = React.createClass({

302 }

303 });

304

305 -React.render(

305 +ReactDOM.render(

306 <CommentBox data={data} />,

307 document.getElementById('content')

308 );

@@ -338,7 +338,7 @@ var CommentList = React.createClass({

338

339 ```javascript{3}

340 // tutorial11.js

341 -React.render(

341 +ReactDOM.render(

342 <CommentBox url="comments.json" />,

343 document.getElementById('content')

344 );

@@ -456,7 +456,7 @@ var CommentBox = React.createClass({

456 }

457 });

458

459 -React.render(

459 +ReactDOM.render(

460 <CommentBox url="comments.json" pollInterval={2000} />,

461 document.getElementById('content')

462 );

@@ -491,14 +491,14 @@ var CommentForm = React.createClass({

491 var CommentForm = React.createClass({

492 handleSubmit: function(e) {

493 e.preventDefault();

494 - var author = React.findDOMNode(this.refs.author).value.trim();

495 - var text = React.findDOMNode(this.refs.text).value.trim();

494 + var author = ReactDOM.findDOMNode(this.refs.author).value.trim();

495 + var text = ReactDOM.findDOMNode(this.refs.text).value.trim();

496 if (!text || !author) {

497 return;

498 }

499 // TODO: サーバにリクエストを送信

500 - React.findDOMNode(this.refs.author).value = '';

501 - React.findDOMNode(this.refs.text).value = '';

500 + ReactDOM.findDOMNode(this.refs.author).value = '';

501 + ReactDOM.findDOMNode(this.refs.text).value = '';

502 return;

503 },

504 render: function() {

@@ -521,7 +521,7 @@ React がコンポーネントにイベントハンドラを登録する際は c

521

522 ##### Refs

523

524 -先程のコードでは `ref` 属性値を使って子のコンポーネントに名前を付けており、`this.ref` でそのコンポーネントを参照しています。`React.findDOMNode(component)` にコンポーネントを指定して呼び出すことで、ブラウザの持つ実際の DOM 要素を取得することが出来ます。

524 +先程のコードでは `ref` 属性値を使って子のコンポーネントに名前を付けており、`this.ref` でそのコンポーネントを参照しています。`ReactDOM.findDOMNode(component)` にコンポーネントを指定して呼び出すことで、ブラウザの持つ実際の DOM 要素を取得することが出来ます。

525

526 ##### Props としてのコールバック

527

@@ -574,14 +574,14 @@ var CommentBox = React.createClass({

574 var CommentForm = React.createClass({

575 handleSubmit: function(e) {

576 e.preventDefault();

577 - var author = React.findDOMNode(this.refs.author).value.trim();

578 - var text = React.findDOMNode(this.refs.text).value.trim();

577 + var author = ReactDOM.findDOMNode(this.refs.author).value.trim();

578 + var text = ReactDOM.findDOMNode(this.refs.text).value.trim();

579 if (!text || !author) {

580 return;

581 }

582 this.props.onCommentSubmit({author: author, text: text});

583 - React.findDOMNode(this.refs.author).value = '';

584 - React.findDOMNode(this.refs.text).value = '';

583 + ReactDOM.findDOMNode(this.refs.author).value = '';

584 + ReactDOM.findDOMNode(this.refs.text).value = '';

585 return;

586 },

587 render: function() {

docs/docs/tutorial.ko-KR.md

+17 -17

@@ -84,7 +84,7 @@ var CommentBox = React.createClass({

84 );

85 }

86 });

87 -React.render(

87 +ReactDOM.render(

88 <CommentBox />,

89 document.getElementById('content')

90 );

@@ -107,7 +107,7 @@ var CommentBox = React.createClass({displayName: 'CommentBox',

107 );

108 }

109 });

110 -React.render(

110 +ReactDOM.render(

111 React.createElement(CommentBox, null),

112 document.getElementById('content')

113 );

@@ -123,11 +123,11 @@ JSX의 사용은 선택적이지만 JSX 문법이 일반 JavsScript보다 사용

123

124 일반적인 HTML만 리턴할 수 있는 것은 아닙니다. 여러분이 직접 만든 (또는 다른 사람들이 만들어 놓은) 컴포넌트의 트리를 리턴할 수도 있습니다. 이것이 React를 **조합가능(composable)하게 만듭니다**: 유지보수 가능한 프론트엔드를 위한 핵심 교리(key tenet)지요.

125

126 -`React.render()`는 최상위 컴포넌트의 인스턴스를 만들고, 두 번째 인수로 전달받은 DOM 엘리먼트에 마크업을 삽입해 프레임워크를 시작합니다.

126 +`ReactDOM.render()`는 최상위 컴포넌트의 인스턴스를 만들고, 두 번째 인수로 전달받은 DOM 엘리먼트에 마크업을 삽입해 프레임워크를 시작합니다.

127

128 ## 컴포넌트 조합하기

129

130 -이제 `CommentList`와 `CommentForm`을 위한 뼈대를 구축해 봅시다. 이전과 마찬가지로 단순히 `<div>` 태그 하나 입니다. 파일에 두 컴포넌트를 추가해, 이미 있는 `CommentBox` 선언을 참고로 `React.render`를 호출합시다.

130 +이제 `CommentList`와 `CommentForm`을 위한 뼈대를 구축해 봅시다. 이전과 마찬가지로 단순히 `<div>` 태그 하나 입니다. 파일에 두 컴포넌트를 추가해, 이미 있는 `CommentBox` 선언을 참고로 `ReactDOM.render`를 호출합시다.

131

132 ```javascript

133 // tutorial2.js

@@ -289,7 +289,7 @@ var data = [

289 ];

290 ```

291

292 -이 데이터를 모듈화된 방식으로 `CommentList`에 넣어야 합니다. props을 이용해 데이터를 넘기도록 `CommentBox`와 `React.render()` 호출 코드를 수정합시다.

292 +이 데이터를 모듈화된 방식으로 `CommentList`에 넣어야 합니다. props을 이용해 데이터를 넘기도록 `CommentBox`와 `ReactDOM.render()` 호출 코드를 수정합시다.

293

294 ```javascript{7,15}

295 // tutorial9.js

@@ -305,7 +305,7 @@ var CommentBox = React.createClass({

305 }

306 });

307

308 -React.render(

308 +ReactDOM.render(

309 <CommentBox data={data} />,

310 document.getElementById('content')

311 );

@@ -341,7 +341,7 @@ var CommentList = React.createClass({

341

342 ```javascript{3}

343 // tutorial11.js

344 -React.render(

344 +ReactDOM.render(

345 <CommentBox url="comments.json" />,

346 document.getElementById('content')

347 );

@@ -460,7 +460,7 @@ var CommentBox = React.createClass({

460 }

461 });

462

463 -React.render(

463 +ReactDOM.render(

464 <CommentBox url="comments.json" pollInterval={2000} />,

465 document.getElementById('content')

466 );

@@ -495,14 +495,14 @@ var CommentForm = React.createClass({

495 var CommentForm = React.createClass({

496 handleSubmit: function(e) {

497 e.preventDefault();

498 - var author = React.findDOMNode(this.refs.author).value.trim();

499 - var text = React.findDOMNode(this.refs.text).value.trim();

498 + var author = ReactDOM.findDOMNode(this.refs.author).value.trim();

499 + var text = ReactDOM.findDOMNode(this.refs.text).value.trim();

500 if (!text || !author) {

501 return;

502 }

503 // TODO: 서버에 요청을 전송합니다

504 - React.findDOMNode(this.refs.author).value = '';

505 - React.findDOMNode(this.refs.text).value = '';

504 + ReactDOM.findDOMNode(this.refs.author).value = '';

505 + ReactDOM.findDOMNode(this.refs.text).value = '';

506 return;

507 },

508 render: function() {

@@ -525,7 +525,7 @@ React는 카멜케이스 네이밍 컨벤션으로 컴포넌트에 이벤트 핸

525

526 ##### Refs

527

528 -우리는 자식 컴포넌트의 이름을 지정하기 위해 `ref` 어트리뷰트를, 컴포넌트를 참조하기 위해 `this.refs`를 사용합니다. 고유한(native) 브라우저 DOM 엘리먼트를 얻기 위해 `React.findDOMNode(component)`를 호출할 수 있습니다.

528 +우리는 자식 컴포넌트의 이름을 지정하기 위해 `ref` 어트리뷰트를, 컴포넌트를 참조하기 위해 `this.refs`를 사용합니다. 고유한(native) 브라우저 DOM 엘리먼트를 얻기 위해 `ReactDOM.findDOMNode(component)`를 호출할 수 있습니다.

529

530 ##### props으로 콜백 처리하기

531

@@ -578,14 +578,14 @@ var CommentBox = React.createClass({

578 var CommentForm = React.createClass({

579 handleSubmit: function(e) {

580 e.preventDefault();

581 - var author = React.findDOMNode(this.refs.author).value.trim();

582 - var text = React.findDOMNode(this.refs.text).value.trim();

581 + var author = ReactDOM.findDOMNode(this.refs.author).value.trim();

582 + var text = ReactDOM.findDOMNode(this.refs.text).value.trim();

583 if (!text || !author) {

584 return;

585 }

586 this.props.onCommentSubmit({author: author, text: text});

587 - React.findDOMNode(this.refs.author).value = '';

588 - React.findDOMNode(this.refs.text).value = '';

587 + ReactDOM.findDOMNode(this.refs.author).value = '';

588 + ReactDOM.findDOMNode(this.refs.text).value = '';

589 return;

590 },

591 render: function() {

docs/docs/tutorial.md

+17 -17

@@ -85,7 +85,7 @@ var CommentBox = React.createClass({

85 );

86 }

87 });

88 -React.render(

88 +ReactDOM.render(

89 <CommentBox />,

90 document.getElementById('content')

91 );

@@ -108,7 +108,7 @@ var CommentBox = React.createClass({displayName: 'CommentBox',

108 );

109 }

110 });

111 -React.render(

111 +ReactDOM.render(

112 React.createElement(CommentBox, null),

113 document.getElementById('content')

114 );

@@ -124,11 +124,11 @@ The `<div>` tags are not actual DOM nodes; they are instantiations of React `div

124

125 You do not have to return basic HTML. You can return a tree of components that you (or someone else) built. This is what makes React **composable**: a key tenet of maintainable frontends.

126

127 -`React.render()` instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument.

127 +`ReactDOM.render()` instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument.

128

129 ## Composing components

130

131 -Let's build skeletons for `CommentList` and `CommentForm` which will, again, be simple `<div>`s. Add these two components to your file, keeping the existing `CommentBox` declaration and `React.render` call:

131 +Let's build skeletons for `CommentList` and `CommentForm` which will, again, be simple `<div>`s. Add these two components to your file, keeping the existing `CommentBox` declaration and `ReactDOM.render` call:

132

133 ```javascript

134 // tutorial2.js

@@ -293,7 +293,7 @@ var data = [

293 ];

294 ```

295

296 -We need to get this data into `CommentList` in a modular way. Modify `CommentBox` and the `React.render()` call to pass this data into the `CommentList` via props:

296 +We need to get this data into `CommentList` in a modular way. Modify `CommentBox` and the `ReactDOM.render()` call to pass this data into the `CommentList` via props:

297

298 ```javascript{7,15}

299 // tutorial9.js

@@ -309,7 +309,7 @@ var CommentBox = React.createClass({

309 }

310 });

311

312 -React.render(

312 +ReactDOM.render(

313 <CommentBox data={data} />,

314 document.getElementById('content')

315 );

@@ -345,7 +345,7 @@ Let's replace the hard-coded data with some dynamic data from the server. We wil

345

346 ```javascript{3}

347 // tutorial11.js

348 -React.render(

348 +ReactDOM.render(

349 <CommentBox url="/api/comments" />,

350 document.getElementById('content')

351 );

@@ -460,7 +460,7 @@ var CommentBox = React.createClass({

460 }

461 });

462

463 -React.render(

463 +ReactDOM.render(

464 <CommentBox url="/api/comments" pollInterval={2000} />,

465 document.getElementById('content')

466 );

@@ -495,14 +495,14 @@ Let's make the form interactive. When the user submits the form, we should clear

495 var CommentForm = React.createClass({

496 handleSubmit: function(e) {

497 e.preventDefault();

498 - var author = React.findDOMNode(this.refs.author).value.trim();

499 - var text = React.findDOMNode(this.refs.text).value.trim();

498 + var author = this.refs.author.value.trim();

499 + var text = this.refs.text.value.trim();

500 if (!text || !author) {

501 return;

502 }

503 // TODO: send request to the server

504 - React.findDOMNode(this.refs.author).value = '';

505 - React.findDOMNode(this.refs.text).value = '';

504 + this.refs.author.value = '';

505 + this.refs.text.value = '';

506 return;

507 },

508 render: function() {

@@ -525,7 +525,7 @@ Call `preventDefault()` on the event to prevent the browser's default action of

525

526 ##### Refs

527

528 -We use the `ref` attribute to assign a name to a child component and `this.refs` to reference the component. We can call `React.findDOMNode(component)` on a component to get the native browser DOM element.

528 +We use the `ref` attribute to assign a name to a child component and `this.refs` to reference the component. We can call `ReactDOM.findDOMNode(component)` on a component to get the native browser DOM element.

529

530 ##### Callbacks as props

531

@@ -578,14 +578,14 @@ Let's call the callback from the `CommentForm` when the user submits the form:

578 var CommentForm = React.createClass({

579 handleSubmit: function(e) {

580 e.preventDefault();

581 - var author = React.findDOMNode(this.refs.author).value.trim();

582 - var text = React.findDOMNode(this.refs.text).value.trim();

581 + var author = this.refs.author.value.trim();

582 + var text = this.refs.text.value.trim();

583 if (!text || !author) {

584 return;

585 }

586 this.props.onCommentSubmit({author: author, text: text});

587 - React.findDOMNode(this.refs.author).value = '';

588 - React.findDOMNode(this.refs.text).value = '';

587 + this.refs.author.value = '';

588 + this.refs.text.value = '';

589 return;

590 },

591 render: function() {

docs/downloads.md

+2 -2

@@ -55,8 +55,8 @@ All scripts are also available via [CDNJS](https://cdnjs.com/libraries/react/).

55 If you're using an npm-compatible packaging system like browserify or webpack, you can use the `react` package. After installing it using `npm install react` or adding `react` to `package.json`, you can use React:

57 ```js

58 -var React = require('react');

59 -React.render(...);

58 +var React = require('react-dom');

59 +ReactDOM.render(...);

60 ```

62 If you'd like to use any [add-ons](/react/docs/addons.html), use `var React = require('react/addons');` instead.

docs/js/react-dom.js new

+42

@@ -0,0 +1,42 @@

1 +/**

2 + * ReactDOM v0.14.0-rc1

3 + *

6 + *

7 + * This source code is licensed under the BSD-style license found in the

8 + * LICENSE file in the root directory of this source tree. An additional grant

9 + * of patent rights can be found in the PATENTS file in the same directory.

10 + *

11 + */

12 +// Based off https://github.com/ForbesLindesay/umd/blob/master/template.js

13 +;(function(f) {

14 + // CommonJS

15 + if (typeof exports === "object" && typeof module !== "undefined") {

16 + module.exports = f(require('react'));

17 +

18 + // RequireJS

19 + } else if (typeof define === "function" && define.amd) {

20 + define(['react'], f);

21 +

22 + // <script>

23 + } else {

24 + var g

25 + if (typeof window !== "undefined") {

26 + g = window;

27 + } else if (typeof global !== "undefined") {

28 + g = global;

29 + } else if (typeof self !== "undefined") {

30 + g = self;

31 + } else {

32 + // works providing we're not in "use strict";

33 + // needed for Java 8 Nashorn

34 + // see https://github.com/facebook/react/issues/3037

35 + g = this;

36 + }

37 + g.ReactDOM = f(g.React);

38 + }

39 +

40 +})(function(React) {

41 + return React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

42 +});

docs/js/react.js

+6844 -7692

@@ -1,6 +1,6 @@

1 -/**

2 - * React v0.13.3

3 - */

1 + /**

2 + * React v0.14.0-rc1

3 + */

4 (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.React = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){

5 /**

@@ -13,145 +13,35 @@

13 * @providesModule React

14 */

16 -/* globals __REACT_DEVTOOLS_GLOBAL_HOOK__*/

17 -

16 'use strict';

20 -var EventPluginUtils = _dereq_(19);

21 -var ReactChildren = _dereq_(32);

22 -var ReactComponent = _dereq_(34);

23 -var ReactClass = _dereq_(33);

24 -var ReactContext = _dereq_(38);

25 -var ReactCurrentOwner = _dereq_(39);

26 -var ReactElement = _dereq_(57);

27 -var ReactElementValidator = _dereq_(58);

28 -var ReactDOM = _dereq_(40);

29 -var ReactDOMTextComponent = _dereq_(51);

30 -var ReactDefaultInjection = _dereq_(54);

31 -var ReactInstanceHandles = _dereq_(66);

32 -var ReactMount = _dereq_(70);

33 -var ReactPerf = _dereq_(75);

34 -var ReactPropTypes = _dereq_(78);

35 -var ReactReconciler = _dereq_(81);

36 -var ReactServerRendering = _dereq_(84);

37 -

38 -var assign = _dereq_(27);

39 -var findDOMNode = _dereq_(117);

40 -var onlyChild = _dereq_(144);

41 -

42 -ReactDefaultInjection.inject();

43 -

44 -var createElement = ReactElement.createElement;

45 -var createFactory = ReactElement.createFactory;

46 -var cloneElement = ReactElement.cloneElement;

47 -

48 -if ("production" !== "development") {

49 - createElement = ReactElementValidator.createElement;

50 - createFactory = ReactElementValidator.createFactory;

51 - cloneElement = ReactElementValidator.cloneElement;

52 -}

53 -

54 -var render = ReactPerf.measure('React', 'render', ReactMount.render);

55 -

56 -var React = {

57 - Children: {

58 - map: ReactChildren.map,

59 - forEach: ReactChildren.forEach,

60 - count: ReactChildren.count,

61 - only: onlyChild

62 - },

63 - Component: ReactComponent,

64 - DOM: ReactDOM,

65 - PropTypes: ReactPropTypes,

66 - initializeTouchEvents: function(shouldUseTouch) {

67 - EventPluginUtils.useTouchEvents = shouldUseTouch;

68 - },

69 - createClass: ReactClass.createClass,

70 - createElement: createElement,

71 - cloneElement: cloneElement,

72 - createFactory: createFactory,

73 - createMixin: function(mixin) {

74 - // Currently a noop. Will be used to validate and trace mixins.

75 - return mixin;

76 - },

77 - constructAndRenderComponent: ReactMount.constructAndRenderComponent,

78 - constructAndRenderComponentByID: ReactMount.constructAndRenderComponentByID,

79 - findDOMNode: findDOMNode,

80 - render: render,

81 - renderToString: ReactServerRendering.renderToString,

82 - renderToStaticMarkup: ReactServerRendering.renderToStaticMarkup,

83 - unmountComponentAtNode: ReactMount.unmountComponentAtNode,

84 - isValidElement: ReactElement.isValidElement,

85 - withContext: ReactContext.withContext,

86 -

87 - // Hook for JSX spread, don't use this for anything else.

88 - __spread: assign

89 -};

18 +var ReactDOM = _dereq_(35);

19 +var ReactDOMServer = _dereq_(45);

20 +var ReactIsomorphic = _dereq_(63);

91 -// Inject the runtime into a devtools global hook regardless of browser.

92 -// Allows for debugging when the hook is injected on the page.

93 -if (

94 - typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&

95 - typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.inject === 'function') {

96 - __REACT_DEVTOOLS_GLOBAL_HOOK__.inject({

97 - CurrentOwner: ReactCurrentOwner,

98 - InstanceHandles: ReactInstanceHandles,

99 - Mount: ReactMount,

100 - Reconciler: ReactReconciler,

101 - TextComponent: ReactDOMTextComponent

102 - });

103 -}

22 +var assign = _dereq_(23);

23 +var deprecated = _dereq_(105);

105 -if ("production" !== "development") {

106 - var ExecutionEnvironment = _dereq_(21);

107 - if (ExecutionEnvironment.canUseDOM && window.top === window.self) {

25 +// `version` will be added here by ReactIsomorphic.

26 +var React = {};

109 - // If we're in Chrome, look for the devtools marker and provide a download

110 - // link if not installed.

111 - if (navigator.userAgent.indexOf('Chrome') > -1) {

112 - if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {

113 - console.debug(

114 - 'Download the React DevTools for a better development experience: ' +

115 - 'https://fb.me/react-devtools'

116 - );

117 - }

118 - }

28 +assign(React, ReactIsomorphic);

120 - var expectedFeatures = [

121 - // shims

122 - Array.isArray,

123 - Array.prototype.every,

124 - Array.prototype.forEach,

125 - Array.prototype.indexOf,

126 - Array.prototype.map,

127 - Date.now,

128 - Function.prototype.bind,

129 - Object.keys,

130 - String.prototype.split,

131 - String.prototype.trim,

132 -

133 - // shams

134 - Object.create,

135 - Object.freeze

136 - ];

30 +assign(React, {

31 + // ReactDOM

32 + findDOMNode: deprecated('findDOMNode', 'ReactDOM', 'react-dom', ReactDOM, ReactDOM.findDOMNode),

33 + render: deprecated('render', 'ReactDOM', 'react-dom', ReactDOM, ReactDOM.render),

34 + unmountComponentAtNode: deprecated('unmountComponentAtNode', 'ReactDOM', 'react-dom', ReactDOM, ReactDOM.unmountComponentAtNode),

138 - for (var i = 0; i < expectedFeatures.length; i++) {

139 - if (!expectedFeatures[i]) {

140 - console.error(

141 - 'One or more ES5 shim/shams expected by React are not available: ' +

142 - 'https://fb.me/react-warning-polyfills'

143 - );

144 - break;

145 - }

146 - }

147 - }

148 -}

36 + // ReactDOMServer

37 + renderToString: deprecated('renderToString', 'ReactDOMServer', 'react-dom/server', ReactDOMServer, ReactDOMServer.renderToString),

38 + renderToStaticMarkup: deprecated('renderToStaticMarkup', 'ReactDOMServer', 'react-dom/server', ReactDOMServer, ReactDOMServer.renderToStaticMarkup)

39 +});

150 -React.version = '0.13.3';

41 +React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ReactDOM;

43 module.exports = React;

153 -

154 -},{"117":117,"144":144,"19":19,"21":21,"27":27,"32":32,"33":33,"34":34,"38":38,"39":39,"40":40,"51":51,"54":54,"57":57,"58":58,"66":66,"70":70,"75":75,"78":78,"81":81,"84":84}],2:[function(_dereq_,module,exports){

44 +},{"105":105,"23":23,"35":35,"45":45,"63":63}],2:[function(_dereq_,module,exports){

45 /**

@@ -160,25 +50,35 @@ module.exports = React;

50 * LICENSE file in the root directory of this source tree. An additional grant

51 * of patent rights can be found in the PATENTS file in the same directory.

52 *

163 - * @providesModule AutoFocusMixin

53 + * @providesModule AutoFocusUtils

54 * @typechecks static-only

55 */

57 'use strict';

169 -var focusNode = _dereq_(119);

59 +var ReactMount = _dereq_(65);

60 +

61 +var findDOMNode = _dereq_(107);

62 +var focusNode = _dereq_(137);

171 -var AutoFocusMixin = {

172 - componentDidMount: function() {

64 +var Mixin = {

65 + componentDidMount: function () {

66 if (this.props.autoFocus) {

174 - focusNode(this.getDOMNode());

67 + focusNode(findDOMNode(this));

68 }

69 }

70 };

179 -module.exports = AutoFocusMixin;

72 +var AutoFocusUtils = {

73 + Mixin: Mixin,

74 +

75 + focusDOMComponent: function () {

76 + focusNode(ReactMount.getNode(this._rootNodeID));

77 + }

78 +};

181 -},{"119":119}],3:[function(_dereq_,module,exports){

80 +module.exports = AutoFocusUtils;

81 +},{"107":107,"137":137,"65":65}],3:[function(_dereq_,module,exports){

82 /**

@@ -194,21 +94,18 @@ module.exports = AutoFocusMixin;

94 'use strict';

96 var EventConstants = _dereq_(15);

197 -var EventPropagators = _dereq_(20);

198 -var ExecutionEnvironment = _dereq_(21);

199 -var FallbackCompositionState = _dereq_(22);

200 -var SyntheticCompositionEvent = _dereq_(93);

201 -var SyntheticInputEvent = _dereq_(97);

97 +var EventPropagators = _dereq_(19);

98 +var ExecutionEnvironment = _dereq_(129);

99 +var FallbackCompositionState = _dereq_(20);

100 +var SyntheticCompositionEvent = _dereq_(90);

101 +var SyntheticInputEvent = _dereq_(94);

102

203 -var keyOf = _dereq_(141);

103 +var keyOf = _dereq_(147);

104

105 var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space

106 var START_KEYCODE = 229;

107

208 -var canUseCompositionEvent = (

209 - ExecutionEnvironment.canUseDOM &&

210 - 'CompositionEvent' in window

211 -);

108 +var canUseCompositionEvent = ExecutionEnvironment.canUseDOM && 'CompositionEvent' in window;

109

110 var documentMode = null;

111 if (ExecutionEnvironment.canUseDOM && 'documentMode' in document) {

@@ -218,22 +115,12 @@ if (ExecutionEnvironment.canUseDOM && 'documentMode' in document) {

115 // Webkit offers a very useful `textInput` event that can be used to

116 // directly represent `beforeInput`. The IE `textinput` event is not as

117 // useful, so we don't use it.

221 -var canUseTextInputEvent = (

222 - ExecutionEnvironment.canUseDOM &&

223 - 'TextEvent' in window &&

224 - !documentMode &&

225 - !isPresto()

226 -);

118 +var canUseTextInputEvent = ExecutionEnvironment.canUseDOM && 'TextEvent' in window && !documentMode && !isPresto();

119

120 // In IE9+, we have access to composition events, but the data supplied

121 // by the native compositionend event may be incorrect. Japanese ideographic

122 // spaces, for instance (\u3000) are not recorded correctly.

231 -var useFallbackCompositionData = (

232 - ExecutionEnvironment.canUseDOM &&

233 - (

234 - (!canUseCompositionEvent || documentMode && documentMode > 8 && documentMode <= 11)

235 - )

236 -);

123 +var useFallbackCompositionData = ExecutionEnvironment.canUseDOM && (!canUseCompositionEvent || documentMode && documentMode > 8 && documentMode <= 11);

124

125 /**

126 * Opera <= 12 includes TextEvent in window, but does not fire

@@ -241,11 +128,7 @@ var useFallbackCompositionData = (

128 */

129 function isPresto() {

130 var opera = window.opera;

244 - return (

245 - typeof opera === 'object' &&

246 - typeof opera.version === 'function' &&

247 - parseInt(opera.version(), 10) <= 12

248 - );

131 + return typeof opera === 'object' && typeof opera.version === 'function' && parseInt(opera.version(), 10) <= 12;

132 }

133

134 var SPACEBAR_CODE = 32;

@@ -257,57 +140,31 @@ var topLevelTypes = EventConstants.topLevelTypes;

140 var eventTypes = {

141 beforeInput: {

142 phasedRegistrationNames: {

260 - bubbled: keyOf({onBeforeInput: null}),

261 - captured: keyOf({onBeforeInputCapture: null})

143 + bubbled: keyOf({ onBeforeInput: null }),

144 + captured: keyOf({ onBeforeInputCapture: null })

145 },

263 - dependencies: [

264 - topLevelTypes.topCompositionEnd,

265 - topLevelTypes.topKeyPress,

266 - topLevelTypes.topTextInput,

267 - topLevelTypes.topPaste

268 - ]

146 + dependencies: [topLevelTypes.topCompositionEnd, topLevelTypes.topKeyPress, topLevelTypes.topTextInput, topLevelTypes.topPaste]

147 },

148 compositionEnd: {

149 phasedRegistrationNames: {

272 - bubbled: keyOf({onCompositionEnd: null}),

273 - captured: keyOf({onCompositionEndCapture: null})

150 + bubbled: keyOf({ onCompositionEnd: null }),

151 + captured: keyOf({ onCompositionEndCapture: null })

152 },

275 - dependencies: [

276 - topLevelTypes.topBlur,

277 - topLevelTypes.topCompositionEnd,

278 - topLevelTypes.topKeyDown,

279 - topLevelTypes.topKeyPress,

280 - topLevelTypes.topKeyUp,

281 - topLevelTypes.topMouseDown

282 - ]

153 + dependencies: [topLevelTypes.topBlur, topLevelTypes.topCompositionEnd, topLevelTypes.topKeyDown, topLevelTypes.topKeyPress, topLevelTypes.topKeyUp, topLevelTypes.topMouseDown]

154 },

155 compositionStart: {

156 phasedRegistrationNames: {

286 - bubbled: keyOf({onCompositionStart: null}),

287 - captured: keyOf({onCompositionStartCapture: null})

157 + bubbled: keyOf({ onCompositionStart: null }),

158 + captured: keyOf({ onCompositionStartCapture: null })

159 },

289 - dependencies: [

290 - topLevelTypes.topBlur,

291 - topLevelTypes.topCompositionStart,

292 - topLevelTypes.topKeyDown,

293 - topLevelTypes.topKeyPress,

294 - topLevelTypes.topKeyUp,

295 - topLevelTypes.topMouseDown

296 - ]

160 + dependencies: [topLevelTypes.topBlur, topLevelTypes.topCompositionStart, topLevelTypes.topKeyDown, topLevelTypes.topKeyPress, topLevelTypes.topKeyUp, topLevelTypes.topMouseDown]

161 },

162 compositionUpdate: {

163 phasedRegistrationNames: {

300 - bubbled: keyOf({onCompositionUpdate: null}),

301 - captured: keyOf({onCompositionUpdateCapture: null})

164 + bubbled: keyOf({ onCompositionUpdate: null }),

165 + captured: keyOf({ onCompositionUpdateCapture: null })

166 },

303 - dependencies: [

304 - topLevelTypes.topBlur,

305 - topLevelTypes.topCompositionUpdate,

306 - topLevelTypes.topKeyDown,

307 - topLevelTypes.topKeyPress,

308 - topLevelTypes.topKeyUp,

309 - topLevelTypes.topMouseDown

310 - ]

167 + dependencies: [topLevelTypes.topBlur, topLevelTypes.topCompositionUpdate, topLevelTypes.topKeyDown, topLevelTypes.topKeyPress, topLevelTypes.topKeyUp, topLevelTypes.topMouseDown]

168 }

169 };

170

@@ -320,14 +177,11 @@ var hasSpaceKeypress = false;

177 * (cut, copy, select-all, etc.) even though no character is inserted.

178 */

179 function isKeypressCommand(nativeEvent) {

323 - return (

324 - (nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) &&

325 - // ctrlKey && altKey is equivalent to AltGr, and is not a command.

326 - !(nativeEvent.ctrlKey && nativeEvent.altKey)

327 - );

180 + return (nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) &&

181 + // ctrlKey && altKey is equivalent to AltGr, and is not a command.

182 + !(nativeEvent.ctrlKey && nativeEvent.altKey);

183 }

184

330 -

185 /**

186 * Translate native top level events into event types.

187 *

@@ -354,10 +208,7 @@ function getCompositionEventType(topLevelType) {

208 * @return {boolean}

209 */

210 function isFallbackCompositionStart(topLevelType, nativeEvent) {

357 - return (

358 - topLevelType === topLevelTypes.topKeyDown &&

359 - nativeEvent.keyCode === START_KEYCODE

360 - );

211 + return topLevelType === topLevelTypes.topKeyDown && nativeEvent.keyCode === START_KEYCODE;

212 }

213

214 /**

@@ -371,11 +222,11 @@ function isFallbackCompositionEnd(topLevelType, nativeEvent) {

222 switch (topLevelType) {

223 case topLevelTypes.topKeyUp:

224 // Command keys insert or clear IME input.

374 - return (END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1);

225 + return END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1;

226 case topLevelTypes.topKeyDown:

227 // Expect IME keyCode on each keydown. If we get any other

228 // code we must have exited earlier.

378 - return (nativeEvent.keyCode !== START_KEYCODE);

229 + return nativeEvent.keyCode !== START_KEYCODE;

230 case topLevelTypes.topKeyPress:

231 case topLevelTypes.topMouseDown:

232 case topLevelTypes.topBlur:

@@ -413,12 +264,7 @@ var currentComposition = null;

264 * @param {object} nativeEvent Native browser event.

265 * @return {?object} A SyntheticCompositionEvent.

266 */

416 -function extractCompositionEvent(

417 - topLevelType,

418 - topLevelTarget,

419 - topLevelTargetID,

420 - nativeEvent

421 -) {

267 +function extractCompositionEvent(topLevelType, topLevelTarget, topLevelTargetID, nativeEvent, nativeEventTarget) {

268 var eventType;

269 var fallbackData;

270

@@ -448,11 +294,7 @@ function extractCompositionEvent(

294 }

295 }

296

451 - var event = SyntheticCompositionEvent.getPooled(

452 - eventType,

453 - topLevelTargetID,

454 - nativeEvent

455 - );

297 + var event = SyntheticCompositionEvent.getPooled(eventType, topLevelTargetID, nativeEvent, nativeEventTarget);

298

299 if (fallbackData) {

300 // Inject data generated from fallback path into the synthetic event.

@@ -532,10 +374,7 @@ function getFallbackBeforeInputChars(topLevelType, nativeEvent) {

374 // If we are currently composing (IME) and using a fallback to do so,

375 // try to extract the composed characters from the fallback object.

376 if (currentComposition) {

535 - if (

536 - topLevelType === topLevelTypes.topCompositionEnd ||

537 - isFallbackCompositionEnd(topLevelType, nativeEvent)

538 - ) {

377 + if (topLevelType === topLevelTypes.topCompositionEnd || isFallbackCompositionEnd(topLevelType, nativeEvent)) {

378 var chars = currentComposition.getData();

379 FallbackCompositionState.release(currentComposition);

380 currentComposition = null;

@@ -587,12 +426,7 @@ function getFallbackBeforeInputChars(topLevelType, nativeEvent) {

426 * @param {object} nativeEvent Native browser event.

427 * @return {?object} A SyntheticInputEvent.

428 */

590 -function extractBeforeInputEvent(

591 - topLevelType,

592 - topLevelTarget,

593 - topLevelTargetID,

594 - nativeEvent

595 -) {

429 +function extractBeforeInputEvent(topLevelType, topLevelTarget, topLevelTargetID, nativeEvent, nativeEventTarget) {

430 var chars;

431

432 if (canUseTextInputEvent) {

@@ -607,11 +441,7 @@ function extractBeforeInputEvent(

441 return null;

442 }

443

610 - var event = SyntheticInputEvent.getPooled(

611 - eventTypes.beforeInput,

612 - topLevelTargetID,

613 - nativeEvent

614 - );

444 + var event = SyntheticInputEvent.getPooled(eventTypes.beforeInput, topLevelTargetID, nativeEvent, nativeEventTarget);

445

446 event.data = chars;

447 EventPropagators.accumulateTwoPhaseDispatches(event);

@@ -648,32 +478,13 @@ var BeforeInputEventPlugin = {

478 * @return {*} An accumulation of synthetic events.

479 * @see {EventPluginHub.extractEvents}

480 */

651 - extractEvents: function(

652 - topLevelType,

653 - topLevelTarget,

654 - topLevelTargetID,

655 - nativeEvent

656 - ) {

657 - return [

658 - extractCompositionEvent(

659 - topLevelType,

660 - topLevelTarget,

661 - topLevelTargetID,

662 - nativeEvent

663 - ),

664 - extractBeforeInputEvent(

665 - topLevelType,

666 - topLevelTarget,

667 - topLevelTargetID,

668 - nativeEvent

669 - )

670 - ];

481 + extractEvents: function (topLevelType, topLevelTarget, topLevelTargetID, nativeEvent, nativeEventTarget) {

482 + return [extractCompositionEvent(topLevelType, topLevelTarget, topLevelTargetID, nativeEvent, nativeEventTarget), extractBeforeInputEvent(topLevelType, topLevelTarget, topLevelTargetID, nativeEvent, nativeEventTarget)];

483 }

484 };

485

486 module.exports = BeforeInputEventPlugin;

675 -

676 -},{"141":141,"15":15,"20":20,"21":21,"22":22,"93":93,"97":97}],4:[function(_dereq_,module,exports){

487 +},{"129":129,"147":147,"15":15,"19":19,"20":20,"90":90,"94":94}],4:[function(_dereq_,module,exports){

488 /**

@@ -691,26 +502,31 @@ module.exports = BeforeInputEventPlugin;

502 * CSS properties which accept numbers but are not in units of "px".

503 */

504 var isUnitlessNumber = {

505 + animationIterationCount: true,

506 boxFlex: true,

507 boxFlexGroup: true,

508 + boxOrdinalGroup: true,

509 columnCount: true,

510 flex: true,

511 flexGrow: true,

512 flexPositive: true,

513 flexShrink: true,

514 flexNegative: true,

515 + flexOrder: true,

516 fontWeight: true,

517 lineClamp: true,

518 lineHeight: true,

519 opacity: true,

520 order: true,

521 orphans: true,

522 + tabSize: true,

523 widows: true,

524 zIndex: true,

525 zoom: true,

526

527 // SVG-related properties

528 fillOpacity: true,

529 + stopOpacity: true,

530 strokeDashoffset: true,

531 strokeOpacity: true,

532 strokeWidth: true

@@ -734,8 +550,8 @@ var prefixes = ['Webkit', 'ms', 'Moz', 'O'];

550

551 // Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an

552 // infinite loop, because it iterates over the newly added props too.

737 -Object.keys(isUnitlessNumber).forEach(function(prop) {

738 - prefixes.forEach(function(prefix) {

553 +Object.keys(isUnitlessNumber).forEach(function (prop) {

554 + prefixes.forEach(function (prefix) {

555 isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];

556 });

557 });

@@ -751,10 +567,16 @@ Object.keys(isUnitlessNumber).forEach(function(prop) {

567 */

568 var shorthandPropertyExpansions = {

569 background: {

570 + backgroundAttachment: true,

571 + backgroundColor: true,

572 backgroundImage: true,

755 - backgroundPosition: true,

756 - backgroundRepeat: true,

757 - backgroundColor: true

573 + backgroundPositionX: true,

574 + backgroundPositionY: true,

575 + backgroundRepeat: true

576 + },

577 + backgroundPosition: {

578 + backgroundPositionX: true,

579 + backgroundPositionY: true

580 },

581 border: {

582 borderWidth: true,

@@ -788,6 +610,11 @@ var shorthandPropertyExpansions = {

610 fontSize: true,

611 lineHeight: true,

612 fontFamily: true

613 + },

614 + outline: {

615 + outlineWidth: true,

616 + outlineStyle: true,

617 + outlineColor: true

618 }

619 };

620

@@ -797,7 +624,6 @@ var CSSProperty = {

624 };

625

626 module.exports = CSSProperty;

800 -

627 },{}],5:[function(_dereq_,module,exports){

628 /**

@@ -814,27 +640,36 @@ module.exports = CSSProperty;

640 'use strict';

641

642 var CSSProperty = _dereq_(4);

817 -var ExecutionEnvironment = _dereq_(21);

643 +var ExecutionEnvironment = _dereq_(129);

644 +var ReactPerf = _dereq_(71);

645

819 -var camelizeStyleName = _dereq_(108);

820 -var dangerousStyleValue = _dereq_(113);

821 -var hyphenateStyleName = _dereq_(133);

822 -var memoizeStringOnly = _dereq_(143);

646 +var camelizeStyleName = _dereq_(131);

647 +var dangerousStyleValue = _dereq_(104);

648 +var hyphenateStyleName = _dereq_(142);

649 +var memoizeStringOnly = _dereq_(149);

650 var warning = _dereq_(154);

651

825 -var processStyleName = memoizeStringOnly(function(styleName) {

652 +var processStyleName = memoizeStringOnly(function (styleName) {

653 return hyphenateStyleName(styleName);

654 });

655

656 +var hasShorthandPropertyBug = false;

657 var styleFloatAccessor = 'cssFloat';

658 if (ExecutionEnvironment.canUseDOM) {

659 + var tempStyle = document.createElement('div').style;

660 + try {

661 + // IE8 throws "Invalid argument." if resetting shorthand style properties.

662 + tempStyle.font = '';

663 + } catch (e) {

664 + hasShorthandPropertyBug = true;

665 + }

666 // IE8 only supports accessing cssFloat (standard) as styleFloat

667 if (document.documentElement.style.cssFloat === undefined) {

668 styleFloatAccessor = 'styleFloat';

669 }

670 }

671

837 -if ("production" !== "development") {

672 +if ("development" !== 'production') {

673 // 'msTransform' is correct, but the other prefixes should be capitalized

674 var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/;

675

@@ -844,54 +679,38 @@ if ("production" !== "development") {

679 var warnedStyleNames = {};

680 var warnedStyleValues = {};

681

847 - var warnHyphenatedStyleName = function(name) {

682 + var warnHyphenatedStyleName = function (name) {

683 if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {

684 return;

685 }

686

687 warnedStyleNames[name] = true;

853 - ("production" !== "development" ? warning(

854 - false,

855 - 'Unsupported style property %s. Did you mean %s?',

856 - name,

857 - camelizeStyleName(name)

858 - ) : null);

688 + "development" !== 'production' ? warning(false, 'Unsupported style property %s. Did you mean %s?', name, camelizeStyleName(name)) : undefined;

689 };

690

861 - var warnBadVendoredStyleName = function(name) {

691 + var warnBadVendoredStyleName = function (name) {

692 if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {

693 return;

694 }

695

696 warnedStyleNames[name] = true;

867 - ("production" !== "development" ? warning(

868 - false,

869 - 'Unsupported vendor-prefixed style property %s. Did you mean %s?',

870 - name,

871 - name.charAt(0).toUpperCase() + name.slice(1)

872 - ) : null);

697 + "development" !== 'production' ? warning(false, 'Unsupported vendor-prefixed style property %s. Did you mean %s?', name, name.charAt(0).toUpperCase() + name.slice(1)) : undefined;

698 };

699

875 - var warnStyleValueWithSemicolon = function(name, value) {

700 + var warnStyleValueWithSemicolon = function (name, value) {

701 if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) {

702 return;

703 }

704

705 warnedStyleValues[value] = true;

881 - ("production" !== "development" ? warning(

882 - false,

883 - 'Style property values shouldn\'t contain a semicolon. ' +

884 - 'Try "%s: %s" instead.',

885 - name,

886 - value.replace(badStyleValueWithSemicolonPattern, '')

887 - ) : null);

706 + "development" !== 'production' ? warning(false, 'Style property values shouldn\'t contain a semicolon. ' + 'Try "%s: %s" instead.', name, value.replace(badStyleValueWithSemicolonPattern, '')) : undefined;

707 };

708

709 /**

710 * @param {string} name

711 * @param {*} value

712 */

894 - var warnValidStyle = function(name, value) {

713 + var warnValidStyle = function (name, value) {

714 if (name.indexOf('-') > -1) {

715 warnHyphenatedStyleName(name);

716 } else if (badVendoredStyleNamePattern.test(name)) {

@@ -919,14 +738,14 @@ var CSSPropertyOperations = {

738 * @param {object} styles

739 * @return {?string}

740 */

922 - createMarkupForStyles: function(styles) {

741 + createMarkupForStyles: function (styles) {

742 var serialized = '';

743 for (var styleName in styles) {

744 if (!styles.hasOwnProperty(styleName)) {

745 continue;

746 }

747 var styleValue = styles[styleName];

929 - if ("production" !== "development") {

748 + if ("development" !== 'production') {

749 warnValidStyle(styleName, styleValue);

750 }

751 if (styleValue != null) {

@@ -944,13 +763,13 @@ var CSSPropertyOperations = {

763 * @param {DOMElement} node

764 * @param {object} styles

765 */

947 - setValueForStyles: function(node, styles) {

766 + setValueForStyles: function (node, styles) {

767 var style = node.style;

768 for (var styleName in styles) {

769 if (!styles.hasOwnProperty(styleName)) {

770 continue;

771 }

953 - if ("production" !== "development") {

772 + if ("development" !== 'production') {

773 warnValidStyle(styleName, styles[styleName]);

774 }

775 var styleValue = dangerousStyleValue(styleName, styles[styleName]);

@@ -960,7 +779,7 @@ var CSSPropertyOperations = {

779 if (styleValue) {

780 style[styleName] = styleValue;

781 } else {

963 - var expansion = CSSProperty.shorthandPropertyExpansions[styleName];

782 + var expansion = hasShorthandPropertyBug && CSSProperty.shorthandPropertyExpansions[styleName];

783 if (expansion) {

784 // Shorthand property that IE8 won't like unsetting, so unset each

785 // component to placate it

@@ -976,9 +795,12 @@ var CSSPropertyOperations = {

795

796 };

797

979 -module.exports = CSSPropertyOperations;

798 +ReactPerf.measureMethods(CSSPropertyOperations, 'CSSPropertyOperations', {

799 + setValueForStyles: 'setValueForStyles'

800 +});

801

981 -},{"108":108,"113":113,"133":133,"143":143,"154":154,"21":21,"4":4}],6:[function(_dereq_,module,exports){

802 +module.exports = CSSPropertyOperations;

803 +},{"104":104,"129":129,"131":131,"142":142,"149":149,"154":154,"4":4,"71":71}],6:[function(_dereq_,module,exports){

804 /**

@@ -992,10 +814,10 @@ module.exports = CSSPropertyOperations;

814

815 'use strict';

816

995 -var PooledClass = _dereq_(28);

817 +var PooledClass = _dereq_(24);

818

997 -var assign = _dereq_(27);

998 -var invariant = _dereq_(135);

819 +var assign = _dereq_(23);

820 +var invariant = _dereq_(143);

821

822 /**

823 * A specialized pseudo-event module to help keep track of components waiting to

@@ -1022,7 +844,7 @@ assign(CallbackQueue.prototype, {

844 * @param {?object} context Context to call `callback` with.

845 * @internal

846 */

1025 - enqueue: function(callback, context) {

847 + enqueue: function (callback, context) {

848 this._callbacks = this._callbacks || [];

849 this._contexts = this._contexts || [];

850 this._callbacks.push(callback);

@@ -1035,17 +857,14 @@ assign(CallbackQueue.prototype, {

857 *

858 * @internal

859 */

1038 - notifyAll: function() {

860 + notifyAll: function () {

861 var callbacks = this._callbacks;

862 var contexts = this._contexts;

863 if (callbacks) {

1042 - ("production" !== "development" ? invariant(

1043 - callbacks.length === contexts.length,

1044 - 'Mismatched list of contexts in callback queue'

1045 - ) : invariant(callbacks.length === contexts.length));

864 + !(callbacks.length === contexts.length) ? "development" !== 'production' ? invariant(false, 'Mismatched list of contexts in callback queue') : invariant(false) : undefined;

865 this._callbacks = null;

866 this._contexts = null;

1048 - for (var i = 0, l = callbacks.length; i < l; i++) {

867 + for (var i = 0; i < callbacks.length; i++) {

868 callbacks[i].call(contexts[i]);

869 }

870 callbacks.length = 0;

@@ -1058,7 +877,7 @@ assign(CallbackQueue.prototype, {

877 *

878 * @internal

879 */

1061 - reset: function() {

880 + reset: function () {

881 this._callbacks = null;

882 this._contexts = null;

883 },

@@ -1066,7 +885,7 @@ assign(CallbackQueue.prototype, {

885 /**

886 * `PooledClass` looks for this.

887 */

1069 - destructor: function() {

888 + destructor: function () {

889 this.reset();

890 }

891

@@ -1075,8 +894,7 @@ assign(CallbackQueue.prototype, {

894 PooledClass.addPoolingTo(CallbackQueue);

895

896 module.exports = CallbackQueue;

1078 -

1079 -},{"135":135,"27":27,"28":28}],7:[function(_dereq_,module,exports){

897 +},{"143":143,"23":23,"24":24}],7:[function(_dereq_,module,exports){

898 /**

@@ -1091,34 +909,26 @@ module.exports = CallbackQueue;

909 'use strict';

910

911 var EventConstants = _dereq_(15);

1094 -var EventPluginHub = _dereq_(17);

1095 -var EventPropagators = _dereq_(20);

1096 -var ExecutionEnvironment = _dereq_(21);

1097 -var ReactUpdates = _dereq_(87);

1098 -var SyntheticEvent = _dereq_(95);

912 +var EventPluginHub = _dereq_(16);

913 +var EventPropagators = _dereq_(19);

914 +var ExecutionEnvironment = _dereq_(129);

915 +var ReactUpdates = _dereq_(83);

916 +var SyntheticEvent = _dereq_(92);

917

1100 -var isEventSupported = _dereq_(136);

1101 -var isTextInputElement = _dereq_(138);

1102 -var keyOf = _dereq_(141);

918 +var getEventTarget = _dereq_(113);

919 +var isEventSupported = _dereq_(118);

920 +var isTextInputElement = _dereq_(119);

921 +var keyOf = _dereq_(147);

922

923 var topLevelTypes = EventConstants.topLevelTypes;

924

925 var eventTypes = {

926 change: {

927 phasedRegistrationNames: {

1109 - bubbled: keyOf({onChange: null}),

1110 - captured: keyOf({onChangeCapture: null})

928 + bubbled: keyOf({ onChange: null }),

929 + captured: keyOf({ onChangeCapture: null })

930 },

1112 - dependencies: [

1113 - topLevelTypes.topBlur,

1114 - topLevelTypes.topChange,

1115 - topLevelTypes.topClick,

1116 - topLevelTypes.topFocus,

1117 - topLevelTypes.topInput,

1118 - topLevelTypes.topKeyDown,

1119 - topLevelTypes.topKeyUp,

1120 - topLevelTypes.topSelectionChange

1121 - ]

931 + dependencies: [topLevelTypes.topBlur, topLevelTypes.topChange, topLevelTypes.topClick, topLevelTypes.topFocus, topLevelTypes.topInput, topLevelTypes.topKeyDown, topLevelTypes.topKeyUp, topLevelTypes.topSelectionChange]

932 }

933 };

934

@@ -1134,26 +944,18 @@ var activeElementValueProp = null;

944 * SECTION: handle `change` event

945 */

946 function shouldUseChangeEvent(elem) {

1137 - return (

1138 - elem.nodeName === 'SELECT' ||

1139 - (elem.nodeName === 'INPUT' && elem.type === 'file')

1140 - );

947 + var nodeName = elem.nodeName && elem.nodeName.toLowerCase();

948 + return nodeName === 'select' || nodeName === 'input' && elem.type === 'file';

949 }

950

951 var doesChangeEventBubble = false;

952 if (ExecutionEnvironment.canUseDOM) {

953 // See `handleChange` comment below

1146 - doesChangeEventBubble = isEventSupported('change') && (

1147 - (!('documentMode' in document) || document.documentMode > 8)

1148 - );

954 + doesChangeEventBubble = isEventSupported('change') && (!('documentMode' in document) || document.documentMode > 8);

955 }

956

957 function manualDispatchChangeEvent(nativeEvent) {

1152 - var event = SyntheticEvent.getPooled(

1153 - eventTypes.change,

1154 - activeElementID,

1155 - nativeEvent

1156 - );

958 + var event = SyntheticEvent.getPooled(eventTypes.change, activeElementID, nativeEvent, getEventTarget(nativeEvent));

959 EventPropagators.accumulateTwoPhaseDispatches(event);

960

961 // If change and propertychange bubbled, we'd just bind to it like all the

@@ -1172,7 +974,7 @@ function manualDispatchChangeEvent(nativeEvent) {

974

975 function runEventInBatch(event) {

976 EventPluginHub.enqueueEvents(event);

1175 - EventPluginHub.processEventQueue();

977 + EventPluginHub.processEventQueue(false);

978 }

979

980 function startWatchingForChangeEventIE8(target, targetID) {

@@ -1190,18 +992,12 @@ function stopWatchingForChangeEventIE8() {

992 activeElementID = null;

993 }

994

1193 -function getTargetIDForChangeEvent(

1194 - topLevelType,

1195 - topLevelTarget,

1196 - topLevelTargetID) {

995 +function getTargetIDForChangeEvent(topLevelType, topLevelTarget, topLevelTargetID) {

996 if (topLevelType === topLevelTypes.topChange) {

997 return topLevelTargetID;

998 }

999 }

1201 -function handleEventsForChangeEventIE8(

1202 - topLevelType,

1203 - topLevelTarget,

1204 - topLevelTargetID) {

1000 +function handleEventsForChangeEventIE8(topLevelType, topLevelTarget, topLevelTargetID) {

1001 if (topLevelType === topLevelTypes.topFocus) {

1002 // stopWatching() should be a noop here but we call it just in case we

1003 // missed a blur event somehow.

@@ -1212,7 +1008,6 @@ function handleEventsForChangeEventIE8(

1008 }

1009 }

1010

1215 -

1011 /**

1012 * SECTION: handle `input` event

1013 */

@@ -1220,20 +1015,18 @@ var isInputEventSupported = false;

1015 if (ExecutionEnvironment.canUseDOM) {

1016 // IE9 claims to support the input event but fails to trigger it when

1017 // deleting text, so we ignore its input events

1223 - isInputEventSupported = isEventSupported('input') && (

1224 - (!('documentMode' in document) || document.documentMode > 9)

1225 - );

1018 + isInputEventSupported = isEventSupported('input') && (!('documentMode' in document) || document.documentMode > 9);

1019 }

1020

1021 /**

1022 * (For old IE.) Replacement getter/setter for the `value` property that gets

1023 * set on the active element.

1024 */

1232 -var newValueProp = {

1233 - get: function() {

1025 +var newValueProp = {

1026 + get: function () {

1027 return activeElementValueProp.get.call(this);

1028 },

1236 - set: function(val) {

1029 + set: function (val) {

1030 // Cast to a string so we can do equality checks.

1031 activeElementValue = '' + val;

1032 activeElementValueProp.set.call(this, val);

@@ -1249,10 +1042,7 @@ function startWatchingForValueChange(target, targetID) {

1042 activeElement = target;

1043 activeElementID = targetID;

1044 activeElementValue = target.value;

1252 - activeElementValueProp = Object.getOwnPropertyDescriptor(

1253 - target.constructor.prototype,

1254 - 'value'

1255 - );

1045 + activeElementValueProp = Object.getOwnPropertyDescriptor(target.constructor.prototype, 'value');

1046

1047 Object.defineProperty(activeElement, 'value', newValueProp);

1048 activeElement.attachEvent('onpropertychange', handlePropertyChange);

@@ -1297,10 +1087,7 @@ function handlePropertyChange(nativeEvent) {

1087 /**

1088 * If a `change` event should be fired, returns the target's ID.

1089 */

1300 -function getTargetIDForInputEvent(

1301 - topLevelType,

1302 - topLevelTarget,

1303 - topLevelTargetID) {

1090 +function getTargetIDForInputEvent(topLevelType, topLevelTarget, topLevelTargetID) {

1091 if (topLevelType === topLevelTypes.topInput) {

1092 // In modern browsers (i.e., not IE8 or IE9), the input event is exactly

1093 // what we want so fall through here and trigger an abstract event

@@ -1309,10 +1096,7 @@ function getTargetIDForInputEvent(

1096 }

1097

1098 // For IE8 and IE9.

1312 -function handleEventsForInputEventIE(

1313 - topLevelType,

1314 - topLevelTarget,

1315 - topLevelTargetID) {

1099 +function handleEventsForInputEventIE(topLevelType, topLevelTarget, topLevelTargetID) {

1100 if (topLevelType === topLevelTypes.topFocus) {

1101 // In IE8, we can capture almost all .value changes by adding a

1102 // propertychange handler and looking for events with propertyName

@@ -1335,13 +1119,8 @@ function handleEventsForInputEventIE(

1119 }

1120

1121 // For IE8 and IE9.

1338 -function getTargetIDForInputEventIE(

1339 - topLevelType,

1340 - topLevelTarget,

1341 - topLevelTargetID) {

1342 - if (topLevelType === topLevelTypes.topSelectionChange ||

1343 - topLevelType === topLevelTypes.topKeyUp ||

1344 - topLevelType === topLevelTypes.topKeyDown) {

1122 +function getTargetIDForInputEventIE(topLevelType, topLevelTarget, topLevelTargetID) {

1123 + if (topLevelType === topLevelTypes.topSelectionChange || topLevelType === topLevelTypes.topKeyUp || topLevelType === topLevelTypes.topKeyDown) {

1124 // On the selectionchange event, the target is just document which isn't

1125 // helpful for us so just check activeElement instead.

1126 //

@@ -1359,7 +1138,6 @@ function getTargetIDForInputEventIE(

1138 }

1139 }

1140

1362 -

1141 /**

1142 * SECTION: handle `click` event

1143 */

@@ -1367,16 +1145,10 @@ function shouldUseClickEvent(elem) {

1145 // Use the `click` event to detect changes to checkbox and radio inputs.

1146 // This approach works across all browsers, whereas `change` does not fire

1147 // until `blur` in IE8.

1370 - return (

1371 - elem.nodeName === 'INPUT' &&

1372 - (elem.type === 'checkbox' || elem.type === 'radio')

1373 - );

1148 + return elem.nodeName && elem.nodeName.toLowerCase() === 'input' && (elem.type === 'checkbox' || elem.type === 'radio');

1149 }

1150

1376 -function getTargetIDForClickEvent(

1377 - topLevelType,

1378 - topLevelTarget,

1379 - topLevelTargetID) {

1151 +function getTargetIDForClickEvent(topLevelType, topLevelTarget, topLevelTargetID) {

1152 if (topLevelType === topLevelTypes.topClick) {

1153 return topLevelTargetID;

1154 }

@@ -1404,11 +1176,7 @@ var ChangeEventPlugin = {

1176 * @return {*} An accumulation of synthetic events.

1177 * @see {EventPluginHub.extractEvents}

1178 */

1407 - extractEvents: function(

1408 - topLevelType,

1409 - topLevelTarget,

1410 - topLevelTargetID,

1411 - nativeEvent) {

1179 + extractEvents: function (topLevelType, topLevelTarget, topLevelTargetID, nativeEvent, nativeEventTarget) {

1180

1181 var getTargetIDFunc, handleEventFunc;

1182 if (shouldUseChangeEvent(topLevelTarget)) {

@@ -1429,36 +1197,24 @@ var ChangeEventPlugin = {

1197 }

1198

1199 if (getTargetIDFunc) {

1432 - var targetID = getTargetIDFunc(

1433 - topLevelType,

1434 - topLevelTarget,

1435 - topLevelTargetID

1436 - );

1200 + var targetID = getTargetIDFunc(topLevelType, topLevelTarget, topLevelTargetID);

1201 if (targetID) {

1438 - var event = SyntheticEvent.getPooled(

1439 - eventTypes.change,

1440 - targetID,

1441 - nativeEvent

1442 - );

1202 + var event = SyntheticEvent.getPooled(eventTypes.change, targetID, nativeEvent, nativeEventTarget);

1203 + event.type = 'change';

1204 EventPropagators.accumulateTwoPhaseDispatches(event);

1205 return event;

1206 }

1207 }

1208

1209 if (handleEventFunc) {

1449 - handleEventFunc(

1450 - topLevelType,

1451 - topLevelTarget,

1452 - topLevelTargetID

1453 - );

1210 + handleEventFunc(topLevelType, topLevelTarget, topLevelTargetID);

1211 }

1212 }

1213

1214 };

1215

1216 module.exports = ChangeEventPlugin;

1460 -

1461 -},{"136":136,"138":138,"141":141,"15":15,"17":17,"20":20,"21":21,"87":87,"95":95}],8:[function(_dereq_,module,exports){

1217 +},{"113":113,"118":118,"119":119,"129":129,"147":147,"15":15,"16":16,"19":19,"83":83,"92":92}],8:[function(_dereq_,module,exports){

1218 /**

@@ -1476,13 +1232,12 @@ module.exports = ChangeEventPlugin;

1232 var nextReactRootIndex = 0;

1233

1234 var ClientReactRootIndex = {

1479 - createReactRootIndex: function() {

1235 + createReactRootIndex: function () {

1236 return nextReactRootIndex++;

1237 }

1238 };

1239

1240 module.exports = ClientReactRootIndex;

1485 -

1241 },{}],9:[function(_dereq_,module,exports){

1242 /**

@@ -1499,10 +1254,12 @@ module.exports = ClientReactRootIndex;

1254 'use strict';

1255

1256 var Danger = _dereq_(12);

1502 -var ReactMultiChildUpdateTypes = _dereq_(72);

1257 +var ReactMultiChildUpdateTypes = _dereq_(67);

1258 +var ReactPerf = _dereq_(71);

1259

1504 -var setTextContent = _dereq_(149);

1505 -var invariant = _dereq_(135);

1260 +var setInnerHTML = _dereq_(123);

1261 +var setTextContent = _dereq_(124);

1262 +var invariant = _dereq_(143);

1263

1264 /**

1265 * Inserts `childNode` as a child of `parentNode` at the `index`.

@@ -1517,10 +1274,12 @@ function insertChildAt(parentNode, childNode, index) {

1274 // rely exclusively on `insertBefore(node, null)` instead of also using

1275 // `appendChild(node)`. However, using `undefined` is not allowed by all

1276 // browsers so we must replace it with `null`.

1520 - parentNode.insertBefore(

1521 - childNode,

1522 - parentNode.childNodes[index] || null

1523 - );

1277 +

1278 + // fix render order error in safari

1279 + // IE8 will throw error when index out of list size.

1280 + var beforeChild = index >= parentNode.childNodes.length ? null : parentNode.childNodes.item(index);

1281 +

1282 + parentNode.insertBefore(childNode, beforeChild);

1283 }

1284

1285 /**

@@ -1540,7 +1299,7 @@ var DOMChildrenOperations = {

1299 * @param {array<string>} markupList List of markup strings.

1300 * @internal

1301 */

1543 - processUpdates: function(updates, markupList) {

1302 + processUpdates: function (updates, markupList) {

1303 var update;

1304 // Mapping from parent IDs to initial child orderings.

1305 var initialChildren = null;

@@ -1549,23 +1308,12 @@ var DOMChildrenOperations = {

1308

1309 for (var i = 0; i < updates.length; i++) {

1310 update = updates[i];

1552 - if (update.type === ReactMultiChildUpdateTypes.MOVE_EXISTING ||

1553 - update.type === ReactMultiChildUpdateTypes.REMOVE_NODE) {

1311 + if (update.type === ReactMultiChildUpdateTypes.MOVE_EXISTING || update.type === ReactMultiChildUpdateTypes.REMOVE_NODE) {

1312 var updatedIndex = update.fromIndex;

1313 var updatedChild = update.parentNode.childNodes[updatedIndex];

1314 var parentID = update.parentID;

1315

1558 - ("production" !== "development" ? invariant(

1559 - updatedChild,

1560 - 'processUpdates(): Unable to find child %s of element. This ' +

1561 - 'probably means the DOM was unexpectedly mutated (e.g., by the ' +

1562 - 'browser), usually due to forgetting a <tbody> when using tables, ' +

1563 - 'nesting tags like <form>, <p>, or <a>, or using non-SVG elements ' +

1564 - 'in an <svg> parent. Try inspecting the child nodes of the element ' +

1565 - 'with React ID `%s`.',

1566 - updatedIndex,

1567 - parentID

1568 - ) : invariant(updatedChild));

1316 + !updatedChild ? "development" !== 'production' ? invariant(false, 'processUpdates(): Unable to find child %s of element. This ' + 'probably means the DOM was unexpectedly mutated (e.g., by the ' + 'browser), usually due to forgetting a <tbody> when using tables, ' + 'nesting tags like <form>, <p>, or <a>, or using non-SVG elements ' + 'in an <svg> parent. Try inspecting the child nodes of the element ' + 'with React ID `%s`.', updatedIndex, parentID) : invariant(false) : undefined;

1317

1318 initialChildren = initialChildren || {};

1319 initialChildren[parentID] = initialChildren[parentID] || [];

@@ -1576,7 +1324,13 @@ var DOMChildrenOperations = {

1324 }

1325 }

1326

1579 - var renderedMarkup = Danger.dangerouslyRenderMarkup(markupList);

1327 + var renderedMarkup;

1328 + // markupList is either a list of markup or just a list of elements

1329 + if (markupList.length && typeof markupList[0] === 'string') {

1330 + renderedMarkup = Danger.dangerouslyRenderMarkup(markupList);

1331 + } else {

1332 + renderedMarkup = markupList;

1333 + }

1334

1335 // Remove updated children first so that `toIndex` is consistent.

1336 if (updatedChildren) {

@@ -1589,24 +1343,16 @@ var DOMChildrenOperations = {

1343 update = updates[k];

1344 switch (update.type) {

1345 case ReactMultiChildUpdateTypes.INSERT_MARKUP:

1592 - insertChildAt(

1593 - update.parentNode,

1594 - renderedMarkup[update.markupIndex],

1595 - update.toIndex

1596 - );

1346 + insertChildAt(update.parentNode, renderedMarkup[update.markupIndex], update.toIndex);

1347 break;

1348 case ReactMultiChildUpdateTypes.MOVE_EXISTING:

1599 - insertChildAt(

1600 - update.parentNode,

1601 - initialChildren[update.parentID][update.fromIndex],

1602 - update.toIndex

1603 - );

1349 + insertChildAt(update.parentNode, initialChildren[update.parentID][update.fromIndex], update.toIndex);

1350 + break;

1351 + case ReactMultiChildUpdateTypes.SET_MARKUP:

1352 + setInnerHTML(update.parentNode, update.content);

1353 break;

1354 case ReactMultiChildUpdateTypes.TEXT_CONTENT:

1606 - setTextContent(

1607 - update.parentNode,

1608 - update.textContent

1609 - );

1355 + setTextContent(update.parentNode, update.content);

1356 break;

1357 case ReactMultiChildUpdateTypes.REMOVE_NODE:

1358 // Already removed by the for-loop above.

@@ -1617,9 +1363,12 @@ var DOMChildrenOperations = {

1363

1364 };

1365

1620 -module.exports = DOMChildrenOperations;

1366 +ReactPerf.measureMethods(DOMChildrenOperations, 'DOMChildrenOperations', {

1367 + updateTextContent: 'updateTextContent'

1368 +});

1369

1622 -},{"12":12,"135":135,"149":149,"72":72}],10:[function(_dereq_,module,exports){

1370 +module.exports = DOMChildrenOperations;

1371 +},{"12":12,"123":123,"124":124,"143":143,"67":67,"71":71}],10:[function(_dereq_,module,exports){

1372 /**

@@ -1632,11 +1381,9 @@ module.exports = DOMChildrenOperations;

1381 * @typechecks static-only

1382 */

1383

1635 -/*jslint bitwise: true */

1636 -

1384 'use strict';

1385

1639 -var invariant = _dereq_(135);

1386 +var invariant = _dereq_(143);

1387

1388 function checkMask(value, bitmask) {

1389 return (value & bitmask) === bitmask;

@@ -1672,6 +1419,9 @@ var DOMPropertyInjection = {

1419 * attribute name. Attribute names not specified use the **lowercase**

1420 * normalized name.

1421 *

1422 + * DOMAttributeNamespaces: object mapping React attribute name to the DOM

1423 + * attribute namespace URL. (Attribute names not specified use no namespace.)

1424 + *

1425 * DOMPropertyNames: similar to DOMAttributeNames but for DOM properties.

1426 * Property names not specified use the normalized name.

1427 *

@@ -1680,92 +1430,68 @@ var DOMPropertyInjection = {

1430 *

1431 * @param {object} domPropertyConfig the config as described above.

1432 */

1683 - injectDOMPropertyConfig: function(domPropertyConfig) {

1433 + injectDOMPropertyConfig: function (domPropertyConfig) {

1434 + var Injection = DOMPropertyInjection;

1435 var Properties = domPropertyConfig.Properties || {};

1436 + var DOMAttributeNamespaces = domPropertyConfig.DOMAttributeNamespaces || {};

1437 var DOMAttributeNames = domPropertyConfig.DOMAttributeNames || {};

1438 var DOMPropertyNames = domPropertyConfig.DOMPropertyNames || {};

1439 var DOMMutationMethods = domPropertyConfig.DOMMutationMethods || {};

1440

1441 if (domPropertyConfig.isCustomAttribute) {

1690 - DOMProperty._isCustomAttributeFunctions.push(

1691 - domPropertyConfig.isCustomAttribute

1692 - );

1442 + DOMProperty._isCustomAttributeFunctions.push(domPropertyConfig.isCustomAttribute);

1443 }

1444

1445 for (var propName in Properties) {

1696 - ("production" !== "development" ? invariant(

1697 - !DOMProperty.isStandardName.hasOwnProperty(propName),

1698 - 'injectDOMPropertyConfig(...): You\'re trying to inject DOM property ' +

1699 - '\'%s\' which has already been injected. You may be accidentally ' +

1700 - 'injecting the same DOM property config twice, or you may be ' +

1701 - 'injecting two configs that have conflicting property names.',

1702 - propName

1703 - ) : invariant(!DOMProperty.isStandardName.hasOwnProperty(propName)));

1704 -

1705 - DOMProperty.isStandardName[propName] = true;

1446 + !!DOMProperty.properties.hasOwnProperty(propName) ? "development" !== 'production' ? invariant(false, 'injectDOMPropertyConfig(...): You\'re trying to inject DOM property ' + '\'%s\' which has already been injected. You may be accidentally ' + 'injecting the same DOM property config twice, or you may be ' + 'injecting two configs that have conflicting property names.', propName) : invariant(false) : undefined;

1447

1448 var lowerCased = propName.toLowerCase();

1708 - DOMProperty.getPossibleStandardName[lowerCased] = propName;

1449 + var propConfig = Properties[propName];

1450 +

1451 + var propertyInfo = {

1452 + attributeName: lowerCased,

1453 + attributeNamespace: null,

1454 + propertyName: propName,

1455 + mutationMethod: null,

1456 +

1457 + mustUseAttribute: checkMask(propConfig, Injection.MUST_USE_ATTRIBUTE),

1458 + mustUseProperty: checkMask(propConfig, Injection.MUST_USE_PROPERTY),

1459 + hasSideEffects: checkMask(propConfig, Injection.HAS_SIDE_EFFECTS),

1460 + hasBooleanValue: checkMask(propConfig, Injection.HAS_BOOLEAN_VALUE),

1461 + hasNumericValue: checkMask(propConfig, Injection.HAS_NUMERIC_VALUE),

1462 + hasPositiveNumericValue: checkMask(propConfig, Injection.HAS_POSITIVE_NUMERIC_VALUE),

1463 + hasOverloadedBooleanValue: checkMask(propConfig, Injection.HAS_OVERLOADED_BOOLEAN_VALUE)

1464 + };

1465 +

1466 + !(!propertyInfo.mustUseAttribute || !propertyInfo.mustUseProperty) ? "development" !== 'production' ? invariant(false, 'DOMProperty: Cannot require using both attribute and property: %s', propName) : invariant(false) : undefined;

1467 + !(propertyInfo.mustUseProperty || !propertyInfo.hasSideEffects) ? "development" !== 'production' ? invariant(false, 'DOMProperty: Properties that have side effects must use property: %s', propName) : invariant(false) : undefined;

1468 + !(propertyInfo.hasBooleanValue + propertyInfo.hasNumericValue + propertyInfo.hasOverloadedBooleanValue <= 1) ? "development" !== 'production' ? invariant(false, 'DOMProperty: Value can be one of boolean, overloaded boolean, or ' + 'numeric value, but not a combination: %s', propName) : invariant(false) : undefined;

1469 +

1470 + if ("development" !== 'production') {

1471 + DOMProperty.getPossibleStandardName[lowerCased] = propName;

1472 + }

1473

1474 if (DOMAttributeNames.hasOwnProperty(propName)) {

1475 var attributeName = DOMAttributeNames[propName];

1712 - DOMProperty.getPossibleStandardName[attributeName] = propName;

1713 - DOMProperty.getAttributeName[propName] = attributeName;

1714 - } else {

1715 - DOMProperty.getAttributeName[propName] = lowerCased;

1476 + propertyInfo.attributeName = attributeName;

1477 + if ("development" !== 'production') {

1478 + DOMProperty.getPossibleStandardName[attributeName] = propName;

1479 + }

1480 + }

1481 +

1482 + if (DOMAttributeNamespaces.hasOwnProperty(propName)) {

1483 + propertyInfo.attributeNamespace = DOMAttributeNamespaces[propName];

1484 }

1485

1718 - DOMProperty.getPropertyName[propName] =

1719 - DOMPropertyNames.hasOwnProperty(propName) ?

1720 - DOMPropertyNames[propName] :

1721 - propName;

1486 + if (DOMPropertyNames.hasOwnProperty(propName)) {

1487 + propertyInfo.propertyName = DOMPropertyNames[propName];

1488 + }

1489

1490 if (DOMMutationMethods.hasOwnProperty(propName)) {

1724 - DOMProperty.getMutationMethod[propName] = DOMMutationMethods[propName];

1725 - } else {

1726 - DOMProperty.getMutationMethod[propName] = null;

1491 + propertyInfo.mutationMethod = DOMMutationMethods[propName];

1492 }

1493

1729 - var propConfig = Properties[propName];

1730 - DOMProperty.mustUseAttribute[propName] =

1731 - checkMask(propConfig, DOMPropertyInjection.MUST_USE_ATTRIBUTE);

1732 - DOMProperty.mustUseProperty[propName] =

1733 - checkMask(propConfig, DOMPropertyInjection.MUST_USE_PROPERTY);

1734 - DOMProperty.hasSideEffects[propName] =

1735 - checkMask(propConfig, DOMPropertyInjection.HAS_SIDE_EFFECTS);

1736 - DOMProperty.hasBooleanValue[propName] =

1737 - checkMask(propConfig, DOMPropertyInjection.HAS_BOOLEAN_VALUE);

1738 - DOMProperty.hasNumericValue[propName] =

1739 - checkMask(propConfig, DOMPropertyInjection.HAS_NUMERIC_VALUE);

1740 - DOMProperty.hasPositiveNumericValue[propName] =

1741 - checkMask(propConfig, DOMPropertyInjection.HAS_POSITIVE_NUMERIC_VALUE);

1742 - DOMProperty.hasOverloadedBooleanValue[propName] =

1743 - checkMask(propConfig, DOMPropertyInjection.HAS_OVERLOADED_BOOLEAN_VALUE);

1744 -

1745 - ("production" !== "development" ? invariant(

1746 - !DOMProperty.mustUseAttribute[propName] ||

1747 - !DOMProperty.mustUseProperty[propName],

1748 - 'DOMProperty: Cannot require using both attribute and property: %s',

1749 - propName

1750 - ) : invariant(!DOMProperty.mustUseAttribute[propName] ||

1751 - !DOMProperty.mustUseProperty[propName]));

1752 - ("production" !== "development" ? invariant(

1753 - DOMProperty.mustUseProperty[propName] ||

1754 - !DOMProperty.hasSideEffects[propName],

1755 - 'DOMProperty: Properties that have side effects must use property: %s',

1756 - propName

1757 - ) : invariant(DOMProperty.mustUseProperty[propName] ||

1758 - !DOMProperty.hasSideEffects[propName]));

1759 - ("production" !== "development" ? invariant(

1760 - !!DOMProperty.hasBooleanValue[propName] +

1761 - !!DOMProperty.hasNumericValue[propName] +

1762 - !!DOMProperty.hasOverloadedBooleanValue[propName] <= 1,

1763 - 'DOMProperty: Value can be one of boolean, overloaded boolean, or ' +

1764 - 'numeric value, but not a combination: %s',

1765 - propName

1766 - ) : invariant(!!DOMProperty.hasBooleanValue[propName] +

1767 - !!DOMProperty.hasNumericValue[propName] +

1768 - !!DOMProperty.hasOverloadedBooleanValue[propName] <= 1));

1494 + DOMProperty.properties[propName] = propertyInfo;

1495 }

1496 }

1497 };

@@ -1789,87 +1515,49 @@ var DOMProperty = {

1515 ID_ATTRIBUTE_NAME: 'data-reactid',

1516

1517 /**

1792 - * Checks whether a property name is a standard property.

1793 - * @type {Object}

1518 + * Map from property "standard name" to an object with info about how to set

1519 + * the property in the DOM. Each object contains:

1520 + *

1521 + * attributeName:

1522 + * Used when rendering markup or with `*Attribute()`.

1523 + * attributeNamespace

1524 + * propertyName:

1525 + * Used on DOM node instances. (This includes properties that mutate due to

1526 + * external factors.)

1527 + * mutationMethod:

1528 + * If non-null, used instead of the property or `setAttribute()` after

1529 + * initial render.

1530 + * mustUseAttribute:

1531 + * Whether the property must be accessed and mutated using `*Attribute()`.

1532 + * (This includes anything that fails `<propName> in <element>`.)

1533 + * mustUseProperty:

1534 + * Whether the property must be accessed and mutated as an object property.

1535 + * hasSideEffects:

1536 + * Whether or not setting a value causes side effects such as triggering

1537 + * resources to be loaded or text selection changes. If true, we read from

1538 + * the DOM before updating to ensure that the value is only set if it has

1539 + * changed.

1540 + * hasBooleanValue:

1541 + * Whether the property should be removed when set to a falsey value.

1542 + * hasNumericValue:

1543 + * Whether the property must be numeric or parse as a numeric and should be

1544 + * removed when set to a falsey value.

1545 + * hasPositiveNumericValue:

1546 + * Whether the property must be positive numeric or parse as a positive

1547 + * numeric and should be removed when set to a falsey value.

1548 + * hasOverloadedBooleanValue:

1549 + * Whether the property can be used as a flag as well as with a value.

1550 + * Removed when strictly equal to false; present without a value when

1551 + * strictly equal to true; present with a value otherwise.

1552 */

1795 - isStandardName: {},

1553 + properties: {},

1554

1555 /**

1556 * Mapping from lowercase property names to the properly cased version, used

1799 - * to warn in the case of missing properties.

1800 - * @type {Object}

1801 - */

1802 - getPossibleStandardName: {},

1803 -

1804 - /**

1805 - * Mapping from normalized names to attribute names that differ. Attribute

1806 - * names are used when rendering markup or with `*Attribute()`.

1807 - * @type {Object}

1808 - */

1809 - getAttributeName: {},

1810 -

1811 - /**

1812 - * Mapping from normalized names to properties on DOM node instances.

1813 - * (This includes properties that mutate due to external factors.)

1814 - * @type {Object}

1815 - */

1816 - getPropertyName: {},

1817 -

1818 - /**

1819 - * Mapping from normalized names to mutation methods. This will only exist if

1820 - * mutation cannot be set simply by the property or `setAttribute()`.

1821 - * @type {Object}

1822 - */

1823 - getMutationMethod: {},

1824 -

1825 - /**

1826 - * Whether the property must be accessed and mutated as an object property.

1827 - * @type {Object}

1828 - */

1829 - mustUseAttribute: {},

1830 -

1831 - /**

1832 - * Whether the property must be accessed and mutated using `*Attribute()`.

1833 - * (This includes anything that fails `<propName> in <element>`.)

1834 - * @type {Object}

1835 - */

1836 - mustUseProperty: {},

1837 -

1838 - /**

1839 - * Whether or not setting a value causes side effects such as triggering

1840 - * resources to be loaded or text selection changes. We must ensure that

1841 - * the value is only set if it has changed.

1842 - * @type {Object}

1843 - */

1844 - hasSideEffects: {},

1845 -

1846 - /**

1847 - * Whether the property should be removed when set to a falsey value.

1557 + * to warn in the case of missing properties. Available only in __DEV__.

1558 * @type {Object}

1559 */

1850 - hasBooleanValue: {},

1851 -

1852 - /**

1853 - * Whether the property must be numeric or parse as a

1854 - * numeric and should be removed when set to a falsey value.

1855 - * @type {Object}

1856 - */

1857 - hasNumericValue: {},

1858 -

1859 - /**

1860 - * Whether the property must be positive numeric or parse as a positive

1861 - * numeric and should be removed when set to a falsey value.

1862 - * @type {Object}

1863 - */

1864 - hasPositiveNumericValue: {},

1865 -

1866 - /**

1867 - * Whether the property can be used as a flag as well as with a value. Removed

1868 - * when strictly equal to false; present without a value when strictly equal

1869 - * to true; present with a value otherwise.

1870 - * @type {Object}

1871 - */

1872 - hasOverloadedBooleanValue: {},

1560 + getPossibleStandardName: "development" !== 'production' ? {} : null,

1561

1562 /**

1563 * All of the isCustomAttribute() functions that have been injected.

@@ -1880,7 +1568,7 @@ var DOMProperty = {

1568 * Checks whether a property name is a custom attribute.

1569 * @method

1570 */

1883 - isCustomAttribute: function(attributeName) {

1571 + isCustomAttribute: function (attributeName) {

1572 for (var i = 0; i < DOMProperty._isCustomAttributeFunctions.length; i++) {

1573 var isCustomAttributeFn = DOMProperty._isCustomAttributeFunctions[i];

1574 if (isCustomAttributeFn(attributeName)) {

@@ -1898,7 +1586,7 @@ var DOMProperty = {

1586 * TODO: Is it better to grab all the possible properties when creating an

1587 * element to avoid having to create the same element twice?

1588 */

1901 - getDefaultValueForProperty: function(nodeName, prop) {

1589 + getDefaultValueForProperty: function (nodeName, prop) {

1590 var nodeDefaults = defaultValueCache[nodeName];

1591 var testElement;

1592 if (!nodeDefaults) {

@@ -1915,8 +1603,7 @@ var DOMProperty = {

1603 };

1604

1605 module.exports = DOMProperty;

1918 -

1919 -},{"135":135}],11:[function(_dereq_,module,exports){

1606 +},{"143":143}],11:[function(_dereq_,module,exports){

1607 /**

@@ -1932,19 +1619,37 @@ module.exports = DOMProperty;

1619 'use strict';

1620

1621 var DOMProperty = _dereq_(10);

1622 +var ReactPerf = _dereq_(71);

1623

1936 -var quoteAttributeValueForBrowser = _dereq_(147);

1624 +var quoteAttributeValueForBrowser = _dereq_(121);

1625 var warning = _dereq_(154);

1626

1939 -function shouldIgnoreValue(name, value) {

1940 - return value == null ||

1941 - (DOMProperty.hasBooleanValue[name] && !value) ||

1942 - (DOMProperty.hasNumericValue[name] && isNaN(value)) ||

1943 - (DOMProperty.hasPositiveNumericValue[name] && (value < 1)) ||

1944 - (DOMProperty.hasOverloadedBooleanValue[name] && value === false);

1627 +// Simplified subset

1628 +var VALID_ATTRIBUTE_NAME_REGEX = /^[a-zA-Z_][\w\.\-]*$/;

1629 +var illegalAttributeNameCache = {};

1630 +var validatedAttributeNameCache = {};

1631 +

1632 +function isAttributeNameSafe(attributeName) {

1633 + if (validatedAttributeNameCache.hasOwnProperty(attributeName)) {

1634 + return true;

1635 + }

1636 + if (illegalAttributeNameCache.hasOwnProperty(attributeName)) {

1637 + return false;

1638 + }

1639 + if (VALID_ATTRIBUTE_NAME_REGEX.test(attributeName)) {

1640 + validatedAttributeNameCache[attributeName] = true;

1641 + return true;

1642 + }

1643 + illegalAttributeNameCache[attributeName] = true;

1644 + "development" !== 'production' ? warning(false, 'Invalid attribute name: `%s`', attributeName) : undefined;

1645 + return false;

1646 +}

1647 +

1648 +function shouldIgnoreValue(propertyInfo, value) {

1649 + return value == null || propertyInfo.hasBooleanValue && !value || propertyInfo.hasNumericValue && isNaN(value) || propertyInfo.hasPositiveNumericValue && value < 1 || propertyInfo.hasOverloadedBooleanValue && value === false;

1650 }

1651

1947 -if ("production" !== "development") {

1652 +if ("development" !== 'production') {

1653 var reactProps = {

1654 children: true,

1655 dangerouslySetInnerHTML: true,

@@ -1953,9 +1658,8 @@ if ("production" !== "development") {

1658 };

1659 var warnedProperties = {};

1660

1956 - var warnUnknownProperty = function(name) {

1957 - if (reactProps.hasOwnProperty(name) && reactProps[name] ||

1958 - warnedProperties.hasOwnProperty(name) && warnedProperties[name]) {

1661 + var warnUnknownProperty = function (name) {

1662 + if (reactProps.hasOwnProperty(name) && reactProps[name] || warnedProperties.hasOwnProperty(name) && warnedProperties[name]) {

1663 return;

1664 }

1665

@@ -1963,23 +1667,11 @@ if ("production" !== "development") {

1667 var lowerCasedName = name.toLowerCase();

1668

1669 // data-* attributes should be lowercase; suggest the lowercase version

1966 - var standardName = (

1967 - DOMProperty.isCustomAttribute(lowerCasedName) ?

1968 - lowerCasedName :

1969 - DOMProperty.getPossibleStandardName.hasOwnProperty(lowerCasedName) ?

1970 - DOMProperty.getPossibleStandardName[lowerCasedName] :

1971 - null

1972 - );

1670 + var standardName = DOMProperty.isCustomAttribute(lowerCasedName) ? lowerCasedName : DOMProperty.getPossibleStandardName.hasOwnProperty(lowerCasedName) ? DOMProperty.getPossibleStandardName[lowerCasedName] : null;

1671

1672 // For now, only warn when we have a suggested correction. This prevents

1673 // logging too much when using transferPropsTo.

1976 - ("production" !== "development" ? warning(

1977 - standardName == null,

1978 - 'Unknown DOM property %s. Did you mean %s?',

1979 - name,

1980 - standardName

1981 - ) : null);

1982 -

1674 + "development" !== 'production' ? warning(standardName == null, 'Unknown DOM property %s. Did you mean %s?', name, standardName) : undefined;

1675 };

1676 }

1677

@@ -1994,9 +1686,12 @@ var DOMPropertyOperations = {

1686 * @param {string} id Unescaped ID.

1687 * @return {string} Markup string.

1688 */

1997 - createMarkupForID: function(id) {

1998 - return DOMProperty.ID_ATTRIBUTE_NAME + '=' +

1999 - quoteAttributeValueForBrowser(id);

1689 + createMarkupForID: function (id) {

1690 + return DOMProperty.ID_ATTRIBUTE_NAME + '=' + quoteAttributeValueForBrowser(id);

1691 + },

1692 +

1693 + setAttributeForID: function (node, id) {

1694 + node.setAttribute(DOMProperty.ID_ATTRIBUTE_NAME, id);

1695 },

1696

1697 /**

@@ -2006,16 +1701,15 @@ var DOMPropertyOperations = {

1701 * @param {*} value

1702 * @return {?string} Markup string, or null if the property was invalid.

1703 */

2009 - createMarkupForProperty: function(name, value) {

2010 - if (DOMProperty.isStandardName.hasOwnProperty(name) &&

2011 - DOMProperty.isStandardName[name]) {

2012 - if (shouldIgnoreValue(name, value)) {

1704 + createMarkupForProperty: function (name, value) {

1705 + var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ? DOMProperty.properties[name] : null;

1706 + if (propertyInfo) {

1707 + if (shouldIgnoreValue(propertyInfo, value)) {

1708 return '';

1709 }

2015 - var attributeName = DOMProperty.getAttributeName[name];

2016 - if (DOMProperty.hasBooleanValue[name] ||

2017 - (DOMProperty.hasOverloadedBooleanValue[name] && value === true)) {

2018 - return attributeName;

1710 + var attributeName = propertyInfo.attributeName;

1711 + if (propertyInfo.hasBooleanValue || propertyInfo.hasOverloadedBooleanValue && value === true) {

1712 + return attributeName + '=""';

1713 }

1714 return attributeName + '=' + quoteAttributeValueForBrowser(value);

1715 } else if (DOMProperty.isCustomAttribute(name)) {

@@ -2023,12 +1717,26 @@ var DOMPropertyOperations = {

1717 return '';

1718 }

1719 return name + '=' + quoteAttributeValueForBrowser(value);

2026 - } else if ("production" !== "development") {

1720 + } else if ("development" !== 'production') {

1721 warnUnknownProperty(name);

1722 }

1723 return null;

1724 },

1725

1726 + /**

1727 + * Creates markup for a custom property.

1728 + *

1729 + * @param {string} name

1730 + * @param {*} value

1731 + * @return {string} Markup string, or empty string if the property was invalid.

1732 + */

1733 + createMarkupForCustomAttribute: function (name, value) {

1734 + if (!isAttributeNameSafe(name) || value == null) {

1735 + return '';

1736 + }

1737 + return name + '=' + quoteAttributeValueForBrowser(value);

1738 + },

1739 +

1740 /**

1741 * Sets the value for a property on a node.

1742 *

@@ -2036,77 +1744,92 @@ var DOMPropertyOperations = {

1744 * @param {string} name

1745 * @param {*} value

1746 */

2039 - setValueForProperty: function(node, name, value) {

2040 - if (DOMProperty.isStandardName.hasOwnProperty(name) &&

2041 - DOMProperty.isStandardName[name]) {

2042 - var mutationMethod = DOMProperty.getMutationMethod[name];

1747 + setValueForProperty: function (node, name, value) {

1748 + var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ? DOMProperty.properties[name] : null;

1749 + if (propertyInfo) {

1750 + var mutationMethod = propertyInfo.mutationMethod;

1751 if (mutationMethod) {

1752 mutationMethod(node, value);

2045 - } else if (shouldIgnoreValue(name, value)) {

1753 + } else if (shouldIgnoreValue(propertyInfo, value)) {

1754 this.deleteValueForProperty(node, name);

2047 - } else if (DOMProperty.mustUseAttribute[name]) {

1755 + } else if (propertyInfo.mustUseAttribute) {

1756 + var attributeName = propertyInfo.attributeName;

1757 + var namespace = propertyInfo.attributeNamespace;

1758 // `setAttribute` with objects becomes only `[object]` in IE8/9,

1759 // ('' + value) makes it output the correct toString()-value.

2050 - node.setAttribute(DOMProperty.getAttributeName[name], '' + value);

1760 + if (namespace) {

1761 + node.setAttributeNS(namespace, attributeName, '' + value);

1762 + } else if (propertyInfo.hasBooleanValue || propertyInfo.hasOverloadedBooleanValue && value === true) {

1763 + node.setAttribute(attributeName, '');

1764 + } else {

1765 + node.setAttribute(attributeName, '' + value);

1766 + }

1767 } else {

2052 - var propName = DOMProperty.getPropertyName[name];

1768 + var propName = propertyInfo.propertyName;

1769 // Must explicitly cast values for HAS_SIDE_EFFECTS-properties to the

1770 // property type before comparing; only `value` does and is string.

2055 - if (!DOMProperty.hasSideEffects[name] ||

2056 - ('' + node[propName]) !== ('' + value)) {

1771 + if (!propertyInfo.hasSideEffects || '' + node[propName] !== '' + value) {

1772 // Contrary to `setAttribute`, object properties are properly

1773 // `toString`ed by IE8/9.

1774 node[propName] = value;

1775 }

1776 }

1777 } else if (DOMProperty.isCustomAttribute(name)) {

2063 - if (value == null) {

2064 - node.removeAttribute(name);

2065 - } else {

2066 - node.setAttribute(name, '' + value);

2067 - }

2068 - } else if ("production" !== "development") {

1778 + DOMPropertyOperations.setValueForAttribute(node, name, value);

1779 + } else if ("development" !== 'production') {

1780 warnUnknownProperty(name);

1781 }

1782 },

1783

1784 + setValueForAttribute: function (node, name, value) {

1785 + if (!isAttributeNameSafe(name)) {

1786 + return;

1787 + }

1788 + if (value == null) {

1789 + node.removeAttribute(name);

1790 + } else {

1791 + node.setAttribute(name, '' + value);

1792 + }

1793 + },

1794 +

1795 /**

1796 * Deletes the value for a property on a node.

1797 *

1798 * @param {DOMElement} node

1799 * @param {string} name

1800 */

2079 - deleteValueForProperty: function(node, name) {

2080 - if (DOMProperty.isStandardName.hasOwnProperty(name) &&

2081 - DOMProperty.isStandardName[name]) {

2082 - var mutationMethod = DOMProperty.getMutationMethod[name];

1801 + deleteValueForProperty: function (node, name) {

1802 + var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ? DOMProperty.properties[name] : null;

1803 + if (propertyInfo) {

1804 + var mutationMethod = propertyInfo.mutationMethod;

1805 if (mutationMethod) {

1806 mutationMethod(node, undefined);

2085 - } else if (DOMProperty.mustUseAttribute[name]) {

2086 - node.removeAttribute(DOMProperty.getAttributeName[name]);

1807 + } else if (propertyInfo.mustUseAttribute) {

1808 + node.removeAttribute(propertyInfo.attributeName);

1809 } else {

2088 - var propName = DOMProperty.getPropertyName[name];

2089 - var defaultValue = DOMProperty.getDefaultValueForProperty(

2090 - node.nodeName,

2091 - propName

2092 - );

2093 - if (!DOMProperty.hasSideEffects[name] ||

2094 - ('' + node[propName]) !== defaultValue) {

1810 + var propName = propertyInfo.propertyName;

1811 + var defaultValue = DOMProperty.getDefaultValueForProperty(node.nodeName, propName);

1812 + if (!propertyInfo.hasSideEffects || '' + node[propName] !== defaultValue) {

1813 node[propName] = defaultValue;

1814 }

1815 }

1816 } else if (DOMProperty.isCustomAttribute(name)) {

1817 node.removeAttribute(name);

2100 - } else if ("production" !== "development") {

1818 + } else if ("development" !== 'production') {

1819 warnUnknownProperty(name);

1820 }

1821 }

1822

1823 };

1824

2107 -module.exports = DOMPropertyOperations;

1825 +ReactPerf.measureMethods(DOMPropertyOperations, 'DOMPropertyOperations', {

1826 + setValueForProperty: 'setValueForProperty',

1827 + setValueForAttribute: 'setValueForAttribute',

1828 + deleteValueForProperty: 'deleteValueForProperty'

1829 +});

1830

2109 -},{"10":10,"147":147,"154":154}],12:[function(_dereq_,module,exports){

1831 +module.exports = DOMPropertyOperations;

1832 +},{"10":10,"121":121,"154":154,"71":71}],12:[function(_dereq_,module,exports){

1833 /**

@@ -2119,16 +1842,14 @@ module.exports = DOMPropertyOperations;

1842 * @typechecks static-only

1843 */

1844

2122 -/*jslint evil: true, sub: true */

2123 -

1845 'use strict';

1846

2126 -var ExecutionEnvironment = _dereq_(21);

1847 +var ExecutionEnvironment = _dereq_(129);

1848

2128 -var createNodesFromMarkup = _dereq_(112);

2129 -var emptyFunction = _dereq_(114);

2130 -var getMarkupWrap = _dereq_(127);

2131 -var invariant = _dereq_(135);

1849 +var createNodesFromMarkup = _dereq_(134);

1850 +var emptyFunction = _dereq_(135);

1851 +var getMarkupWrap = _dereq_(139);

1852 +var invariant = _dereq_(143);

1853

1854 var OPEN_TAG_NAME_EXP = /^(<[^ \/>]+)/;

1855 var RESULT_INDEX_ATTR = 'data-danger-index';

@@ -2159,22 +1880,13 @@ var Danger = {

1880 * @return {array<DOMElement>} List of rendered nodes.

1881 * @internal

1882 */

2162 - dangerouslyRenderMarkup: function(markupList) {

2163 - ("production" !== "development" ? invariant(

2164 - ExecutionEnvironment.canUseDOM,

2165 - 'dangerouslyRenderMarkup(...): Cannot render markup in a worker ' +

2166 - 'thread. Make sure `window` and `document` are available globally ' +

2167 - 'before requiring React when unit testing or use ' +

2168 - 'React.renderToString for server rendering.'

2169 - ) : invariant(ExecutionEnvironment.canUseDOM));

1883 + dangerouslyRenderMarkup: function (markupList) {

1884 + !ExecutionEnvironment.canUseDOM ? "development" !== 'production' ? invariant(false, 'dangerouslyRenderMarkup(...): Cannot render markup in a worker ' + 'thread. Make sure `window` and `document` are available globally ' + 'before requiring React when unit testing or use ' + 'ReactDOMServer.renderToString for server rendering.') : invariant(false) : undefined;

1885 var nodeName;

1886 var markupByNodeName = {};

1887 // Group markup by `nodeName` if a wrap is necessary, else by '*'.

1888 for (var i = 0; i < markupList.length; i++) {

2174 - ("production" !== "development" ? invariant(

2175 - markupList[i],

2176 - 'dangerouslyRenderMarkup(...): Missing markup.'

2177 - ) : invariant(markupList[i]));

1889 + !markupList[i] ? "development" !== 'production' ? invariant(false, 'dangerouslyRenderMarkup(...): Missing markup.') : invariant(false) : undefined;

1890 nodeName = getNodeName(markupList[i]);

1891 nodeName = getMarkupWrap(nodeName) ? nodeName : '*';

1892 markupByNodeName[nodeName] = markupByNodeName[nodeName] || [];

@@ -2199,61 +1911,41 @@ var Danger = {

1911 // Push the requested markup with an additional RESULT_INDEX_ATTR

1912 // attribute. If the markup does not start with a < character, it

1913 // will be discarded below (with an appropriate console.error).

2202 - markupListByNodeName[resultIndex] = markup.replace(

2203 - OPEN_TAG_NAME_EXP,

2204 - // This index will be parsed back out below.

2205 - '$1 ' + RESULT_INDEX_ATTR + '="' + resultIndex + '" '

2206 - );

1914 + markupListByNodeName[resultIndex] = markup.replace(OPEN_TAG_NAME_EXP,

1915 + // This index will be parsed back out below.

1916 + '$1 ' + RESULT_INDEX_ATTR + '="' + resultIndex + '" ');

1917 }

1918 }

1919

1920 // Render each group of markup with similar wrapping `nodeName`.

2211 - var renderNodes = createNodesFromMarkup(

2212 - markupListByNodeName.join(''),

2213 - emptyFunction // Do nothing special with <script> tags.

1921 + var renderNodes = createNodesFromMarkup(markupListByNodeName.join(''), emptyFunction // Do nothing special with <script> tags.

1922 );

1923

1924 for (var j = 0; j < renderNodes.length; ++j) {

1925 var renderNode = renderNodes[j];

2218 - if (renderNode.hasAttribute &&

2219 - renderNode.hasAttribute(RESULT_INDEX_ATTR)) {

1926 + if (renderNode.hasAttribute && renderNode.hasAttribute(RESULT_INDEX_ATTR)) {

1927

1928 resultIndex = +renderNode.getAttribute(RESULT_INDEX_ATTR);

1929 renderNode.removeAttribute(RESULT_INDEX_ATTR);

1930

2224 - ("production" !== "development" ? invariant(

2225 - !resultList.hasOwnProperty(resultIndex),

2226 - 'Danger: Assigning to an already-occupied result index.'

2227 - ) : invariant(!resultList.hasOwnProperty(resultIndex)));

1931 + !!resultList.hasOwnProperty(resultIndex) ? "development" !== 'production' ? invariant(false, 'Danger: Assigning to an already-occupied result index.') : invariant(false) : undefined;

1932

1933 resultList[resultIndex] = renderNode;

1934

1935 // This should match resultList.length and markupList.length when

1936 // we're done.

1937 resultListAssignmentCount += 1;

2234 -

2235 - } else if ("production" !== "development") {

2236 - console.error(

2237 - 'Danger: Discarding unexpected node:',

2238 - renderNode

2239 - );

1938 + } else if ("development" !== 'production') {

1939 + console.error('Danger: Discarding unexpected node:', renderNode);

1940 }

1941 }

1942 }

1943

1944 // Although resultList was populated out of order, it should now be a dense

1945 // array.

2246 - ("production" !== "development" ? invariant(

2247 - resultListAssignmentCount === resultList.length,

2248 - 'Danger: Did not assign to every index of resultList.'

2249 - ) : invariant(resultListAssignmentCount === resultList.length));

2250 -

2251 - ("production" !== "development" ? invariant(

2252 - resultList.length === markupList.length,

2253 - 'Danger: Expected markup to render %s nodes, but rendered %s.',

2254 - markupList.length,

2255 - resultList.length

2256 - ) : invariant(resultList.length === markupList.length));

1946 + !(resultListAssignmentCount === resultList.length) ? "development" !== 'production' ? invariant(false, 'Danger: Did not assign to every index of resultList.') : invariant(false) : undefined;

1947 +

1948 + !(resultList.length === markupList.length) ? "development" !== 'production' ? invariant(false, 'Danger: Expected markup to render %s nodes, but rendered %s.', markupList.length, resultList.length) : invariant(false) : undefined;

1949

1950 return resultList;

1951 },

@@ -2266,32 +1958,24 @@ var Danger = {

1958 * @param {string} markup Markup to render in place of the child node.

1959 * @internal

1960 */

2269 - dangerouslyReplaceNodeWithMarkup: function(oldChild, markup) {

2270 - ("production" !== "development" ? invariant(

2271 - ExecutionEnvironment.canUseDOM,

2272 - 'dangerouslyReplaceNodeWithMarkup(...): Cannot render markup in a ' +

2273 - 'worker thread. Make sure `window` and `document` are available ' +

2274 - 'globally before requiring React when unit testing or use ' +

2275 - 'React.renderToString for server rendering.'

2276 - ) : invariant(ExecutionEnvironment.canUseDOM));

2277 - ("production" !== "development" ? invariant(markup, 'dangerouslyReplaceNodeWithMarkup(...): Missing markup.') : invariant(markup));

2278 - ("production" !== "development" ? invariant(

2279 - oldChild.tagName.toLowerCase() !== 'html',

2280 - 'dangerouslyReplaceNodeWithMarkup(...): Cannot replace markup of the ' +

2281 - '<html> node. This is because browser quirks make this unreliable ' +

2282 - 'and/or slow. If you want to render to the root you must use ' +

2283 - 'server rendering. See React.renderToString().'

2284 - ) : invariant(oldChild.tagName.toLowerCase() !== 'html'));

2285 -

2286 - var newChild = createNodesFromMarkup(markup, emptyFunction)[0];

1961 + dangerouslyReplaceNodeWithMarkup: function (oldChild, markup) {

1962 + !ExecutionEnvironment.canUseDOM ? "development" !== 'production' ? invariant(false, 'dangerouslyReplaceNodeWithMarkup(...): Cannot render markup in a ' + 'worker thread. Make sure `window` and `document` are available ' + 'globally before requiring React when unit testing or use ' + 'ReactDOMServer.renderToString() for server rendering.') : invariant(false) : undefined;

1963 + !markup ? "development" !== 'production' ? invariant(false, 'dangerouslyReplaceNodeWithMarkup(...): Missing markup.') : invariant(false) : undefined;

1964 + !(oldChild.tagName.toLowerCase() !== 'html') ? "development" !== 'production' ? invariant(false, 'dangerouslyReplaceNodeWithMarkup(...): Cannot replace markup of the ' + '<html> node. This is because browser quirks make this unreliable ' + 'and/or slow. If you want to render to the root you must use ' + 'server rendering. See ReactDOMServer.renderToString().') : invariant(false) : undefined;

1965 +

1966 + var newChild;

1967 + if (typeof markup === 'string') {

1968 + newChild = createNodesFromMarkup(markup, emptyFunction)[0];

1969 + } else {

1970 + newChild = markup;

1971 + }

1972 oldChild.parentNode.replaceChild(newChild, oldChild);

1973 }

1974

1975 };

1976

1977 module.exports = Danger;

2293 -

2294 -},{"112":112,"114":114,"127":127,"135":135,"21":21}],13:[function(_dereq_,module,exports){

1978 +},{"129":129,"134":134,"135":135,"139":139,"143":143}],13:[function(_dereq_,module,exports){

1979 /**

@@ -2305,7 +1989,7 @@ module.exports = Danger;

1989

1990 'use strict';

1991

2308 -var keyOf = _dereq_(141);

1992 +var keyOf = _dereq_(147);

1993

1994 /**

1995 * Module that is injectable into `EventPluginHub`, that specifies a

@@ -2316,21 +2000,10 @@ var keyOf = _dereq_(141);

2000 * `ResponderEventPlugin` must occur before `SimpleEventPlugin` so that

2001 * preventing default on events is convenient in `SimpleEventPlugin` handlers.

2002 */

2319 -var DefaultEventPluginOrder = [

2320 - keyOf({ResponderEventPlugin: null}),

2321 - keyOf({SimpleEventPlugin: null}),

2322 - keyOf({TapEventPlugin: null}),

2323 - keyOf({EnterLeaveEventPlugin: null}),

2324 - keyOf({ChangeEventPlugin: null}),

2325 - keyOf({SelectEventPlugin: null}),

2326 - keyOf({BeforeInputEventPlugin: null}),

2327 - keyOf({AnalyticsEventPlugin: null}),

2328 - keyOf({MobileSafariClickEventPlugin: null})

2329 -];

2003 +var DefaultEventPluginOrder = [keyOf({ ResponderEventPlugin: null }), keyOf({ SimpleEventPlugin: null }), keyOf({ TapEventPlugin: null }), keyOf({ EnterLeaveEventPlugin: null }), keyOf({ ChangeEventPlugin: null }), keyOf({ SelectEventPlugin: null }), keyOf({ BeforeInputEventPlugin: null })];

2004

2005 module.exports = DefaultEventPluginOrder;

2332 -

2333 -},{"141":141}],14:[function(_dereq_,module,exports){

2006 +},{"147":147}],14:[function(_dereq_,module,exports){

2007 /**

@@ -2346,29 +2019,23 @@ module.exports = DefaultEventPluginOrder;

2019 'use strict';

2020

2021 var EventConstants = _dereq_(15);

2349 -var EventPropagators = _dereq_(20);

2350 -var SyntheticMouseEvent = _dereq_(99);

2022 +var EventPropagators = _dereq_(19);

2023 +var SyntheticMouseEvent = _dereq_(96);

2024

2352 -var ReactMount = _dereq_(70);

2353 -var keyOf = _dereq_(141);

2025 +var ReactMount = _dereq_(65);

2026 +var keyOf = _dereq_(147);

2027

2028 var topLevelTypes = EventConstants.topLevelTypes;

2029 var getFirstReactDOM = ReactMount.getFirstReactDOM;

2030

2031 var eventTypes = {

2032 mouseEnter: {

2360 - registrationName: keyOf({onMouseEnter: null}),

2361 - dependencies: [

2362 - topLevelTypes.topMouseOut,

2363 - topLevelTypes.topMouseOver

2364 - ]

2033 + registrationName: keyOf({ onMouseEnter: null }),

2034 + dependencies: [topLevelTypes.topMouseOut, topLevelTypes.topMouseOver]

2035 },

2036 mouseLeave: {

2367 - registrationName: keyOf({onMouseLeave: null}),

2368 - dependencies: [

2369 - topLevelTypes.topMouseOut,

2370 - topLevelTypes.topMouseOver

2371 - ]

2037 + registrationName: keyOf({ onMouseLeave: null }),

2038 + dependencies: [topLevelTypes.topMouseOut, topLevelTypes.topMouseOver]

2039 }

2040 };

2041

@@ -2392,17 +2059,11 @@ var EnterLeaveEventPlugin = {

2059 * @return {*} An accumulation of synthetic events.

2060 * @see {EventPluginHub.extractEvents}

2061 */

2395 - extractEvents: function(

2396 - topLevelType,

2397 - topLevelTarget,

2398 - topLevelTargetID,

2399 - nativeEvent) {

2400 - if (topLevelType === topLevelTypes.topMouseOver &&

2401 - (nativeEvent.relatedTarget || nativeEvent.fromElement)) {

2062 + extractEvents: function (topLevelType, topLevelTarget, topLevelTargetID, nativeEvent, nativeEventTarget) {

2063 + if (topLevelType === topLevelTypes.topMouseOver && (nativeEvent.relatedTarget || nativeEvent.fromElement)) {

2064 return null;

2065 }

2404 - if (topLevelType !== topLevelTypes.topMouseOut &&

2405 - topLevelType !== topLevelTypes.topMouseOver) {

2066 + if (topLevelType !== topLevelTypes.topMouseOut && topLevelType !== topLevelTypes.topMouseOver) {

2067 // Must not be a mouse in or mouse out - ignoring.

2068 return null;

2069 }

@@ -2421,15 +2082,24 @@ var EnterLeaveEventPlugin = {

2082 }

2083 }

2084

2424 - var from, to;

2085 + var from;

2086 + var to;

2087 + var fromID = '';

2088 + var toID = '';

2089 if (topLevelType === topLevelTypes.topMouseOut) {

2090 from = topLevelTarget;

2427 - to =

2428 - getFirstReactDOM(nativeEvent.relatedTarget || nativeEvent.toElement) ||

2429 - win;

2091 + fromID = topLevelTargetID;

2092 + to = getFirstReactDOM(nativeEvent.relatedTarget || nativeEvent.toElement);

2093 + if (to) {

2094 + toID = ReactMount.getID(to);

2095 + } else {

2096 + to = win;

2097 + }

2098 + to = to || win;

2099 } else {

2100 from = win;

2101 to = topLevelTarget;

2102 + toID = topLevelTargetID;

2103 }

2104

2105 if (from === to) {

@@ -2437,23 +2107,12 @@ var EnterLeaveEventPlugin = {

2107 return null;

2108 }

2109

2440 - var fromID = from ? ReactMount.getID(from) : '';

2441 - var toID = to ? ReactMount.getID(to) : '';

2442 -

2443 - var leave = SyntheticMouseEvent.getPooled(

2444 - eventTypes.mouseLeave,

2445 - fromID,

2446 - nativeEvent

2447 - );

2110 + var leave = SyntheticMouseEvent.getPooled(eventTypes.mouseLeave, fromID, nativeEvent, nativeEventTarget);

2111 leave.type = 'mouseleave';

2112 leave.target = from;

2113 leave.relatedTarget = to;

2114

2452 - var enter = SyntheticMouseEvent.getPooled(

2453 - eventTypes.mouseEnter,

2454 - toID,

2455 - nativeEvent

2456 - );

2115 + var enter = SyntheticMouseEvent.getPooled(eventTypes.mouseEnter, toID, nativeEvent, nativeEventTarget);

2116 enter.type = 'mouseenter';

2117 enter.target = to;

2118 enter.relatedTarget = from;

@@ -2469,8 +2128,7 @@ var EnterLeaveEventPlugin = {

2128 };

2129

2130 module.exports = EnterLeaveEventPlugin;

2472 -

2473 -},{"141":141,"15":15,"20":20,"70":70,"99":99}],15:[function(_dereq_,module,exports){

2131 +},{"147":147,"15":15,"19":19,"65":65,"96":96}],15:[function(_dereq_,module,exports){

2132 /**

@@ -2484,15 +2142,18 @@ module.exports = EnterLeaveEventPlugin;

2142

2143 'use strict';

2144

2487 -var keyMirror = _dereq_(140);

2145 +var keyMirror = _dereq_(146);

2146

2489 -var PropagationPhases = keyMirror({bubbled: null, captured: null});

2147 +var PropagationPhases = keyMirror({ bubbled: null, captured: null });

2148

2149 /**

2150 * Types of raw signals from the browser caught at the top level.

2151 */

2152 var topLevelTypes = keyMirror({

2153 + topAbort: null,

2154 topBlur: null,

2155 + topCanPlay: null,

2156 + topCanPlayThrough: null,

2157 topChange: null,

2158 topClick: null,

2159 topCompositionEnd: null,

@@ -2510,6 +2171,10 @@ var topLevelTypes = keyMirror({

2171 topDragOver: null,

2172 topDragStart: null,

2173 topDrop: null,

2174 + topDurationChange: null,

2175 + topEmptied: null,

2176 + topEncrypted: null,

2177 + topEnded: null,

2178 topError: null,

2179 topFocus: null,

2180 topInput: null,

@@ -2517,21 +2182,36 @@ var topLevelTypes = keyMirror({

2182 topKeyPress: null,

2183 topKeyUp: null,

2184 topLoad: null,

2185 + topLoadedData: null,

2186 + topLoadedMetadata: null,

2187 + topLoadStart: null,

2188 topMouseDown: null,

2189 topMouseMove: null,

2190 topMouseOut: null,

2191 topMouseOver: null,

2192 topMouseUp: null,

2193 topPaste: null,

2194 + topPause: null,

2195 + topPlay: null,

2196 + topPlaying: null,

2197 + topProgress: null,

2198 + topRateChange: null,

2199 topReset: null,

2200 topScroll: null,

2201 + topSeeked: null,

2202 + topSeeking: null,

2203 topSelectionChange: null,

2204 + topStalled: null,

2205 topSubmit: null,

2206 + topSuspend: null,

2207 topTextInput: null,

2208 + topTimeUpdate: null,

2209 topTouchCancel: null,

2210 topTouchEnd: null,

2211 topTouchMove: null,

2212 topTouchStart: null,

2213 + topVolumeChange: null,

2214 + topWaiting: null,

2215 topWheel: null

2216 });

2217

@@ -2541,118 +2221,31 @@ var EventConstants = {

2221 };

2222

2223 module.exports = EventConstants;

2544 -

2545 -},{"140":140}],16:[function(_dereq_,module,exports){

2224 +},{"146":146}],16:[function(_dereq_,module,exports){

2225 /**

2228 *

2549 - * Licensed under the Apache License, Version 2.0 (the "License");

2550 - * you may not use this file except in compliance with the License.

2551 - * You may obtain a copy of the License at

2552 - *

2553 - * http://www.apache.org/licenses/LICENSE-2.0

2554 - *

2555 - * Unless required by applicable law or agreed to in writing, software

2556 - * distributed under the License is distributed on an "AS IS" BASIS,

2557 - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

2558 - * See the License for the specific language governing permissions and

2559 - * limitations under the License.

2229 + * This source code is licensed under the BSD-style license found in the

2230 + * LICENSE file in the root directory of this source tree. An additional grant

2231 + * of patent rights can be found in the PATENTS file in the same directory.

2232 *

2561 - * @providesModule EventListener

2562 - * @typechecks

2233 + * @providesModule EventPluginHub

2234 */

2235

2565 -var emptyFunction = _dereq_(114);

2236 +'use strict';

2237 +

2238 +var EventPluginRegistry = _dereq_(17);

2239 +var EventPluginUtils = _dereq_(18);

2240 +var ReactErrorUtils = _dereq_(56);

2241 +

2242 +var accumulateInto = _dereq_(102);

2243 +var forEachAccumulated = _dereq_(109);

2244 +var invariant = _dereq_(143);

2245 +var warning = _dereq_(154);

2246

2247 /**

2568 - * Upstream version of event listener. Does not take into account specific

2569 - * nature of platform.

2570 - */

2571 -var EventListener = {

2572 - /**

2573 - * Listen to DOM events during the bubble phase.

2574 - *

2575 - * @param {DOMEventTarget} target DOM element to register listener on.

2576 - * @param {string} eventType Event type, e.g. 'click' or 'mouseover'.

2577 - * @param {function} callback Callback function.

2578 - * @return {object} Object with a `remove` method.

2579 - */

2580 - listen: function(target, eventType, callback) {

2581 - if (target.addEventListener) {

2582 - target.addEventListener(eventType, callback, false);

2583 - return {

2584 - remove: function() {

2585 - target.removeEventListener(eventType, callback, false);

2586 - }

2587 - };

2588 - } else if (target.attachEvent) {

2589 - target.attachEvent('on' + eventType, callback);

2590 - return {

2591 - remove: function() {

2592 - target.detachEvent('on' + eventType, callback);

2593 - }

2594 - };

2595 - }

2596 - },

2597 -

2598 - /**

2599 - * Listen to DOM events during the capture phase.

2600 - *

2601 - * @param {DOMEventTarget} target DOM element to register listener on.

2602 - * @param {string} eventType Event type, e.g. 'click' or 'mouseover'.

2603 - * @param {function} callback Callback function.

2604 - * @return {object} Object with a `remove` method.

2605 - */

2606 - capture: function(target, eventType, callback) {

2607 - if (!target.addEventListener) {

2608 - if ("production" !== "development") {

2609 - console.error(

2610 - 'Attempted to listen to events during the capture phase on a ' +

2611 - 'browser that does not support the capture phase. Your application ' +

2612 - 'will not receive some events.'

2613 - );

2614 - }

2615 - return {

2616 - remove: emptyFunction

2617 - };

2618 - } else {

2619 - target.addEventListener(eventType, callback, true);

2620 - return {

2621 - remove: function() {

2622 - target.removeEventListener(eventType, callback, true);

2623 - }

2624 - };

2625 - }

2626 - },

2627 -

2628 - registerDefault: function() {}

2629 -};

2630 -

2631 -module.exports = EventListener;

2632 -

2633 -},{"114":114}],17:[function(_dereq_,module,exports){

2634 -/**

2637 - *

2638 - * This source code is licensed under the BSD-style license found in the

2639 - * LICENSE file in the root directory of this source tree. An additional grant

2640 - * of patent rights can be found in the PATENTS file in the same directory.

2641 - *

2642 - * @providesModule EventPluginHub

2643 - */

2644 -

2645 -'use strict';

2646 -

2647 -var EventPluginRegistry = _dereq_(18);

2648 -var EventPluginUtils = _dereq_(19);

2649 -

2650 -var accumulateInto = _dereq_(105);

2651 -var forEachAccumulated = _dereq_(120);

2652 -var invariant = _dereq_(135);

2653 -

2654 -/**

2655 - * Internal store for event listeners

2248 + * Internal store for event listeners

2249 */

2250 var listenerBank = {};

2251

@@ -2666,23 +2259,24 @@ var eventQueue = null;

2259 * Dispatches an event and releases it back into the pool, unless persistent.

2260 *

2261 * @param {?object} event Synthetic event to be dispatched.

2262 + * @param {boolean} simulated If the event is simulated (changes exn behavior)

2263 * @private

2264 */

2671 -var executeDispatchesAndRelease = function(event) {

2265 +var executeDispatchesAndRelease = function (event, simulated) {

2266 if (event) {

2673 - var executeDispatch = EventPluginUtils.executeDispatch;

2674 - // Plugins can provide custom behavior when dispatching events.

2675 - var PluginModule = EventPluginRegistry.getPluginModuleForEvent(event);

2676 - if (PluginModule && PluginModule.executeDispatch) {

2677 - executeDispatch = PluginModule.executeDispatch;

2678 - }

2679 - EventPluginUtils.executeDispatchesInOrder(event, executeDispatch);

2267 + EventPluginUtils.executeDispatchesInOrder(event, simulated);

2268

2269 if (!event.isPersistent()) {

2270 event.constructor.release(event);

2271 }

2272 }

2273 };

2274 +var executeDispatchesAndReleaseSimulated = function (e) {

2275 + return executeDispatchesAndRelease(e, true);

2276 +};

2277 +var executeDispatchesAndReleaseTopLevel = function (e) {

2278 + return executeDispatchesAndRelease(e, false);

2279 +};

2280

2281 /**

2282 * - `InstanceHandle`: [required] Module that performs logical traversals of DOM

@@ -2691,14 +2285,8 @@ var executeDispatchesAndRelease = function(event) {

2285 var InstanceHandle = null;

2286

2287 function validateInstanceHandle() {

2694 - var valid =

2695 - InstanceHandle &&

2696 - InstanceHandle.traverseTwoPhase &&

2697 - InstanceHandle.traverseEnterLeave;

2698 - ("production" !== "development" ? invariant(

2699 - valid,

2700 - 'InstanceHandle not injected before use!'

2701 - ) : invariant(valid));

2288 + var valid = InstanceHandle && InstanceHandle.traverseTwoPhase && InstanceHandle.traverseEnterLeave;

2289 + "development" !== 'production' ? warning(valid, 'InstanceHandle not injected before use!') : undefined;

2290 }

2291

2292 /**

@@ -2740,15 +2328,15 @@ var EventPluginHub = {

2328 * @param {object} InjectedInstanceHandle

2329 * @public

2330 */

2743 - injectInstanceHandle: function(InjectedInstanceHandle) {

2331 + injectInstanceHandle: function (InjectedInstanceHandle) {

2332 InstanceHandle = InjectedInstanceHandle;

2745 - if ("production" !== "development") {

2333 + if ("development" !== 'production') {

2334 validateInstanceHandle();

2335 }

2336 },

2337

2750 - getInstanceHandle: function() {

2751 - if ("production" !== "development") {

2338 + getInstanceHandle: function () {

2339 + if ("development" !== 'production') {

2340 validateInstanceHandle();

2341 }

2342 return InstanceHandle;

@@ -2778,16 +2366,16 @@ var EventPluginHub = {

2366 * @param {string} registrationName Name of listener (e.g. `onClick`).

2367 * @param {?function} listener The callback to store.

2368 */

2781 - putListener: function(id, registrationName, listener) {

2782 - ("production" !== "development" ? invariant(

2783 - !listener || typeof listener === 'function',

2784 - 'Expected %s listener to be a function, instead got type %s',

2785 - registrationName, typeof listener

2786 - ) : invariant(!listener || typeof listener === 'function'));

2787 -

2788 - var bankForRegistrationName =

2789 - listenerBank[registrationName] || (listenerBank[registrationName] = {});

2369 + putListener: function (id, registrationName, listener) {

2370 + !(typeof listener === 'function') ? "development" !== 'production' ? invariant(false, 'Expected %s listener to be a function, instead got type %s', registrationName, typeof listener) : invariant(false) : undefined;

2371 +

2372 + var bankForRegistrationName = listenerBank[registrationName] || (listenerBank[registrationName] = {});

2373 bankForRegistrationName[id] = listener;

2374 +

2375 + var PluginModule = EventPluginRegistry.registrationNameModules[registrationName];

2376 + if (PluginModule && PluginModule.didPutListener) {

2377 + PluginModule.didPutListener(id, registrationName, listener);

2378 + }

2379 },

2380

2381 /**

@@ -2795,7 +2383,7 @@ var EventPluginHub = {

2383 * @param {string} registrationName Name of listener (e.g. `onClick`).

2384 * @return {?function} The stored callback.

2385 */

2798 - getListener: function(id, registrationName) {

2386 + getListener: function (id, registrationName) {

2387 var bankForRegistrationName = listenerBank[registrationName];

2388 return bankForRegistrationName && bankForRegistrationName[id];

2389 },

@@ -2806,8 +2394,14 @@ var EventPluginHub = {

2394 * @param {string} id ID of the DOM element.

2395 * @param {string} registrationName Name of listener (e.g. `onClick`).

2396 */

2809 - deleteListener: function(id, registrationName) {

2397 + deleteListener: function (id, registrationName) {

2398 + var PluginModule = EventPluginRegistry.registrationNameModules[registrationName];

2399 + if (PluginModule && PluginModule.willDeleteListener) {

2400 + PluginModule.willDeleteListener(id, registrationName);

2401 + }

2402 +

2403 var bankForRegistrationName = listenerBank[registrationName];

2404 + // TODO: This should never be null -- when is it?

2405 if (bankForRegistrationName) {

2406 delete bankForRegistrationName[id];

2407 }

@@ -2818,8 +2412,17 @@ var EventPluginHub = {

2412 *

2413 * @param {string} id ID of the DOM element.

2414 */

2821 - deleteAllListeners: function(id) {

2415 + deleteAllListeners: function (id) {

2416 for (var registrationName in listenerBank) {

2417 + if (!listenerBank[registrationName][id]) {

2418 + continue;

2419 + }

2420 +

2421 + var PluginModule = EventPluginRegistry.registrationNameModules[registrationName];

2422 + if (PluginModule && PluginModule.willDeleteListener) {

2423 + PluginModule.willDeleteListener(id, registrationName);

2424 + }

2425 +

2426 delete listenerBank[registrationName][id];

2427 }

2428 },

@@ -2835,23 +2438,14 @@ var EventPluginHub = {

2438 * @return {*} An accumulation of synthetic events.

2439 * @internal

2440 */

2838 - extractEvents: function(

2839 - topLevelType,

2840 - topLevelTarget,

2841 - topLevelTargetID,

2842 - nativeEvent) {

2441 + extractEvents: function (topLevelType, topLevelTarget, topLevelTargetID, nativeEvent, nativeEventTarget) {

2442 var events;

2443 var plugins = EventPluginRegistry.plugins;

2845 - for (var i = 0, l = plugins.length; i < l; i++) {

2444 + for (var i = 0; i < plugins.length; i++) {

2445 // Not every plugin in the ordering may be loaded at runtime.

2446 var possiblePlugin = plugins[i];

2447 if (possiblePlugin) {

2849 - var extractedEvents = possiblePlugin.extractEvents(

2850 - topLevelType,

2851 - topLevelTarget,

2852 - topLevelTargetID,

2853 - nativeEvent

2854 - );

2448 + var extractedEvents = possiblePlugin.extractEvents(topLevelType, topLevelTarget, topLevelTargetID, nativeEvent, nativeEventTarget);

2449 if (extractedEvents) {

2450 events = accumulateInto(events, extractedEvents);

2451 }

@@ -2867,7 +2461,7 @@ var EventPluginHub = {

2461 * @param {*} events An accumulation of synthetic events.

2462 * @internal

2463 */

2870 - enqueueEvents: function(events) {

2464 + enqueueEvents: function (events) {

2465 if (events) {

2466 eventQueue = accumulateInto(eventQueue, events);

2467 }

@@ -2878,35 +2472,36 @@ var EventPluginHub = {

2472 *

2473 * @internal

2474 */

2881 - processEventQueue: function() {

2475 + processEventQueue: function (simulated) {

2476 // Set `eventQueue` to null before processing it so that we can tell if more

2477 // events get enqueued while processing.

2478 var processingEventQueue = eventQueue;

2479 eventQueue = null;

2886 - forEachAccumulated(processingEventQueue, executeDispatchesAndRelease);

2887 - ("production" !== "development" ? invariant(

2888 - !eventQueue,

2889 - 'processEventQueue(): Additional events were enqueued while processing ' +

2890 - 'an event queue. Support for this has not yet been implemented.'

2891 - ) : invariant(!eventQueue));

2480 + if (simulated) {

2481 + forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseSimulated);

2482 + } else {

2483 + forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseTopLevel);

2484 + }

2485 + !!eventQueue ? "development" !== 'production' ? invariant(false, 'processEventQueue(): Additional events were enqueued while processing ' + 'an event queue. Support for this has not yet been implemented.') : invariant(false) : undefined;

2486 + // This would be a good time to rethrow if any of the event handlers threw.

2487 + ReactErrorUtils.rethrowCaughtError();

2488 },

2489

2490 /**

2491 * These are needed for tests only. Do not use!

2492 */

2897 - __purge: function() {

2493 + __purge: function () {

2494 listenerBank = {};

2495 },

2496

2901 - __getListenerBank: function() {

2497 + __getListenerBank: function () {

2498 return listenerBank;

2499 }

2500

2501 };

2502

2503 module.exports = EventPluginHub;

2908 -

2909 -},{"105":105,"120":120,"135":135,"18":18,"19":19}],18:[function(_dereq_,module,exports){

2504 +},{"102":102,"109":109,"143":143,"154":154,"17":17,"18":18,"56":56}],17:[function(_dereq_,module,exports){

2505 /**

@@ -2921,7 +2516,7 @@ module.exports = EventPluginHub;

2516

2517 'use strict';

2518

2924 -var invariant = _dereq_(135);

2519 +var invariant = _dereq_(143);

2520

2521 /**

2522 * Injectable ordering of event plugins.

@@ -2946,38 +2541,15 @@ function recomputePluginOrdering() {

2541 for (var pluginName in namesToPlugins) {

2542 var PluginModule = namesToPlugins[pluginName];

2543 var pluginIndex = EventPluginOrder.indexOf(pluginName);

2949 - ("production" !== "development" ? invariant(

2950 - pluginIndex > -1,

2951 - 'EventPluginRegistry: Cannot inject event plugins that do not exist in ' +

2952 - 'the plugin ordering, `%s`.',

2953 - pluginName

2954 - ) : invariant(pluginIndex > -1));

2544 + !(pluginIndex > -1) ? "development" !== 'production' ? invariant(false, 'EventPluginRegistry: Cannot inject event plugins that do not exist in ' + 'the plugin ordering, `%s`.', pluginName) : invariant(false) : undefined;

2545 if (EventPluginRegistry.plugins[pluginIndex]) {

2546 continue;

2547 }

2958 - ("production" !== "development" ? invariant(

2959 - PluginModule.extractEvents,

2960 - 'EventPluginRegistry: Event plugins must implement an `extractEvents` ' +

2961 - 'method, but `%s` does not.',

2962 - pluginName

2963 - ) : invariant(PluginModule.extractEvents));

2548 + !PluginModule.extractEvents ? "development" !== 'production' ? invariant(false, 'EventPluginRegistry: Event plugins must implement an `extractEvents` ' + 'method, but `%s` does not.', pluginName) : invariant(false) : undefined;

2549 EventPluginRegistry.plugins[pluginIndex] = PluginModule;

2550 var publishedEvents = PluginModule.eventTypes;

2551 for (var eventName in publishedEvents) {

2967 - ("production" !== "development" ? invariant(

2968 - publishEventForPlugin(

2969 - publishedEvents[eventName],

2970 - PluginModule,

2971 - eventName

2972 - ),

2973 - 'EventPluginRegistry: Failed to publish event `%s` for plugin `%s`.',

2974 - eventName,

2975 - pluginName

2976 - ) : invariant(publishEventForPlugin(

2977 - publishedEvents[eventName],

2978 - PluginModule,

2979 - eventName

2980 - )));

2552 + !publishEventForPlugin(publishedEvents[eventName], PluginModule, eventName) ? "development" !== 'production' ? invariant(false, 'EventPluginRegistry: Failed to publish event `%s` for plugin `%s`.', eventName, pluginName) : invariant(false) : undefined;

2553 }

2554 }

2555 }

@@ -2991,12 +2563,7 @@ function recomputePluginOrdering() {

2563 * @private

2564 */

2565 function publishEventForPlugin(dispatchConfig, PluginModule, eventName) {

2994 - ("production" !== "development" ? invariant(

2995 - !EventPluginRegistry.eventNameDispatchConfigs.hasOwnProperty(eventName),

2996 - 'EventPluginHub: More than one plugin attempted to publish the same ' +

2997 - 'event name, `%s`.',

2998 - eventName

2999 - ) : invariant(!EventPluginRegistry.eventNameDispatchConfigs.hasOwnProperty(eventName)));

2566 + !!EventPluginRegistry.eventNameDispatchConfigs.hasOwnProperty(eventName) ? "development" !== 'production' ? invariant(false, 'EventPluginHub: More than one plugin attempted to publish the same ' + 'event name, `%s`.', eventName) : invariant(false) : undefined;

2567 EventPluginRegistry.eventNameDispatchConfigs[eventName] = dispatchConfig;

2568

2569 var phasedRegistrationNames = dispatchConfig.phasedRegistrationNames;

@@ -3004,20 +2571,12 @@ function publishEventForPlugin(dispatchConfig, PluginModule, eventName) {

2571 for (var phaseName in phasedRegistrationNames) {

2572 if (phasedRegistrationNames.hasOwnProperty(phaseName)) {

2573 var phasedRegistrationName = phasedRegistrationNames[phaseName];

3007 - publishRegistrationName(

3008 - phasedRegistrationName,

3009 - PluginModule,

3010 - eventName

3011 - );

2574 + publishRegistrationName(phasedRegistrationName, PluginModule, eventName);

2575 }

2576 }

2577 return true;

2578 } else if (dispatchConfig.registrationName) {

3016 - publishRegistrationName(

3017 - dispatchConfig.registrationName,

3018 - PluginModule,

3019 - eventName

3020 - );

2579 + publishRegistrationName(dispatchConfig.registrationName, PluginModule, eventName);

2580 return true;

2581 }

2582 return false;

@@ -3032,15 +2591,9 @@ function publishEventForPlugin(dispatchConfig, PluginModule, eventName) {

2591 * @private

2592 */

2593 function publishRegistrationName(registrationName, PluginModule, eventName) {

3035 - ("production" !== "development" ? invariant(

3036 - !EventPluginRegistry.registrationNameModules[registrationName],

3037 - 'EventPluginHub: More than one plugin attempted to publish the same ' +

3038 - 'registration name, `%s`.',

3039 - registrationName

3040 - ) : invariant(!EventPluginRegistry.registrationNameModules[registrationName]));

2594 + !!EventPluginRegistry.registrationNameModules[registrationName] ? "development" !== 'production' ? invariant(false, 'EventPluginHub: More than one plugin attempted to publish the same ' + 'registration name, `%s`.', registrationName) : invariant(false) : undefined;

2595 EventPluginRegistry.registrationNameModules[registrationName] = PluginModule;

3042 - EventPluginRegistry.registrationNameDependencies[registrationName] =

3043 - PluginModule.eventTypes[eventName].dependencies;

2596 + EventPluginRegistry.registrationNameDependencies[registrationName] = PluginModule.eventTypes[eventName].dependencies;

2597 }

2598

2599 /**

@@ -3079,12 +2632,8 @@ var EventPluginRegistry = {

2632 * @internal

2633 * @see {EventPluginHub.injection.injectEventPluginOrder}

2634 */

3082 - injectEventPluginOrder: function(InjectedEventPluginOrder) {

3083 - ("production" !== "development" ? invariant(

3084 - !EventPluginOrder,

3085 - 'EventPluginRegistry: Cannot inject event plugin ordering more than ' +

3086 - 'once. You are likely trying to load more than one copy of React.'

3087 - ) : invariant(!EventPluginOrder));

2635 + injectEventPluginOrder: function (InjectedEventPluginOrder) {

2636 + !!EventPluginOrder ? "development" !== 'production' ? invariant(false, 'EventPluginRegistry: Cannot inject event plugin ordering more than ' + 'once. You are likely trying to load more than one copy of React.') : invariant(false) : undefined;

2637 // Clone the ordering so it cannot be dynamically mutated.

2638 EventPluginOrder = Array.prototype.slice.call(InjectedEventPluginOrder);

2639 recomputePluginOrdering();

@@ -3100,21 +2649,15 @@ var EventPluginRegistry = {

2649 * @internal

2650 * @see {EventPluginHub.injection.injectEventPluginsByName}

2651 */

3103 - injectEventPluginsByName: function(injectedNamesToPlugins) {

2652 + injectEventPluginsByName: function (injectedNamesToPlugins) {

2653 var isOrderingDirty = false;

2654 for (var pluginName in injectedNamesToPlugins) {

2655 if (!injectedNamesToPlugins.hasOwnProperty(pluginName)) {

2656 continue;

2657 }

2658 var PluginModule = injectedNamesToPlugins[pluginName];

3110 - if (!namesToPlugins.hasOwnProperty(pluginName) ||

3111 - namesToPlugins[pluginName] !== PluginModule) {

3112 - ("production" !== "development" ? invariant(

3113 - !namesToPlugins[pluginName],

3114 - 'EventPluginRegistry: Cannot inject two different event plugins ' +

3115 - 'using the same name, `%s`.',

3116 - pluginName

3117 - ) : invariant(!namesToPlugins[pluginName]));

2659 + if (!namesToPlugins.hasOwnProperty(pluginName) || namesToPlugins[pluginName] !== PluginModule) {

2660 + !!namesToPlugins[pluginName] ? "development" !== 'production' ? invariant(false, 'EventPluginRegistry: Cannot inject two different event plugins ' + 'using the same name, `%s`.', pluginName) : invariant(false) : undefined;

2661 namesToPlugins[pluginName] = PluginModule;

2662 isOrderingDirty = true;

2663 }

@@ -3131,20 +2674,16 @@ var EventPluginRegistry = {

2674 * @return {?object} The plugin that created the supplied event.

2675 * @internal

2676 */

3134 - getPluginModuleForEvent: function(event) {

2677 + getPluginModuleForEvent: function (event) {

2678 var dispatchConfig = event.dispatchConfig;

2679 if (dispatchConfig.registrationName) {

3137 - return EventPluginRegistry.registrationNameModules[

3138 - dispatchConfig.registrationName

3139 - ] || null;

2680 + return EventPluginRegistry.registrationNameModules[dispatchConfig.registrationName] || null;

2681 }

2682 for (var phase in dispatchConfig.phasedRegistrationNames) {

2683 if (!dispatchConfig.phasedRegistrationNames.hasOwnProperty(phase)) {

2684 continue;

2685 }

3145 - var PluginModule = EventPluginRegistry.registrationNameModules[

3146 - dispatchConfig.phasedRegistrationNames[phase]

3147 - ];

2686 + var PluginModule = EventPluginRegistry.registrationNameModules[dispatchConfig.phasedRegistrationNames[phase]];

2687 if (PluginModule) {

2688 return PluginModule;

2689 }

@@ -3156,7 +2695,7 @@ var EventPluginRegistry = {

2695 * Exposed for unit testing.

2696 * @private

2697 */

3159 - _resetEventPlugins: function() {

2698 + _resetEventPlugins: function () {

2699 EventPluginOrder = null;

2700 for (var pluginName in namesToPlugins) {

2701 if (namesToPlugins.hasOwnProperty(pluginName)) {

@@ -3183,8 +2722,7 @@ var EventPluginRegistry = {

2722 };

2723

2724 module.exports = EventPluginRegistry;

3186 -

3187 -},{"135":135}],19:[function(_dereq_,module,exports){

2725 +},{"143":143}],18:[function(_dereq_,module,exports){

2726 /**

@@ -3199,8 +2737,10 @@ module.exports = EventPluginRegistry;

2737 'use strict';

2738

2739 var EventConstants = _dereq_(15);

2740 +var ReactErrorUtils = _dereq_(56);

2741

3203 -var invariant = _dereq_(135);

2742 +var invariant = _dereq_(143);

2743 +var warning = _dereq_(154);

2744

2745 /**

2746 * Injected dependencies:

@@ -3212,14 +2752,10 @@ var invariant = _dereq_(135);

2752 */

2753 var injection = {

2754 Mount: null,

3215 - injectMount: function(InjectedMount) {

2755 + injectMount: function (InjectedMount) {

2756 injection.Mount = InjectedMount;

3217 - if ("production" !== "development") {

3218 - ("production" !== "development" ? invariant(

3219 - InjectedMount && InjectedMount.getNode,

3220 - 'EventPluginUtils.injection.injectMount(...): Injected Mount module ' +

3221 - 'is missing getNode.'

3222 - ) : invariant(InjectedMount && InjectedMount.getNode));

2757 + if ("development" !== 'production') {

2758 + "development" !== 'production' ? warning(InjectedMount && InjectedMount.getNode && InjectedMount.getID, 'EventPluginUtils.injection.injectMount(...): Injected Mount ' + 'module is missing getNode or getID.') : undefined;

2759 }

2760 }

2761 };

@@ -3227,50 +2763,56 @@ var injection = {

2763 var topLevelTypes = EventConstants.topLevelTypes;

2764

2765 function isEndish(topLevelType) {

3230 - return topLevelType === topLevelTypes.topMouseUp ||

3231 - topLevelType === topLevelTypes.topTouchEnd ||

3232 - topLevelType === topLevelTypes.topTouchCancel;

2766 + return topLevelType === topLevelTypes.topMouseUp || topLevelType === topLevelTypes.topTouchEnd || topLevelType === topLevelTypes.topTouchCancel;

2767 }

2768

2769 function isMoveish(topLevelType) {

3236 - return topLevelType === topLevelTypes.topMouseMove ||

3237 - topLevelType === topLevelTypes.topTouchMove;

2770 + return topLevelType === topLevelTypes.topMouseMove || topLevelType === topLevelTypes.topTouchMove;

2771 }

2772 function isStartish(topLevelType) {

3240 - return topLevelType === topLevelTypes.topMouseDown ||

3241 - topLevelType === topLevelTypes.topTouchStart;

2773 + return topLevelType === topLevelTypes.topMouseDown || topLevelType === topLevelTypes.topTouchStart;

2774 }

2775

3244 -

2776 var validateEventDispatches;

3246 -if ("production" !== "development") {

3247 - validateEventDispatches = function(event) {

2777 +if ("development" !== 'production') {

2778 + validateEventDispatches = function (event) {

2779 var dispatchListeners = event._dispatchListeners;

2780 var dispatchIDs = event._dispatchIDs;

2781

2782 var listenersIsArr = Array.isArray(dispatchListeners);

2783 var idsIsArr = Array.isArray(dispatchIDs);

2784 var IDsLen = idsIsArr ? dispatchIDs.length : dispatchIDs ? 1 : 0;

3254 - var listenersLen = listenersIsArr ?

3255 - dispatchListeners.length :

3256 - dispatchListeners ? 1 : 0;

3257 -

3258 - ("production" !== "development" ? invariant(

3259 - idsIsArr === listenersIsArr && IDsLen === listenersLen,

3260 - 'EventPluginUtils: Invalid `event`.'

3261 - ) : invariant(idsIsArr === listenersIsArr && IDsLen === listenersLen));

2785 + var listenersLen = listenersIsArr ? dispatchListeners.length : dispatchListeners ? 1 : 0;

2786 +

2787 + "development" !== 'production' ? warning(idsIsArr === listenersIsArr && IDsLen === listenersLen, 'EventPluginUtils: Invalid `event`.') : undefined;

2788 };

2789 }

2790

2791 /**

3266 - * Invokes `cb(event, listener, id)`. Avoids using call if no scope is

3267 - * provided. The `(listener,id)` pair effectively forms the "dispatch" but are

3268 - * kept separate to conserve memory.

2792 + * Dispatch the event to the listener.

2793 + * @param {SyntheticEvent} event SyntheticEvent to handle

2794 + * @param {boolean} simulated If the event is simulated (changes exn behavior)

2795 + * @param {function} listener Application-level callback

2796 + * @param {string} domID DOM id to pass to the callback.

2797 + */

2798 +function executeDispatch(event, simulated, listener, domID) {

2799 + var type = event.type || 'unknown-event';

2800 + event.currentTarget = injection.Mount.getNode(domID);

2801 + if (simulated) {

2802 + ReactErrorUtils.invokeGuardedCallbackWithCatch(type, listener, event, domID);

2803 + } else {

2804 + ReactErrorUtils.invokeGuardedCallback(type, listener, event, domID);

2805 + }

2806 + event.currentTarget = null;

2807 +}

2808 +

2809 +/**

2810 + * Standard/simple iteration through an event's collected dispatches.

2811 */

3270 -function forEachEventDispatch(event, cb) {

2812 +function executeDispatchesInOrder(event, simulated) {

2813 var dispatchListeners = event._dispatchListeners;

2814 var dispatchIDs = event._dispatchIDs;

3273 - if ("production" !== "development") {

2815 + if ("development" !== 'production') {

2816 validateEventDispatches(event);

2817 }

2818 if (Array.isArray(dispatchListeners)) {

@@ -3279,31 +2821,11 @@ function forEachEventDispatch(event, cb) {

2821 break;

2822 }

2823 // Listeners and IDs are two parallel arrays that are always in sync.

3282 - cb(event, dispatchListeners[i], dispatchIDs[i]);

2824 + executeDispatch(event, simulated, dispatchListeners[i], dispatchIDs[i]);

2825 }

2826 } else if (dispatchListeners) {

3285 - cb(event, dispatchListeners, dispatchIDs);

2827 + executeDispatch(event, simulated, dispatchListeners, dispatchIDs);

2828 }

3287 -}

3288 -

3289 -/**

3290 - * Default implementation of PluginModule.executeDispatch().

3291 - * @param {SyntheticEvent} SyntheticEvent to handle

3292 - * @param {function} Application-level callback

3293 - * @param {string} domID DOM id to pass to the callback.

3294 - */

3295 -function executeDispatch(event, listener, domID) {

3296 - event.currentTarget = injection.Mount.getNode(domID);

3297 - var returnValue = listener(event, domID);

3298 - event.currentTarget = null;

3299 - return returnValue;

3300 -}

3301 -

3302 -/**

3303 - * Standard/simple iteration through an event's collected dispatches.

3304 - */

3305 -function executeDispatchesInOrder(event, cb) {

3306 - forEachEventDispatch(event, cb);

2829 event._dispatchListeners = null;

2830 event._dispatchIDs = null;

2831 }

@@ -3312,13 +2834,13 @@ function executeDispatchesInOrder(event, cb) {

2834 * Standard/simple iteration through an event's collected dispatches, but stops

2835 * at the first dispatch execution returning true, and returns that id.

2836 *

3315 - * @return id of the first dispatch execution who's listener returns true, or

3316 - * null if no listener returned true.

2837 + * @return {?string} id of the first dispatch execution who's listener returns

2838 + * true, or null if no listener returned true.

2839 */

2840 function executeDispatchesInOrderStopAtTrueImpl(event) {

2841 var dispatchListeners = event._dispatchListeners;

2842 var dispatchIDs = event._dispatchIDs;

3321 - if ("production" !== "development") {

2843 + if ("development" !== 'production') {

2844 validateEventDispatches(event);

2845 }

2846 if (Array.isArray(dispatchListeners)) {

@@ -3356,21 +2878,16 @@ function executeDispatchesInOrderStopAtTrue(event) {

2878 * return values at each dispatch execution, but it does tend to make sense when

2879 * dealing with "direct" dispatches.

2880 *

3359 - * @return The return value of executing the single dispatch.

2881 + * @return {*} The return value of executing the single dispatch.

2882 */

2883 function executeDirectDispatch(event) {

3362 - if ("production" !== "development") {

2884 + if ("development" !== 'production') {

2885 validateEventDispatches(event);

2886 }

2887 var dispatchListener = event._dispatchListeners;

2888 var dispatchID = event._dispatchIDs;

3367 - ("production" !== "development" ? invariant(

3368 - !Array.isArray(dispatchListener),

3369 - 'executeDirectDispatch(...): Invalid `event`.'

3370 - ) : invariant(!Array.isArray(dispatchListener)));

3371 - var res = dispatchListener ?

3372 - dispatchListener(event, dispatchID) :

3373 - null;

2889 + !!Array.isArray(dispatchListener) ? "development" !== 'production' ? invariant(false, 'executeDirectDispatch(...): Invalid `event`.') : invariant(false) : undefined;

2890 + var res = dispatchListener ? dispatchListener(event, dispatchID) : null;

2891 event._dispatchListeners = null;

2892 event._dispatchIDs = null;

2893 return res;

@@ -3378,7 +2895,7 @@ function executeDirectDispatch(event) {

2895

2896 /**

2897 * @param {SyntheticEvent} event

3381 - * @return {bool} True iff number of dispatches accumulated is greater than 0.

2898 + * @return {boolean} True iff number of dispatches accumulated is greater than 0.

2899 */

2900 function hasDispatches(event) {

2901 return !!event._dispatchListeners;

@@ -3393,17 +2910,22 @@ var EventPluginUtils = {

2910 isStartish: isStartish,

2911

2912 executeDirectDispatch: executeDirectDispatch,

3396 - executeDispatch: executeDispatch,

2913 executeDispatchesInOrder: executeDispatchesInOrder,

2914 executeDispatchesInOrderStopAtTrue: executeDispatchesInOrderStopAtTrue,

2915 hasDispatches: hasDispatches,

3400 - injection: injection,

3401 - useTouchEvents: false

2916 +

2917 + getNode: function (id) {

2918 + return injection.Mount.getNode(id);

2919 + },

2920 + getID: function (node) {

2921 + return injection.Mount.getID(node);

2922 + },

2923 +

2924 + injection: injection

2925 };

2926

2927 module.exports = EventPluginUtils;

3405 -

3406 -},{"135":135,"15":15}],20:[function(_dereq_,module,exports){

2928 +},{"143":143,"15":15,"154":154,"56":56}],19:[function(_dereq_,module,exports){

2929 /**

@@ -3418,10 +2940,12 @@ module.exports = EventPluginUtils;

2940 'use strict';

2941

2942 var EventConstants = _dereq_(15);

3421 -var EventPluginHub = _dereq_(17);

2943 +var EventPluginHub = _dereq_(16);

2944 +

2945 +var warning = _dereq_(154);

2946

3423 -var accumulateInto = _dereq_(105);

3424 -var forEachAccumulated = _dereq_(120);

2947 +var accumulateInto = _dereq_(102);

2948 +var forEachAccumulated = _dereq_(109);

2949

2950 var PropagationPhases = EventConstants.PropagationPhases;

2951 var getListener = EventPluginHub.getListener;

@@ -3431,8 +2955,7 @@ var getListener = EventPluginHub.getListener;

2955 * "phases" of propagation. This finds listeners by a given phase.

2956 */

2957 function listenerAtPhase(id, event, propagationPhase) {

3434 - var registrationName =

3435 - event.dispatchConfig.phasedRegistrationNames[propagationPhase];

2958 + var registrationName = event.dispatchConfig.phasedRegistrationNames[propagationPhase];

2959 return getListener(id, registrationName);

2960 }

2961

@@ -3443,16 +2966,13 @@ function listenerAtPhase(id, event, propagationPhase) {

2966 * "dispatch" object that pairs the event with the listener.

2967 */

2968 function accumulateDirectionalDispatches(domID, upwards, event) {

3446 - if ("production" !== "development") {

3447 - if (!domID) {

3448 - throw new Error('Dispatching id must not be null');

3449 - }

2969 + if ("development" !== 'production') {

2970 + "development" !== 'production' ? warning(domID, 'Dispatching id must not be null') : undefined;

2971 }

2972 var phase = upwards ? PropagationPhases.bubbled : PropagationPhases.captured;

2973 var listener = listenerAtPhase(domID, event, phase);

2974 if (listener) {

3454 - event._dispatchListeners =

3455 - accumulateInto(event._dispatchListeners, listener);

2975 + event._dispatchListeners = accumulateInto(event._dispatchListeners, listener);

2976 event._dispatchIDs = accumulateInto(event._dispatchIDs, domID);

2977 }

2978 }

@@ -3460,20 +2980,24 @@ function accumulateDirectionalDispatches(domID, upwards, event) {

2980 /**

2981 * Collect dispatches (must be entirely collected before dispatching - see unit

2982 * tests). Lazily allocate the array to conserve memory. We must loop through

3463 - * each event and perform the traversal for each one. We can not perform a

2983 + * each event and perform the traversal for each one. We cannot perform a

2984 * single traversal for the entire collection of events because each event may

2985 * have a different target.

2986 */

2987 function accumulateTwoPhaseDispatchesSingle(event) {

2988 if (event && event.dispatchConfig.phasedRegistrationNames) {

3469 - EventPluginHub.injection.getInstanceHandle().traverseTwoPhase(

3470 - event.dispatchMarker,

3471 - accumulateDirectionalDispatches,

3472 - event

3473 - );

2989 + EventPluginHub.injection.getInstanceHandle().traverseTwoPhase(event.dispatchMarker, accumulateDirectionalDispatches, event);

2990 }

2991 }

2992

2993 +/**

2994 + * Same as `accumulateTwoPhaseDispatchesSingle`, but skips over the targetID.

2995 + */

2996 +function accumulateTwoPhaseDispatchesSingleSkipTarget(event) {

2997 + if (event && event.dispatchConfig.phasedRegistrationNames) {

2998 + EventPluginHub.injection.getInstanceHandle().traverseTwoPhaseSkipTarget(event.dispatchMarker, accumulateDirectionalDispatches, event);

2999 + }

3000 +}

3001

3002 /**

3003 * Accumulates without regard to direction, does not look for phased

@@ -3485,8 +3009,7 @@ function accumulateDispatches(id, ignoredDirection, event) {

3009 var registrationName = event.dispatchConfig.registrationName;

3010 var listener = getListener(id, registrationName);

3011 if (listener) {

3488 - event._dispatchListeners =

3489 - accumulateInto(event._dispatchListeners, listener);

3012 + event._dispatchListeners = accumulateInto(event._dispatchListeners, listener);

3013 event._dispatchIDs = accumulateInto(event._dispatchIDs, id);

3014 }

3015 }

@@ -3507,23 +3030,18 @@ function accumulateTwoPhaseDispatches(events) {

3030 forEachAccumulated(events, accumulateTwoPhaseDispatchesSingle);

3031 }

3032

3510 -function accumulateEnterLeaveDispatches(leave, enter, fromID, toID) {

3511 - EventPluginHub.injection.getInstanceHandle().traverseEnterLeave(

3512 - fromID,

3513 - toID,

3514 - accumulateDispatches,

3515 - leave,

3516 - enter

3517 - );

3033 +function accumulateTwoPhaseDispatchesSkipTarget(events) {

3034 + forEachAccumulated(events, accumulateTwoPhaseDispatchesSingleSkipTarget);

3035 }

3036

3037 +function accumulateEnterLeaveDispatches(leave, enter, fromID, toID) {

3038 + EventPluginHub.injection.getInstanceHandle().traverseEnterLeave(fromID, toID, accumulateDispatches, leave, enter);

3039 +}

3040

3041 function accumulateDirectDispatches(events) {

3042 forEachAccumulated(events, accumulateDirectDispatchesSingle);

3043 }

3044

3525 -

3526 -

3045 /**

3046 * A small set of propagation patterns, each of which will accept a small amount

3047 * of information, and generate a set of "dispatch ready event objects" - which

@@ -3537,57 +3055,13 @@ function accumulateDirectDispatches(events) {

3055 */

3056 var EventPropagators = {

3057 accumulateTwoPhaseDispatches: accumulateTwoPhaseDispatches,

3058 + accumulateTwoPhaseDispatchesSkipTarget: accumulateTwoPhaseDispatchesSkipTarget,

3059 accumulateDirectDispatches: accumulateDirectDispatches,

3060 accumulateEnterLeaveDispatches: accumulateEnterLeaveDispatches

3061 };

3062

3063 module.exports = EventPropagators;

3545 -

3546 -},{"105":105,"120":120,"15":15,"17":17}],21:[function(_dereq_,module,exports){

3547 -/**

3550 - *

3551 - * This source code is licensed under the BSD-style license found in the

3552 - * LICENSE file in the root directory of this source tree. An additional grant

3553 - * of patent rights can be found in the PATENTS file in the same directory.

3554 - *

3555 - * @providesModule ExecutionEnvironment

3556 - */

3557 -

3558 -/*jslint evil: true */

3559 -

3560 -"use strict";

3561 -

3562 -var canUseDOM = !!(

3563 - (typeof window !== 'undefined' &&

3564 - window.document && window.document.createElement)

3565 -);

3566 -

3567 -/**

3568 - * Simple, lightweight module assisting with the detection and context of

3569 - * Worker. Helps avoid circular dependencies and allows code to reason about

3570 - * whether or not they are in a Worker, even if they never include the main

3571 - * `ReactWorker` dependency.

3572 - */

3573 -var ExecutionEnvironment = {

3574 -

3575 - canUseDOM: canUseDOM,

3576 -

3577 - canUseWorkers: typeof Worker !== 'undefined',

3578 -

3579 - canUseEventListeners:

3580 - canUseDOM && !!(window.addEventListener || window.attachEvent),

3581 -

3582 - canUseViewport: canUseDOM && !!window.screen,

3583 -

3584 - isInWorker: !canUseDOM // For now, this is true - might change in the future.

3585 -

3586 -};

3587 -

3588 -module.exports = ExecutionEnvironment;

3589 -

3590 -},{}],22:[function(_dereq_,module,exports){

3064 +},{"102":102,"109":109,"15":15,"154":154,"16":16}],20:[function(_dereq_,module,exports){

3065 /**

@@ -3602,10 +3076,10 @@ module.exports = ExecutionEnvironment;

3076

3077 'use strict';

3078

3605 -var PooledClass = _dereq_(28);

3079 +var PooledClass = _dereq_(24);

3080

3607 -var assign = _dereq_(27);

3608 -var getTextContentAccessor = _dereq_(130);

3081 +var assign = _dereq_(23);

3082 +var getTextContentAccessor = _dereq_(116);

3083

3084 /**

3085 * This helper class stores information about text content of a target node,

@@ -3625,12 +3099,18 @@ function FallbackCompositionState(root) {

3099 }

3100

3101 assign(FallbackCompositionState.prototype, {

3102 + destructor: function () {

3103 + this._root = null;

3104 + this._startText = null;

3105 + this._fallbackText = null;

3106 + },

3107 +

3108 /**

3109 * Get current text of input.

3110 *

3111 * @return {string}

3112 */

3633 - getText: function() {

3113 + getText: function () {

3114 if ('value' in this._root) {

3115 return this._root.value;

3116 }

@@ -3643,7 +3123,7 @@ assign(FallbackCompositionState.prototype, {

3123 *

3124 * @return {string}

3125 */

3646 - getData: function() {

3126 + getData: function () {

3127 if (this._fallbackText) {

3128 return this._fallbackText;

3129 }

@@ -3677,8 +3157,7 @@ assign(FallbackCompositionState.prototype, {

3157 PooledClass.addPoolingTo(FallbackCompositionState);

3158

3159 module.exports = FallbackCompositionState;

3680 -

3681 -},{"130":130,"27":27,"28":28}],23:[function(_dereq_,module,exports){

3160 +},{"116":116,"23":23,"24":24}],21:[function(_dereq_,module,exports){

3161 /**

@@ -3690,41 +3169,27 @@ module.exports = FallbackCompositionState;

3169 * @providesModule HTMLDOMPropertyConfig

3170 */

3171

3693 -/*jslint bitwise: true*/

3694 -

3172 'use strict';

3173

3174 var DOMProperty = _dereq_(10);

3698 -var ExecutionEnvironment = _dereq_(21);

3175 +var ExecutionEnvironment = _dereq_(129);

3176

3177 var MUST_USE_ATTRIBUTE = DOMProperty.injection.MUST_USE_ATTRIBUTE;

3178 var MUST_USE_PROPERTY = DOMProperty.injection.MUST_USE_PROPERTY;

3179 var HAS_BOOLEAN_VALUE = DOMProperty.injection.HAS_BOOLEAN_VALUE;

3180 var HAS_SIDE_EFFECTS = DOMProperty.injection.HAS_SIDE_EFFECTS;

3181 var HAS_NUMERIC_VALUE = DOMProperty.injection.HAS_NUMERIC_VALUE;

3705 -var HAS_POSITIVE_NUMERIC_VALUE =

3706 - DOMProperty.injection.HAS_POSITIVE_NUMERIC_VALUE;

3707 -var HAS_OVERLOADED_BOOLEAN_VALUE =

3708 - DOMProperty.injection.HAS_OVERLOADED_BOOLEAN_VALUE;

3182 +var HAS_POSITIVE_NUMERIC_VALUE = DOMProperty.injection.HAS_POSITIVE_NUMERIC_VALUE;

3183 +var HAS_OVERLOADED_BOOLEAN_VALUE = DOMProperty.injection.HAS_OVERLOADED_BOOLEAN_VALUE;

3184

3185 var hasSVG;

3186 if (ExecutionEnvironment.canUseDOM) {

3187 var implementation = document.implementation;

3713 - hasSVG = (

3714 - implementation &&

3715 - implementation.hasFeature &&

3716 - implementation.hasFeature(

3717 - 'http://www.w3.org/TR/SVG11/feature#BasicStructure',

3718 - '1.1'

3719 - )

3720 - );

3188 + hasSVG = implementation && implementation.hasFeature && implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#BasicStructure', '1.1');

3189 }

3190

3723 -

3191 var HTMLDOMPropertyConfig = {

3725 - isCustomAttribute: RegExp.prototype.test.bind(

3726 - /^(data|aria)-[a-z_][a-z\d_.\-]*$/

3727 - ),

3192 + isCustomAttribute: RegExp.prototype.test.bind(/^(data|aria)-[a-z_][a-z\d_.\-]*$/),

3193 Properties: {

3194 /**

3195 * Standard Properties

@@ -3738,12 +3203,14 @@ var HTMLDOMPropertyConfig = {

3203 alt: null,

3204 async: HAS_BOOLEAN_VALUE,

3205 autoComplete: null,

3741 - // autoFocus is polyfilled/normalized by AutoFocusMixin

3206 + // autoFocus is polyfilled/normalized by AutoFocusUtils

3207 // autoFocus: HAS_BOOLEAN_VALUE,

3208 autoPlay: HAS_BOOLEAN_VALUE,

3209 + capture: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE,

3210 cellPadding: null,

3211 cellSpacing: null,

3212 charSet: MUST_USE_ATTRIBUTE,

3213 + challenge: MUST_USE_ATTRIBUTE,

3214 checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,

3215 classID: MUST_USE_ATTRIBUTE,

3216 // To set className on SVG elements, it's necessary to use .setAttribute;

@@ -3785,6 +3252,10 @@ var HTMLDOMPropertyConfig = {

3252 httpEquiv: null,

3253 icon: null,

3254 id: MUST_USE_PROPERTY,

3255 + inputMode: MUST_USE_ATTRIBUTE,

3256 + is: MUST_USE_ATTRIBUTE,

3257 + keyParams: MUST_USE_ATTRIBUTE,

3258 + keyType: MUST_USE_ATTRIBUTE,

3259 label: null,

3260 lang: null,

3261 list: MUST_USE_ATTRIBUTE,

@@ -3799,6 +3270,7 @@ var HTMLDOMPropertyConfig = {

3270 mediaGroup: null,

3271 method: null,

3272 min: null,

3273 + minLength: MUST_USE_ATTRIBUTE,

3274 multiple: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,

3275 muted: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,

3276 name: null,

@@ -3833,6 +3305,7 @@ var HTMLDOMPropertyConfig = {

3305 start: HAS_NUMERIC_VALUE,

3306 step: null,

3307 style: null,

3308 + summary: null,

3309 tabIndex: null,

3310 target: null,

3311 title: null,

@@ -3841,6 +3314,20 @@ var HTMLDOMPropertyConfig = {

3314 value: MUST_USE_PROPERTY | HAS_SIDE_EFFECTS,

3315 width: MUST_USE_ATTRIBUTE,

3316 wmode: MUST_USE_ATTRIBUTE,

3317 + wrap: null,

3318 +

3319 + /**

3320 + * RDFa Properties

3321 + */

3322 + about: MUST_USE_ATTRIBUTE,

3323 + datatype: MUST_USE_ATTRIBUTE,

3324 + inlist: MUST_USE_ATTRIBUTE,

3325 + prefix: MUST_USE_ATTRIBUTE,

3326 + // property is also supported for OpenGraph in meta tags.

3327 + property: MUST_USE_ATTRIBUTE,

3328 + resource: MUST_USE_ATTRIBUTE,

3329 + 'typeof': MUST_USE_ATTRIBUTE,

3330 + vocab: MUST_USE_ATTRIBUTE,

3331

3332 /**

3333 * Non-standard Properties

@@ -3849,6 +3336,8 @@ var HTMLDOMPropertyConfig = {

3336 // keyboard hints.

3337 autoCapitalize: null,

3338 autoCorrect: null,

3339 + // autoSave allows WebKit/Blink to persist values of input fields on page reloads

3340 + autoSave: null,

3341 // itemProp, itemScope, itemType are for

3342 // Microdata support. See http://schema.org/docs/gs.html

3343 itemProp: MUST_USE_ATTRIBUTE,

@@ -3859,8 +3348,12 @@ var HTMLDOMPropertyConfig = {

3348 // https://html.spec.whatwg.org/multipage/microdata.html#microdata-dom-api

3349 itemID: MUST_USE_ATTRIBUTE,

3350 itemRef: MUST_USE_ATTRIBUTE,

3862 - // property is supported for OpenGraph in meta tags.

3863 - property: null,

3351 + // results show looking glass icon and recent searches on input

3352 + // search fields in WebKit/Blink

3353 + results: null,

3354 + // IE-only attribute that specifies security restrictions on an iframe

3355 + // as an alternative to the sandbox attribute on IE<10

3356 + security: MUST_USE_ATTRIBUTE,

3357 // IE-only attribute that controls focus behavior

3358 unselectable: MUST_USE_ATTRIBUTE

3359 },

@@ -3876,6 +3369,7 @@ var HTMLDOMPropertyConfig = {

3369 autoCorrect: 'autocorrect',

3370 autoFocus: 'autofocus',

3371 autoPlay: 'autoplay',

3372 + autoSave: 'autosave',

3373 // `encoding` is equivalent to `enctype`, IE8 lacks an `enctype` setter.

3374 // http://www.w3.org/TR/html5/forms.html#dom-fs-encoding

3375 encType: 'encoding',

@@ -3888,8 +3382,7 @@ var HTMLDOMPropertyConfig = {

3382 };

3383

3384 module.exports = HTMLDOMPropertyConfig;

3891 -

3892 -},{"10":10,"21":21}],24:[function(_dereq_,module,exports){

3385 +},{"10":10,"129":129}],22:[function(_dereq_,module,exports){

3386 /**

@@ -3904,9 +3397,11 @@ module.exports = HTMLDOMPropertyConfig;

3397

3398 'use strict';

3399

3907 -var ReactPropTypes = _dereq_(78);

3400 +var ReactPropTypes = _dereq_(74);

3401 +var ReactPropTypeLocations = _dereq_(73);

3402

3909 -var invariant = _dereq_(135);

3403 +var invariant = _dereq_(143);

3404 +var warning = _dereq_(154);

3405

3406 var hasReadOnlyValue = {

3407 'button': true,

@@ -3918,46 +3413,44 @@ var hasReadOnlyValue = {

3413 'submit': true

3414 };

3415

3921 -function _assertSingleLink(input) {

3922 - ("production" !== "development" ? invariant(

3923 - input.props.checkedLink == null || input.props.valueLink == null,

3924 - 'Cannot provide a checkedLink and a valueLink. If you want to use ' +

3925 - 'checkedLink, you probably don\'t want to use valueLink and vice versa.'

3926 - ) : invariant(input.props.checkedLink == null || input.props.valueLink == null));

3416 +function _assertSingleLink(inputProps) {

3417 + !(inputProps.checkedLink == null || inputProps.valueLink == null) ? "development" !== 'production' ? invariant(false, 'Cannot provide a checkedLink and a valueLink. If you want to use ' + 'checkedLink, you probably don\'t want to use valueLink and vice versa.') : invariant(false) : undefined;

3418 }

3928 -function _assertValueLink(input) {

3929 - _assertSingleLink(input);

3930 - ("production" !== "development" ? invariant(

3931 - input.props.value == null && input.props.onChange == null,

3932 - 'Cannot provide a valueLink and a value or onChange event. If you want ' +

3933 - 'to use value or onChange, you probably don\'t want to use valueLink.'

3934 - ) : invariant(input.props.value == null && input.props.onChange == null));

3419 +function _assertValueLink(inputProps) {

3420 + _assertSingleLink(inputProps);

3421 + !(inputProps.value == null && inputProps.onChange == null) ? "development" !== 'production' ? invariant(false, 'Cannot provide a valueLink and a value or onChange event. If you want ' + 'to use value or onChange, you probably don\'t want to use valueLink.') : invariant(false) : undefined;

3422 }

3423

3937 -function _assertCheckedLink(input) {

3938 - _assertSingleLink(input);

3939 - ("production" !== "development" ? invariant(

3940 - input.props.checked == null && input.props.onChange == null,

3941 - 'Cannot provide a checkedLink and a checked property or onChange event. ' +

3942 - 'If you want to use checked or onChange, you probably don\'t want to ' +

3943 - 'use checkedLink'

3944 - ) : invariant(input.props.checked == null && input.props.onChange == null));

3424 +function _assertCheckedLink(inputProps) {

3425 + _assertSingleLink(inputProps);

3426 + !(inputProps.checked == null && inputProps.onChange == null) ? "development" !== 'production' ? invariant(false, 'Cannot provide a checkedLink and a checked property or onChange event. ' + 'If you want to use checked or onChange, you probably don\'t want to ' + 'use checkedLink') : invariant(false) : undefined;

3427 }

3428

3947 -/**

3948 - * @param {SyntheticEvent} e change event to handle

3949 - */

3950 -function _handleLinkedValueChange(e) {

3951 - /*jshint validthis:true */

3952 - this.props.valueLink.requestChange(e.target.value);

3953 -}

3429 +var propTypes = {

3430 + value: function (props, propName, componentName) {

3431 + if (!props[propName] || hasReadOnlyValue[props.type] || props.onChange || props.readOnly || props.disabled) {

3432 + return null;

3433 + }

3434 + return new Error('You provided a `value` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultValue`. Otherwise, ' + 'set either `onChange` or `readOnly`.');

3435 + },

3436 + checked: function (props, propName, componentName) {

3437 + if (!props[propName] || props.onChange || props.readOnly || props.disabled) {

3438 + return null;

3439 + }

3440 + return new Error('You provided a `checked` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultChecked`. Otherwise, ' + 'set either `onChange` or `readOnly`.');

3441 + },

3442 + onChange: ReactPropTypes.func

3443 +};

3444

3955 -/**

3956 - * @param {SyntheticEvent} e change event to handle

3957 - */

3958 -function _handleLinkedCheckChange(e) {

3959 - /*jshint validthis:true */

3960 - this.props.checkedLink.requestChange(e.target.checked);

3445 +var loggedTypeFailures = {};

3446 +function getDeclarationErrorAddendum(owner) {

3447 + if (owner) {

3448 + var name = owner.getName();

3449 + if (name) {

3450 + return ' Check the render method of `' + name + '`.';

3451 + }

3452 + }

3453 + return '';

3454 }

3455

3456 /**

@@ -3965,85 +3458,66 @@ function _handleLinkedCheckChange(e) {

3458 * this outside of the ReactDOM controlled form components.

3459 */

3460 var LinkedValueUtils = {

3968 - Mixin: {

3969 - propTypes: {

3970 - value: function(props, propName, componentName) {

3971 - if (!props[propName] ||

3972 - hasReadOnlyValue[props.type] ||

3973 - props.onChange ||

3974 - props.readOnly ||

3975 - props.disabled) {

3976 - return null;

3977 - }

3978 - return new Error(

3979 - 'You provided a `value` prop to a form field without an ' +

3980 - '`onChange` handler. This will render a read-only field. If ' +

3981 - 'the field should be mutable use `defaultValue`. Otherwise, ' +

3982 - 'set either `onChange` or `readOnly`.'

3983 - );

3984 - },

3985 - checked: function(props, propName, componentName) {

3986 - if (!props[propName] ||

3987 - props.onChange ||

3988 - props.readOnly ||

3989 - props.disabled) {

3990 - return null;

3991 - }

3992 - return new Error(

3993 - 'You provided a `checked` prop to a form field without an ' +

3994 - '`onChange` handler. This will render a read-only field. If ' +

3995 - 'the field should be mutable use `defaultChecked`. Otherwise, ' +

3996 - 'set either `onChange` or `readOnly`.'

3997 - );

3998 - },

3999 - onChange: ReactPropTypes.func

3461 + checkPropTypes: function (tagName, props, owner) {

3462 + for (var propName in propTypes) {

3463 + if (propTypes.hasOwnProperty(propName)) {

3464 + var error = propTypes[propName](props, propName, tagName, ReactPropTypeLocations.prop);

3465 + }

3466 + if (error instanceof Error && !(error.message in loggedTypeFailures)) {

3467 + // Only monitor this failure once because there tends to be a lot of the

3468 + // same error.

3469 + loggedTypeFailures[error.message] = true;

3470 +

3471 + var addendum = getDeclarationErrorAddendum(owner);

3472 + "development" !== 'production' ? warning(false, 'Failed form propType: %s%s', error.message, addendum) : undefined;

3473 + }

3474 }

3475 },

3476

3477 /**

4004 - * @param {ReactComponent} input Form component

3478 + * @param {object} inputProps Props for form component

3479 * @return {*} current value of the input either from value prop or link.

3480 */

4007 - getValue: function(input) {

4008 - if (input.props.valueLink) {

4009 - _assertValueLink(input);

4010 - return input.props.valueLink.value;

3481 + getValue: function (inputProps) {

3482 + if (inputProps.valueLink) {

3483 + _assertValueLink(inputProps);

3484 + return inputProps.valueLink.value;

3485 }

4012 - return input.props.value;

3486 + return inputProps.value;

3487 },

3488

3489 /**

4016 - * @param {ReactComponent} input Form component

3490 + * @param {object} inputProps Props for form component

3491 * @return {*} current checked status of the input either from checked prop

3492 * or link.

3493 */

4020 - getChecked: function(input) {

4021 - if (input.props.checkedLink) {

4022 - _assertCheckedLink(input);

4023 - return input.props.checkedLink.value;

3494 + getChecked: function (inputProps) {

3495 + if (inputProps.checkedLink) {

3496 + _assertCheckedLink(inputProps);

3497 + return inputProps.checkedLink.value;

3498 }

4025 - return input.props.checked;

3499 + return inputProps.checked;

3500 },

3501

3502 /**

4029 - * @param {ReactComponent} input Form component

4030 - * @return {function} change callback either from onChange prop or link.

3503 + * @param {object} inputProps Props for form component

3504 + * @param {SyntheticEvent} event change event to handle

3505 */

4032 - getOnChange: function(input) {

4033 - if (input.props.valueLink) {

4034 - _assertValueLink(input);

4035 - return _handleLinkedValueChange;

4036 - } else if (input.props.checkedLink) {

4037 - _assertCheckedLink(input);

4038 - return _handleLinkedCheckChange;

3506 + executeOnChange: function (inputProps, event) {

3507 + if (inputProps.valueLink) {

3508 + _assertValueLink(inputProps);

3509 + return inputProps.valueLink.requestChange(event.target.value);

3510 + } else if (inputProps.checkedLink) {

3511 + _assertCheckedLink(inputProps);

3512 + return inputProps.checkedLink.requestChange(event.target.checked);

3513 + } else if (inputProps.onChange) {

3514 + return inputProps.onChange.call(undefined, event);

3515 }

4040 - return input.props.onChange;

3516 }

3517 };

3518

3519 module.exports = LinkedValueUtils;

4045 -

4046 -},{"135":135,"78":78}],25:[function(_dereq_,module,exports){

3520 +},{"143":143,"154":154,"73":73,"74":74}],23:[function(_dereq_,module,exports){

3521 /**

@@ -4052,53 +3526,46 @@ module.exports = LinkedValueUtils;

3526 * LICENSE file in the root directory of this source tree. An additional grant

3527 * of patent rights can be found in the PATENTS file in the same directory.

3528 *

4055 - * @providesModule LocalEventTrapMixin

3529 + * @providesModule Object.assign

3530 */

3531

3532 +// https://people.mozilla.org/~jorendorff/es6-draft.html#sec-object.assign

3533 +

3534 'use strict';

3535

4060 -var ReactBrowserEventEmitter = _dereq_(30);

3536 +function assign(target, sources) {

3537 + if (target == null) {

3538 + throw new TypeError('Object.assign target cannot be null or undefined');

3539 + }

3540

4062 -var accumulateInto = _dereq_(105);

4063 -var forEachAccumulated = _dereq_(120);

4064 -var invariant = _dereq_(135);

3541 + var to = Object(target);

3542 + var hasOwnProperty = Object.prototype.hasOwnProperty;

3543

4066 -function remove(event) {

4067 - event.remove();

4068 -}

3544 + for (var nextIndex = 1; nextIndex < arguments.length; nextIndex++) {

3545 + var nextSource = arguments[nextIndex];

3546 + if (nextSource == null) {

3547 + continue;

3548 + }

3549

4070 -var LocalEventTrapMixin = {

4071 - trapBubbledEvent:function(topLevelType, handlerBaseName) {

4072 - ("production" !== "development" ? invariant(this.isMounted(), 'Must be mounted to trap events') : invariant(this.isMounted()));

4073 - // If a component renders to null or if another component fatals and causes

4074 - // the state of the tree to be corrupted, `node` here can be null.

4075 - var node = this.getDOMNode();

4076 - ("production" !== "development" ? invariant(

4077 - node,

4078 - 'LocalEventTrapMixin.trapBubbledEvent(...): Requires node to be rendered.'

4079 - ) : invariant(node));

4080 - var listener = ReactBrowserEventEmitter.trapBubbledEvent(

4081 - topLevelType,

4082 - handlerBaseName,

4083 - node

4084 - );

4085 - this._localEventListeners =

4086 - accumulateInto(this._localEventListeners, listener);

4087 - },

3550 + var from = Object(nextSource);

3551

4089 - // trapCapturedEvent would look nearly identical. We don't implement that

4090 - // method because it isn't currently needed.

3552 + // We don't currently support accessors nor proxies. Therefore this

3553 + // copy cannot throw. If we ever supported this then we must handle

3554 + // exceptions and side-effects. We don't support symbols so they won't

3555 + // be transferred.

3556

4092 - componentWillUnmount:function() {

4093 - if (this._localEventListeners) {

4094 - forEachAccumulated(this._localEventListeners, remove);

3557 + for (var key in from) {

3558 + if (hasOwnProperty.call(from, key)) {

3559 + to[key] = from[key];

3560 + }

3561 }

3562 }

4097 -};

3563

4099 -module.exports = LocalEventTrapMixin;

3564 + return to;

3565 +}

3566

4101 -},{"105":105,"120":120,"135":135,"30":30}],26:[function(_dereq_,module,exports){

3567 +module.exports = assign;

3568 +},{}],24:[function(_dereq_,module,exports){

3569 /**

@@ -4107,161 +3574,65 @@ module.exports = LocalEventTrapMixin;

3574 * LICENSE file in the root directory of this source tree. An additional grant

3575 * of patent rights can be found in the PATENTS file in the same directory.

3576 *

4110 - * @providesModule MobileSafariClickEventPlugin

4111 - * @typechecks static-only

3577 + * @providesModule PooledClass

3578 */

3579

3580 'use strict';

3581

4116 -var EventConstants = _dereq_(15);

4117 -

4118 -var emptyFunction = _dereq_(114);

4119 -

4120 -var topLevelTypes = EventConstants.topLevelTypes;

3582 +var invariant = _dereq_(143);

3583

3584 /**

4123 - * Mobile Safari does not fire properly bubble click events on non-interactive

4124 - * elements, which means delegated click listeners do not fire. The workaround

4125 - * for this bug involves attaching an empty click listener on the target node.

4126 - *

4127 - * This particular plugin works around the bug by attaching an empty click

4128 - * listener on `touchstart` (which does fire on every element).

3585 + * Static poolers. Several custom versions for each potential number of

3586 + * arguments. A completely generic pooler is easy to implement, but would

3587 + * require accessing the `arguments` object. In each of these, `this` refers to

3588 + * the Class itself, not an instance. If any others are needed, simply add them

3589 + * here, or in their own files.

3590 */

4130 -var MobileSafariClickEventPlugin = {

4131 -

4132 - eventTypes: null,

3591 +var oneArgumentPooler = function (copyFieldsFrom) {

3592 + var Klass = this;

3593 + if (Klass.instancePool.length) {

3594 + var instance = Klass.instancePool.pop();

3595 + Klass.call(instance, copyFieldsFrom);

3596 + return instance;

3597 + } else {

3598 + return new Klass(copyFieldsFrom);

3599 + }

3600 +};

3601

4134 - /**

4135 - * @param {string} topLevelType Record from `EventConstants`.

4136 - * @param {DOMEventTarget} topLevelTarget The listening component root node.

4137 - * @param {string} topLevelTargetID ID of `topLevelTarget`.

4138 - * @param {object} nativeEvent Native browser event.

4139 - * @return {*} An accumulation of synthetic events.

4140 - * @see {EventPluginHub.extractEvents}

4141 - */

4142 - extractEvents: function(

4143 - topLevelType,

4144 - topLevelTarget,

4145 - topLevelTargetID,

4146 - nativeEvent) {

4147 - if (topLevelType === topLevelTypes.topTouchStart) {

4148 - var target = nativeEvent.target;

4149 - if (target && !target.onclick) {

4150 - target.onclick = emptyFunction;

4151 - }

4152 - }

4153 - }

4154 -

4155 -};

4156 -

4157 -module.exports = MobileSafariClickEventPlugin;

4158 -

4159 -},{"114":114,"15":15}],27:[function(_dereq_,module,exports){

4160 -/**

4163 - *

4164 - * This source code is licensed under the BSD-style license found in the

4165 - * LICENSE file in the root directory of this source tree. An additional grant

4166 - * of patent rights can be found in the PATENTS file in the same directory.

4167 - *

4168 - * @providesModule Object.assign

4169 - */

4170 -

4171 -// https://people.mozilla.org/~jorendorff/es6-draft.html#sec-object.assign

4172 -

4173 -'use strict';

4174 -

4175 -function assign(target, sources) {

4176 - if (target == null) {

4177 - throw new TypeError('Object.assign target cannot be null or undefined');

4178 - }

4179 -

4180 - var to = Object(target);

4181 - var hasOwnProperty = Object.prototype.hasOwnProperty;

4182 -

4183 - for (var nextIndex = 1; nextIndex < arguments.length; nextIndex++) {

4184 - var nextSource = arguments[nextIndex];

4185 - if (nextSource == null) {

4186 - continue;

4187 - }

4188 -

4189 - var from = Object(nextSource);

4190 -

4191 - // We don't currently support accessors nor proxies. Therefore this

4192 - // copy cannot throw. If we ever supported this then we must handle

4193 - // exceptions and side-effects. We don't support symbols so they won't

4194 - // be transferred.

4195 -

4196 - for (var key in from) {

4197 - if (hasOwnProperty.call(from, key)) {

4198 - to[key] = from[key];

4199 - }

4200 - }

4201 - }

4202 -

4203 - return to;

4204 -}

4205 -

4206 -module.exports = assign;

4207 -

4208 -},{}],28:[function(_dereq_,module,exports){

4209 -/**

4212 - *

4213 - * This source code is licensed under the BSD-style license found in the

4214 - * LICENSE file in the root directory of this source tree. An additional grant

4215 - * of patent rights can be found in the PATENTS file in the same directory.

4216 - *

4217 - * @providesModule PooledClass

4218 - */

4219 -

4220 -'use strict';

4221 -

4222 -var invariant = _dereq_(135);

4223 -

4224 -/**

4225 - * Static poolers. Several custom versions for each potential number of

4226 - * arguments. A completely generic pooler is easy to implement, but would

4227 - * require accessing the `arguments` object. In each of these, `this` refers to

4228 - * the Class itself, not an instance. If any others are needed, simply add them

4229 - * here, or in their own files.

4230 - */

4231 -var oneArgumentPooler = function(copyFieldsFrom) {

3602 +var twoArgumentPooler = function (a1, a2) {

3603 var Klass = this;

3604 if (Klass.instancePool.length) {

3605 var instance = Klass.instancePool.pop();

4235 - Klass.call(instance, copyFieldsFrom);

3606 + Klass.call(instance, a1, a2);

3607 return instance;

3608 } else {

4238 - return new Klass(copyFieldsFrom);

3609 + return new Klass(a1, a2);

3610 }

3611 };

3612

4242 -var twoArgumentPooler = function(a1, a2) {

3613 +var threeArgumentPooler = function (a1, a2, a3) {

3614 var Klass = this;

3615 if (Klass.instancePool.length) {

3616 var instance = Klass.instancePool.pop();

4246 - Klass.call(instance, a1, a2);

3617 + Klass.call(instance, a1, a2, a3);

3618 return instance;

3619 } else {

4249 - return new Klass(a1, a2);

3620 + return new Klass(a1, a2, a3);

3621 }

3622 };

3623

4253 -var threeArgumentPooler = function(a1, a2, a3) {

3624 +var fourArgumentPooler = function (a1, a2, a3, a4) {

3625 var Klass = this;

3626 if (Klass.instancePool.length) {

3627 var instance = Klass.instancePool.pop();

4257 - Klass.call(instance, a1, a2, a3);

3628 + Klass.call(instance, a1, a2, a3, a4);

3629 return instance;

3630 } else {

4260 - return new Klass(a1, a2, a3);

3631 + return new Klass(a1, a2, a3, a4);

3632 }

3633 };

3634

4264 -var fiveArgumentPooler = function(a1, a2, a3, a4, a5) {

3635 +var fiveArgumentPooler = function (a1, a2, a3, a4, a5) {

3636 var Klass = this;

3637 if (Klass.instancePool.length) {

3638 var instance = Klass.instancePool.pop();

@@ -4272,15 +3643,10 @@ var fiveArgumentPooler = function(a1, a2, a3, a4, a5) {

3643 }

3644 };

3645

4275 -var standardReleaser = function(instance) {

3646 +var standardReleaser = function (instance) {

3647 var Klass = this;

4277 - ("production" !== "development" ? invariant(

4278 - instance instanceof Klass,

4279 - 'Trying to release an instance into a pool of a different type.'

4280 - ) : invariant(instance instanceof Klass));

4281 - if (instance.destructor) {

4282 - instance.destructor();

4283 - }

3648 + !(instance instanceof Klass) ? "development" !== 'production' ? invariant(false, 'Trying to release an instance into a pool of a different type.') : invariant(false) : undefined;

3649 + instance.destructor();

3650 if (Klass.instancePool.length < Klass.poolSize) {

3651 Klass.instancePool.push(instance);

3652 }

@@ -4298,7 +3664,7 @@ var DEFAULT_POOLER = oneArgumentPooler;

3664 * @param {Function} CopyConstructor Constructor that can be used to reset.

3665 * @param {Function} pooler Customizable pooler.

3666 */

4301 -var addPoolingTo = function(CopyConstructor, pooler) {

3667 +var addPoolingTo = function (CopyConstructor, pooler) {

3668 var NewKlass = CopyConstructor;

3669 NewKlass.instancePool = [];

3670 NewKlass.getPooled = pooler || DEFAULT_POOLER;

@@ -4314,12 +3680,12 @@ var PooledClass = {

3680 oneArgumentPooler: oneArgumentPooler,

3681 twoArgumentPooler: twoArgumentPooler,

3682 threeArgumentPooler: threeArgumentPooler,

3683 + fourArgumentPooler: fourArgumentPooler,

3684 fiveArgumentPooler: fiveArgumentPooler

3685 };

3686

3687 module.exports = PooledClass;

4321 -

4322 -},{"135":135}],29:[function(_dereq_,module,exports){

3688 +},{"143":143}],25:[function(_dereq_,module,exports){

3689 /**

@@ -4333,7 +3699,12 @@ module.exports = PooledClass;

3699

3700 'use strict';

3701

4336 -var findDOMNode = _dereq_(117);

3702 +var ReactInstanceMap = _dereq_(62);

3703 +

3704 +var findDOMNode = _dereq_(107);

3705 +var warning = _dereq_(154);

3706 +

3707 +var didWarnKey = '_getDOMNodeDidWarn';

3708

3709 var ReactBrowserComponentMixin = {

3710 /**

@@ -4343,14 +3714,15 @@ var ReactBrowserComponentMixin = {

3714 * @final

3715 * @protected

3716 */

4346 - getDOMNode: function() {

3717 + getDOMNode: function () {

3718 + "development" !== 'production' ? warning(this.constructor[didWarnKey], '%s.getDOMNode(...) is deprecated. Please use ' + 'ReactDOM.findDOMNode(instance) instead.', ReactInstanceMap.get(this).getName() || this.tagName || 'Unknown') : undefined;

3719 + this.constructor[didWarnKey] = true;

3720 return findDOMNode(this);

3721 }

3722 };

3723

3724 module.exports = ReactBrowserComponentMixin;

4352 -

4353 -},{"117":117}],30:[function(_dereq_,module,exports){

3725 +},{"107":107,"154":154,"62":62}],26:[function(_dereq_,module,exports){

3726 /**

@@ -4366,13 +3738,14 @@ module.exports = ReactBrowserComponentMixin;

3738 'use strict';

3739

3740 var EventConstants = _dereq_(15);

4369 -var EventPluginHub = _dereq_(17);

4370 -var EventPluginRegistry = _dereq_(18);

4371 -var ReactEventEmitterMixin = _dereq_(61);

4372 -var ViewportMetrics = _dereq_(104);

3741 +var EventPluginHub = _dereq_(16);

3742 +var EventPluginRegistry = _dereq_(17);

3743 +var ReactEventEmitterMixin = _dereq_(57);

3744 +var ReactPerf = _dereq_(71);

3745 +var ViewportMetrics = _dereq_(101);

3746

4374 -var assign = _dereq_(27);

4375 -var isEventSupported = _dereq_(136);

3747 +var assign = _dereq_(23);

3748 +var isEventSupported = _dereq_(118);

3749

3750 /**

3751 * Summary of `ReactBrowserEventEmitter` event handling:

@@ -4437,7 +3810,10 @@ var reactTopListenersCounter = 0;

3810 // lower node than `document`), binding at `document` would cause duplicate

3811 // events so we don't include them here

3812 var topEventMapping = {

3813 + topAbort: 'abort',

3814 topBlur: 'blur',

3815 + topCanPlay: 'canplay',

3816 + topCanPlayThrough: 'canplaythrough',

3817 topChange: 'change',

3818 topClick: 'click',

3819 topCompositionEnd: 'compositionend',

@@ -4455,24 +3831,44 @@ var topEventMapping = {

3831 topDragOver: 'dragover',

3832 topDragStart: 'dragstart',

3833 topDrop: 'drop',

3834 + topDurationChange: 'durationchange',

3835 + topEmptied: 'emptied',

3836 + topEncrypted: 'encrypted',

3837 + topEnded: 'ended',

3838 + topError: 'error',

3839 topFocus: 'focus',

3840 topInput: 'input',

3841 topKeyDown: 'keydown',

3842 topKeyPress: 'keypress',

3843 topKeyUp: 'keyup',

3844 + topLoadedData: 'loadeddata',

3845 + topLoadedMetadata: 'loadedmetadata',

3846 + topLoadStart: 'loadstart',

3847 topMouseDown: 'mousedown',

3848 topMouseMove: 'mousemove',

3849 topMouseOut: 'mouseout',

3850 topMouseOver: 'mouseover',

3851 topMouseUp: 'mouseup',

3852 topPaste: 'paste',

3853 + topPause: 'pause',

3854 + topPlay: 'play',

3855 + topPlaying: 'playing',

3856 + topProgress: 'progress',

3857 + topRateChange: 'ratechange',

3858 topScroll: 'scroll',

3859 + topSeeked: 'seeked',

3860 + topSeeking: 'seeking',

3861 topSelectionChange: 'selectionchange',

3862 + topStalled: 'stalled',

3863 + topSuspend: 'suspend',

3864 topTextInput: 'textInput',

3865 + topTimeUpdate: 'timeupdate',

3866 topTouchCancel: 'touchcancel',

3867 topTouchEnd: 'touchend',

3868 topTouchMove: 'touchmove',

3869 topTouchStart: 'touchstart',

3870 + topVolumeChange: 'volumechange',

3871 + topWaiting: 'waiting',

3872 topWheel: 'wheel'

3873 };

3874

@@ -4512,10 +3908,8 @@ var ReactBrowserEventEmitter = assign({}, ReactEventEmitterMixin, {

3908 /**

3909 * @param {object} ReactEventListener

3910 */

4515 - injectReactEventListener: function(ReactEventListener) {

4516 - ReactEventListener.setHandleTopLevel(

4517 - ReactBrowserEventEmitter.handleTopLevel

4518 - );

3911 + injectReactEventListener: function (ReactEventListener) {

3912 + ReactEventListener.setHandleTopLevel(ReactBrowserEventEmitter.handleTopLevel);

3913 ReactBrowserEventEmitter.ReactEventListener = ReactEventListener;

3914 }

3915 },

@@ -4525,7 +3919,7 @@ var ReactBrowserEventEmitter = assign({}, ReactEventEmitterMixin, {

3919 *

3920 * @param {boolean} enabled True if callbacks should be enabled.

3921 */

4528 - setEnabled: function(enabled) {

3922 + setEnabled: function (enabled) {

3923 if (ReactBrowserEventEmitter.ReactEventListener) {

3924 ReactBrowserEventEmitter.ReactEventListener.setEnabled(enabled);

3925 }

@@ -4534,10 +3928,8 @@ var ReactBrowserEventEmitter = assign({}, ReactEventEmitterMixin, {

3928 /**

3929 * @return {boolean} True if callbacks are enabled.

3930 */

4537 - isEnabled: function() {

4538 - return !!(

4539 - (ReactBrowserEventEmitter.ReactEventListener && ReactBrowserEventEmitter.ReactEventListener.isEnabled())

4540 - );

3931 + isEnabled: function () {

3932 + return !!(ReactBrowserEventEmitter.ReactEventListener && ReactBrowserEventEmitter.ReactEventListener.isEnabled());

3933 },

3934

3935 /**

@@ -4561,93 +3953,49 @@ var ReactBrowserEventEmitter = assign({}, ReactEventEmitterMixin, {

3953 * @param {string} registrationName Name of listener (e.g. `onClick`).

3954 * @param {object} contentDocumentHandle Document which owns the container

3955 */

4564 - listenTo: function(registrationName, contentDocumentHandle) {

3956 + listenTo: function (registrationName, contentDocumentHandle) {

3957 var mountAt = contentDocumentHandle;

3958 var isListening = getListeningForDocument(mountAt);

4567 - var dependencies = EventPluginRegistry.

4568 - registrationNameDependencies[registrationName];

3959 + var dependencies = EventPluginRegistry.registrationNameDependencies[registrationName];

3960

3961 var topLevelTypes = EventConstants.topLevelTypes;

4571 - for (var i = 0, l = dependencies.length; i < l; i++) {

3962 + for (var i = 0; i < dependencies.length; i++) {

3963 var dependency = dependencies[i];

4573 - if (!(

4574 - (isListening.hasOwnProperty(dependency) && isListening[dependency])

4575 - )) {

3964 + if (!(isListening.hasOwnProperty(dependency) && isListening[dependency])) {

3965 if (dependency === topLevelTypes.topWheel) {

3966 if (isEventSupported('wheel')) {

4578 - ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(

4579 - topLevelTypes.topWheel,

4580 - 'wheel',

4581 - mountAt

4582 - );

3967 + ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(topLevelTypes.topWheel, 'wheel', mountAt);

3968 } else if (isEventSupported('mousewheel')) {

4584 - ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(

4585 - topLevelTypes.topWheel,

4586 - 'mousewheel',

4587 - mountAt

4588 - );

3969 + ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(topLevelTypes.topWheel, 'mousewheel', mountAt);

3970 } else {

3971 // Firefox needs to capture a different mouse scroll event.

3972 // @see http://www.quirksmode.org/dom/events/tests/scroll.html

4592 - ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(

4593 - topLevelTypes.topWheel,

4594 - 'DOMMouseScroll',

4595 - mountAt

4596 - );

3973 + ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(topLevelTypes.topWheel, 'DOMMouseScroll', mountAt);

3974 }

3975 } else if (dependency === topLevelTypes.topScroll) {

3976

3977 if (isEventSupported('scroll', true)) {

4601 - ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(

4602 - topLevelTypes.topScroll,

4603 - 'scroll',

4604 - mountAt

4605 - );

3978 + ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(topLevelTypes.topScroll, 'scroll', mountAt);

3979 } else {

4607 - ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(

4608 - topLevelTypes.topScroll,

4609 - 'scroll',

4610 - ReactBrowserEventEmitter.ReactEventListener.WINDOW_HANDLE

4611 - );

3980 + ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(topLevelTypes.topScroll, 'scroll', ReactBrowserEventEmitter.ReactEventListener.WINDOW_HANDLE);

3981 }

4613 - } else if (dependency === topLevelTypes.topFocus ||

4614 - dependency === topLevelTypes.topBlur) {

3982 + } else if (dependency === topLevelTypes.topFocus || dependency === topLevelTypes.topBlur) {

3983

3984 if (isEventSupported('focus', true)) {

4617 - ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(

4618 - topLevelTypes.topFocus,

4619 - 'focus',

4620 - mountAt

4621 - );

4622 - ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(

4623 - topLevelTypes.topBlur,

4624 - 'blur',

4625 - mountAt

4626 - );

3985 + ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(topLevelTypes.topFocus, 'focus', mountAt);

3986 + ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(topLevelTypes.topBlur, 'blur', mountAt);

3987 } else if (isEventSupported('focusin')) {

3988 // IE has `focusin` and `focusout` events which bubble.

3989 // @see http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html

4630 - ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(

4631 - topLevelTypes.topFocus,

4632 - 'focusin',

4633 - mountAt

4634 - );

4635 - ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(

4636 - topLevelTypes.topBlur,

4637 - 'focusout',

4638 - mountAt

4639 - );

3990 + ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(topLevelTypes.topFocus, 'focusin', mountAt);

3991 + ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(topLevelTypes.topBlur, 'focusout', mountAt);

3992 }

3993

3994 // to make sure blur and focus event listeners are only attached once

3995 isListening[topLevelTypes.topBlur] = true;

3996 isListening[topLevelTypes.topFocus] = true;

3997 } else if (topEventMapping.hasOwnProperty(dependency)) {

4646 - ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(

4647 - dependency,

4648 - topEventMapping[dependency],

4649 - mountAt

4650 - );

3998 + ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(dependency, topEventMapping[dependency], mountAt);

3999 }

4000

4001 isListening[dependency] = true;

@@ -4655,20 +4003,12 @@ var ReactBrowserEventEmitter = assign({}, ReactEventEmitterMixin, {

4003 }

4004 },

4005

4658 - trapBubbledEvent: function(topLevelType, handlerBaseName, handle) {

4659 - return ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(

4660 - topLevelType,

4661 - handlerBaseName,

4662 - handle

4663 - );

4006 + trapBubbledEvent: function (topLevelType, handlerBaseName, handle) {

4007 + return ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(topLevelType, handlerBaseName, handle);

4008 },

4009

4666 - trapCapturedEvent: function(topLevelType, handlerBaseName, handle) {

4667 - return ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(

4668 - topLevelType,

4669 - handlerBaseName,

4670 - handle

4671 - );

4010 + trapCapturedEvent: function (topLevelType, handlerBaseName, handle) {

4011 + return ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(topLevelType, handlerBaseName, handle);

4012 },

4013

4014 /**

@@ -4679,7 +4019,7 @@ var ReactBrowserEventEmitter = assign({}, ReactEventEmitterMixin, {

4019 *

4020 * @see http://www.quirksmode.org/dom/events/scroll.html

4021 */

4682 - ensureScrollValueMonitoring: function() {

4022 + ensureScrollValueMonitoring: function () {

4023 if (!isMonitoringScrollValue) {

4024 var refresh = ViewportMetrics.refreshScrollValues;

4025 ReactBrowserEventEmitter.ReactEventListener.monitorScrollValue(refresh);

@@ -4701,9 +4041,13 @@ var ReactBrowserEventEmitter = assign({}, ReactEventEmitterMixin, {

4041

4042 });

4043

4704 -module.exports = ReactBrowserEventEmitter;

4044 +ReactPerf.measureMethods(ReactBrowserEventEmitter, 'ReactBrowserEventEmitter', {

4045 + putListener: 'putListener',

4046 + deleteListener: 'deleteListener'

4047 +});

4048

4706 -},{"104":104,"136":136,"15":15,"17":17,"18":18,"27":27,"61":61}],31:[function(_dereq_,module,exports){

4049 +module.exports = ReactBrowserEventEmitter;

4050 +},{"101":101,"118":118,"15":15,"16":16,"17":17,"23":23,"57":57,"71":71}],27:[function(_dereq_,module,exports){

4051 /**

@@ -4718,11 +4062,23 @@ module.exports = ReactBrowserEventEmitter;

4062

4063 'use strict';

4064

4721 -var ReactReconciler = _dereq_(81);

4065 +var ReactReconciler = _dereq_(76);

4066 +

4067 +var instantiateReactComponent = _dereq_(117);

4068 +var shouldUpdateReactComponent = _dereq_(125);

4069 +var traverseAllChildren = _dereq_(126);

4070 +var warning = _dereq_(154);

4071

4723 -var flattenChildren = _dereq_(118);

4724 -var instantiateReactComponent = _dereq_(134);

4725 -var shouldUpdateReactComponent = _dereq_(151);

4072 +function instantiateChild(childInstances, child, name) {

4073 + // We found a component instance.

4074 + var keyUnique = childInstances[name] === undefined;

4075 + if ("development" !== 'production') {

4076 + "development" !== 'production' ? warning(keyUnique, 'flattenChildren(...): Encountered two children with the same key, ' + '`%s`. Child keys must be unique; when two children share a key, only ' + 'the first child will be used.', name) : undefined;

4077 + }

4078 + if (child != null && keyUnique) {

4079 + childInstances[name] = instantiateReactComponent(child, null);

4080 + }

4081 +}

4082

4083 /**

4084 * ReactChildReconciler provides helpers for initializing or updating a set of

@@ -4730,7 +4086,6 @@ var shouldUpdateReactComponent = _dereq_(151);

4086 * does diffed reordering and insertion.

4087 */

4088 var ReactChildReconciler = {

4733 -

4089 /**

4090 * Generates a "mount image" for each of the supplied children. In the case

4091 * of `ReactDOMComponent`, a mount image is a string of markup.

@@ -4739,41 +4094,31 @@ var ReactChildReconciler = {

4094 * @return {?object} A set of child instances.

4095 * @internal

4096 */

4742 - instantiateChildren: function(nestedChildNodes, transaction, context) {

4743 - var children = flattenChildren(nestedChildNodes);

4744 - for (var name in children) {

4745 - if (children.hasOwnProperty(name)) {

4746 - var child = children[name];

4747 - // The rendered children must be turned into instances as they're

4748 - // mounted.

4749 - var childInstance = instantiateReactComponent(child, null);

4750 - children[name] = childInstance;

4751 - }

4097 + instantiateChildren: function (nestedChildNodes, transaction, context) {

4098 + if (nestedChildNodes == null) {

4099 + return null;

4100 }

4753 - return children;

4101 + var childInstances = {};

4102 + traverseAllChildren(nestedChildNodes, instantiateChild, childInstances);

4103 + return childInstances;

4104 },

4105

4106 /**

4107 * Updates the rendered children and returns a new set of children.

4108 *

4109 * @param {?object} prevChildren Previously initialized set of children.

4760 - * @param {?object} nextNestedChildNodes Nested child maps.

4110 + * @param {?object} nextChildren Flat child element maps.

4111 * @param {ReactReconcileTransaction} transaction

4112 * @param {object} context

4113 * @return {?object} A new set of child instances.

4114 * @internal

4115 */

4766 - updateChildren: function(

4767 - prevChildren,

4768 - nextNestedChildNodes,

4769 - transaction,

4770 - context) {

4116 + updateChildren: function (prevChildren, nextChildren, transaction, context) {

4117 // We currently don't have a way to track moves here but if we use iterators

4118 // instead of for..in we can zip the iterators and check if an item has

4119 // moved.

4120 // TODO: If nothing has changed, return the prevChildren object so that we

4121 // can quickly bailout if nothing has changed.

4776 - var nextChildren = flattenChildren(nextNestedChildNodes);

4122 if (!nextChildren && !prevChildren) {

4123 return null;

4124 }

@@ -4785,27 +4130,21 @@ var ReactChildReconciler = {

4130 var prevChild = prevChildren && prevChildren[name];

4131 var prevElement = prevChild && prevChild._currentElement;

4132 var nextElement = nextChildren[name];

4788 - if (shouldUpdateReactComponent(prevElement, nextElement)) {

4789 - ReactReconciler.receiveComponent(

4790 - prevChild, nextElement, transaction, context

4791 - );

4133 + if (prevChild != null && shouldUpdateReactComponent(prevElement, nextElement)) {

4134 + ReactReconciler.receiveComponent(prevChild, nextElement, transaction, context);

4135 nextChildren[name] = prevChild;

4136 } else {

4137 if (prevChild) {

4138 ReactReconciler.unmountComponent(prevChild, name);

4139 }

4140 // The child must be instantiated before it's mounted.

4798 - var nextChildInstance = instantiateReactComponent(

4799 - nextElement,

4800 - null

4801 - );

4141 + var nextChildInstance = instantiateReactComponent(nextElement, null);

4142 nextChildren[name] = nextChildInstance;

4143 }

4144 }

4145 // Unmount children that are no longer present.

4146 for (name in prevChildren) {

4807 - if (prevChildren.hasOwnProperty(name) &&

4808 - !(nextChildren && nextChildren.hasOwnProperty(name))) {

4147 + if (prevChildren.hasOwnProperty(name) && !(nextChildren && nextChildren.hasOwnProperty(name))) {

4148 ReactReconciler.unmountComponent(prevChildren[name]);

4149 }

4150 }

@@ -4819,18 +4158,19 @@ var ReactChildReconciler = {

4158 * @param {?object} renderedChildren Previously initialized set of children.

4159 * @internal

4160 */

4822 - unmountChildren: function(renderedChildren) {

4161 + unmountChildren: function (renderedChildren) {

4162 for (var name in renderedChildren) {

4824 - var renderedChild = renderedChildren[name];

4825 - ReactReconciler.unmountComponent(renderedChild);

4163 + if (renderedChildren.hasOwnProperty(name)) {

4164 + var renderedChild = renderedChildren[name];

4165 + ReactReconciler.unmountComponent(renderedChild);

4166 + }

4167 }

4168 }

4169

4170 };

4171

4172 module.exports = ReactChildReconciler;

4832 -

4833 -},{"118":118,"134":134,"151":151,"81":81}],32:[function(_dereq_,module,exports){

4173 +},{"117":117,"125":125,"126":126,"154":154,"76":76}],28:[function(_dereq_,module,exports){

4174 /**

@@ -4844,14 +4184,19 @@ module.exports = ReactChildReconciler;

4184

4185 'use strict';

4186

4847 -var PooledClass = _dereq_(28);

4848 -var ReactFragment = _dereq_(63);

4187 +var PooledClass = _dereq_(24);

4188 +var ReactElement = _dereq_(52);

4189

4850 -var traverseAllChildren = _dereq_(153);

4851 -var warning = _dereq_(154);

4190 +var emptyFunction = _dereq_(135);

4191 +var traverseAllChildren = _dereq_(126);

4192

4193 var twoArgumentPooler = PooledClass.twoArgumentPooler;

4854 -var threeArgumentPooler = PooledClass.threeArgumentPooler;

4194 +var fourArgumentPooler = PooledClass.fourArgumentPooler;

4195 +

4196 +var userProvidedKeyEscapeRegex = /\/(?!\/)/g;

4197 +function escapeUserProvidedKey(text) {

4198 + return ('' + text).replace(userProvidedKeyEscapeRegex, '//');

4199 +}

4200

4201 /**

4202 * PooledClass representing the bookkeeping associated with performing a child

@@ -4862,15 +4207,22 @@ var threeArgumentPooler = PooledClass.threeArgumentPooler;

4207 * @param {?*} forEachContext Context to perform context with.

4208 */

4209 function ForEachBookKeeping(forEachFunction, forEachContext) {

4865 - this.forEachFunction = forEachFunction;

4866 - this.forEachContext = forEachContext;

4867 -}

4210 + this.func = forEachFunction;

4211 + this.context = forEachContext;

4212 + this.count = 0;

4213 +}

4214 +ForEachBookKeeping.prototype.destructor = function () {

4215 + this.func = null;

4216 + this.context = null;

4217 + this.count = 0;

4218 +};

4219 PooledClass.addPoolingTo(ForEachBookKeeping, twoArgumentPooler);

4220

4870 -function forEachSingleChild(traverseContext, child, name, i) {

4871 - var forEachBookKeeping = traverseContext;

4872 - forEachBookKeeping.forEachFunction.call(

4873 - forEachBookKeeping.forEachContext, child, i);

4221 +function forEachSingleChild(bookKeeping, child, name) {

4222 + var func = bookKeeping.func;

4223 + var context = bookKeeping.context;

4224 +

4225 + func.call(context, child, bookKeeping.count++);

4226 }

4227

4228 /**

@@ -4880,16 +4232,14 @@ function forEachSingleChild(traverseContext, child, name, i) {

4232 * leaf child.

4233 *

4234 * @param {?*} children Children tree container.

4883 - * @param {function(*, int)} forEachFunc.

4235 + * @param {function(*, int)} forEachFunc

4236 * @param {*} forEachContext Context for forEachContext.

4237 */

4238 function forEachChildren(children, forEachFunc, forEachContext) {

4239 if (children == null) {

4240 return children;

4241 }

4890 -

4891 - var traverseContext =

4892 - ForEachBookKeeping.getPooled(forEachFunc, forEachContext);

4242 + var traverseContext = ForEachBookKeeping.getPooled(forEachFunc, forEachContext);

4243 traverseAllChildren(children, forEachSingleChild, traverseContext);

4244 ForEachBookKeeping.release(traverseContext);

4245 }

@@ -4903,33 +4253,50 @@ function forEachChildren(children, forEachFunc, forEachContext) {

4253 * @param {!function} mapFunction Function to perform mapping with.

4254 * @param {?*} mapContext Context to perform mapping with.

4255 */

4906 -function MapBookKeeping(mapResult, mapFunction, mapContext) {

4907 - this.mapResult = mapResult;

4908 - this.mapFunction = mapFunction;

4909 - this.mapContext = mapContext;

4910 -}

4911 -PooledClass.addPoolingTo(MapBookKeeping, threeArgumentPooler);

4256 +function MapBookKeeping(mapResult, keyPrefix, mapFunction, mapContext) {

4257 + this.result = mapResult;

4258 + this.keyPrefix = keyPrefix;

4259 + this.func = mapFunction;

4260 + this.context = mapContext;

4261 + this.count = 0;

4262 +}

4263 +MapBookKeeping.prototype.destructor = function () {

4264 + this.result = null;

4265 + this.keyPrefix = null;

4266 + this.func = null;

4267 + this.context = null;

4268 + this.count = 0;

4269 +};

4270 +PooledClass.addPoolingTo(MapBookKeeping, fourArgumentPooler);

4271

4913 -function mapSingleChildIntoContext(traverseContext, child, name, i) {

4914 - var mapBookKeeping = traverseContext;

4915 - var mapResult = mapBookKeeping.mapResult;

4272 +function mapSingleChildIntoContext(bookKeeping, child, childKey) {

4273 + var result = bookKeeping.result;

4274 + var keyPrefix = bookKeeping.keyPrefix;

4275 + var func = bookKeeping.func;

4276 + var context = bookKeeping.context;

4277

4917 - var keyUnique = !mapResult.hasOwnProperty(name);

4918 - if ("production" !== "development") {

4919 - ("production" !== "development" ? warning(

4920 - keyUnique,

4921 - 'ReactChildren.map(...): Encountered two children with the same key, ' +

4922 - '`%s`. Child keys must be unique; when two children share a key, only ' +

4923 - 'the first child will be used.',

4924 - name

4925 - ) : null);

4278 + var mappedChild = func.call(context, child, bookKeeping.count++);

4279 + if (Array.isArray(mappedChild)) {

4280 + mapIntoWithKeyPrefixInternal(mappedChild, result, childKey, emptyFunction.thatReturnsArgument);

4281 + } else if (mappedChild != null) {

4282 + if (ReactElement.isValidElement(mappedChild)) {

4283 + mappedChild = ReactElement.cloneAndReplaceKey(mappedChild,

4284 + // Keep both the (mapped) and old keys if they differ, just as

4285 + // traverseAllChildren used to do for objects as children

4286 + keyPrefix + (mappedChild !== child ? escapeUserProvidedKey(mappedChild.key || '') + '/' : '') + childKey);

4287 + }

4288 + result.push(mappedChild);

4289 }

4290 +}

4291

4928 - if (keyUnique) {

4929 - var mappedChild =

4930 - mapBookKeeping.mapFunction.call(mapBookKeeping.mapContext, child, i);

4931 - mapResult[name] = mappedChild;

4292 +function mapIntoWithKeyPrefixInternal(children, array, prefix, func, context) {

4293 + var escapedPrefix = '';

4294 + if (prefix != null) {

4295 + escapedPrefix = escapeUserProvidedKey(prefix) + '/';

4296 }

4297 + var traverseContext = MapBookKeeping.getPooled(array, escapedPrefix, func, context);

4298 + traverseAllChildren(children, mapSingleChildIntoContext, traverseContext);

4299 + MapBookKeeping.release(traverseContext);

4300 }

4301

4302 /**

@@ -4938,27 +4305,21 @@ function mapSingleChildIntoContext(traverseContext, child, name, i) {

4305 * The provided mapFunction(child, key, index) will be called for each

4306 * leaf child.

4307 *

4941 - * TODO: This may likely break any calls to `ReactChildren.map` that were

4942 - * previously relying on the fact that we guarded against null children.

4943 - *

4308 * @param {?*} children Children tree container.

4945 - * @param {function(*, int)} mapFunction.

4946 - * @param {*} mapContext Context for mapFunction.

4309 + * @param {function(*, int)} func The map function.

4310 + * @param {*} context Context for mapFunction.

4311 * @return {object} Object containing the ordered map of results.

4312 */

4313 function mapChildren(children, func, context) {

4314 if (children == null) {

4315 return children;

4316 }

4953 -

4954 - var mapResult = {};

4955 - var traverseContext = MapBookKeeping.getPooled(mapResult, func, context);

4956 - traverseAllChildren(children, mapSingleChildIntoContext, traverseContext);

4957 - MapBookKeeping.release(traverseContext);

4958 - return ReactFragment.create(mapResult);

4317 + var result = [];

4318 + mapIntoWithKeyPrefixInternal(children, result, null, func, context);

4319 + return result;

4320 }

4321

4961 -function forEachSingleChildDummy(traverseContext, child, name, i) {

4322 +function forEachSingleChildDummy(traverseContext, child, name) {

4323 return null;

4324 }

4325

@@ -4973,15 +4334,26 @@ function countChildren(children, context) {

4334 return traverseAllChildren(children, forEachSingleChildDummy, null);

4335 }

4336

4337 +/**

4338 + * Flatten a children object (typically specified as `props.children`) and

4339 + * return an array with appropriately re-keyed children.

4340 + */

4341 +function toArray(children) {

4342 + var result = [];

4343 + mapIntoWithKeyPrefixInternal(children, result, null, emptyFunction.thatReturnsArgument);

4344 + return result;

4345 +}

4346 +

4347 var ReactChildren = {

4348 forEach: forEachChildren,

4349 map: mapChildren,

4979 - count: countChildren

4350 + mapIntoWithKeyPrefixInternal: mapIntoWithKeyPrefixInternal,

4351 + count: countChildren,

4352 + toArray: toArray

4353 };

4354

4355 module.exports = ReactChildren;

4983 -

4984 -},{"153":153,"154":154,"28":28,"63":63}],33:[function(_dereq_,module,exports){

4356 +},{"126":126,"135":135,"24":24,"52":52}],29:[function(_dereq_,module,exports){

4357 /**

@@ -4995,23 +4367,20 @@ module.exports = ReactChildren;

4367

4368 'use strict';

4369

4998 -var ReactComponent = _dereq_(34);

4999 -var ReactCurrentOwner = _dereq_(39);

5000 -var ReactElement = _dereq_(57);

5001 -var ReactErrorUtils = _dereq_(60);

5002 -var ReactInstanceMap = _dereq_(67);

5003 -var ReactLifeCycle = _dereq_(68);

5004 -var ReactPropTypeLocations = _dereq_(77);

5005 -var ReactPropTypeLocationNames = _dereq_(76);

5006 -var ReactUpdateQueue = _dereq_(86);

5007 -

5008 -var assign = _dereq_(27);

5009 -var invariant = _dereq_(135);

5010 -var keyMirror = _dereq_(140);

5011 -var keyOf = _dereq_(141);

4370 +var ReactComponent = _dereq_(30);

4371 +var ReactElement = _dereq_(52);

4372 +var ReactPropTypeLocations = _dereq_(73);

4373 +var ReactPropTypeLocationNames = _dereq_(72);

4374 +var ReactNoopUpdateQueue = _dereq_(69);

4375 +

4376 +var assign = _dereq_(23);

4377 +var emptyObject = _dereq_(136);

4378 +var invariant = _dereq_(143);

4379 +var keyMirror = _dereq_(146);

4380 +var keyOf = _dereq_(147);

4381 var warning = _dereq_(154);

4382

5014 -var MIXINS_KEY = keyOf({mixins: null});

4383 +var MIXINS_KEY = keyOf({ mixins: null });

4384

4385 /**

4386 * Policies that describe methods in `ReactClassInterface`.

@@ -5038,9 +4407,16 @@ var SpecPolicy = keyMirror({

4407 DEFINE_MANY_MERGED: null

4408 });

4409

5041 -

4410 var injectedMixins = [];

4411

4412 +var warnedSetProps = false;

4413 +function warnSetProps() {

4414 + if (!warnedSetProps) {

4415 + warnedSetProps = true;

4416 + "development" !== 'production' ? warning(false, 'setProps(...) and replaceProps(...) are deprecated. ' + 'Instead, call render again at the top level.') : undefined;

4417 + }

4418 +}

4419 +

4420 /**

4421 * Composite components are higher-level components that compose other composite

4422 * or native components.

@@ -5058,7 +4434,7 @@ var injectedMixins = [];

4434 * The class specification supports a specific protocol of methods that have

4435 * special meaning (e.g. `render`). See `ReactClassInterface` for

4436 * more the comprehensive protocol. Any other properties and methods in the

5061 - * class specification will available on the prototype.

4437 + * class specification will be available on the prototype.

4438 *

4439 * @interface ReactClassInterface

4440 * @internal

@@ -5160,8 +4536,6 @@ var ReactClassInterface = {

4536 */

4537 render: SpecPolicy.DEFINE_ONCE,

4538

5163 -

5164 -

4539 // ==== Delegate methods ====

4540

4541 /**

@@ -5272,8 +4646,6 @@ var ReactClassInterface = {

4646 */

4647 componentWillUnmount: SpecPolicy.DEFINE_MANY,

4648

5275 -

5276 -

4649 // ==== Advanced methods ====

4650

4651 /**

@@ -5300,121 +4672,72 @@ var ReactClassInterface = {

4672 * which all other static methods are defined.

4673 */

4674 var RESERVED_SPEC_KEYS = {

5303 - displayName: function(Constructor, displayName) {

4675 + displayName: function (Constructor, displayName) {

4676 Constructor.displayName = displayName;

4677 },

5306 - mixins: function(Constructor, mixins) {

4678 + mixins: function (Constructor, mixins) {

4679 if (mixins) {

4680 for (var i = 0; i < mixins.length; i++) {

4681 mixSpecIntoComponent(Constructor, mixins[i]);

4682 }

4683 }

4684 },

5313 - childContextTypes: function(Constructor, childContextTypes) {

5314 - if ("production" !== "development") {

5315 - validateTypeDef(

5316 - Constructor,

5317 - childContextTypes,

5318 - ReactPropTypeLocations.childContext

5319 - );

4685 + childContextTypes: function (Constructor, childContextTypes) {

4686 + if ("development" !== 'production') {

4687 + validateTypeDef(Constructor, childContextTypes, ReactPropTypeLocations.childContext);

4688 }

5321 - Constructor.childContextTypes = assign(

5322 - {},

5323 - Constructor.childContextTypes,

5324 - childContextTypes

5325 - );

5326 - },

5327 - contextTypes: function(Constructor, contextTypes) {

5328 - if ("production" !== "development") {

5329 - validateTypeDef(

5330 - Constructor,

5331 - contextTypes,

5332 - ReactPropTypeLocations.context

5333 - );

4689 + Constructor.childContextTypes = assign({}, Constructor.childContextTypes, childContextTypes);

4690 + },

4691 + contextTypes: function (Constructor, contextTypes) {

4692 + if ("development" !== 'production') {

4693 + validateTypeDef(Constructor, contextTypes, ReactPropTypeLocations.context);

4694 }

5335 - Constructor.contextTypes = assign(

5336 - {},

5337 - Constructor.contextTypes,

5338 - contextTypes

5339 - );

4695 + Constructor.contextTypes = assign({}, Constructor.contextTypes, contextTypes);

4696 },

4697 /**

4698 * Special case getDefaultProps which should move into statics but requires

4699 * automatic merging.

4700 */

5345 - getDefaultProps: function(Constructor, getDefaultProps) {

4701 + getDefaultProps: function (Constructor, getDefaultProps) {

4702 if (Constructor.getDefaultProps) {

5347 - Constructor.getDefaultProps = createMergedResultFunction(

5348 - Constructor.getDefaultProps,

5349 - getDefaultProps

5350 - );

4703 + Constructor.getDefaultProps = createMergedResultFunction(Constructor.getDefaultProps, getDefaultProps);

4704 } else {

4705 Constructor.getDefaultProps = getDefaultProps;

4706 }

4707 },

5355 - propTypes: function(Constructor, propTypes) {

5356 - if ("production" !== "development") {

5357 - validateTypeDef(

5358 - Constructor,

5359 - propTypes,

5360 - ReactPropTypeLocations.prop

5361 - );

4708 + propTypes: function (Constructor, propTypes) {

4709 + if ("development" !== 'production') {

4710 + validateTypeDef(Constructor, propTypes, ReactPropTypeLocations.prop);

4711 }

5363 - Constructor.propTypes = assign(

5364 - {},

5365 - Constructor.propTypes,

5366 - propTypes

5367 - );

4712 + Constructor.propTypes = assign({}, Constructor.propTypes, propTypes);

4713 },

5369 - statics: function(Constructor, statics) {

4714 + statics: function (Constructor, statics) {

4715 mixStaticSpecIntoComponent(Constructor, statics);

5371 - }

5372 -};

4716 + },

4717 + autobind: function () {} };

4718

4719 +// noop

4720 function validateTypeDef(Constructor, typeDef, location) {

4721 for (var propName in typeDef) {

4722 if (typeDef.hasOwnProperty(propName)) {

4723 // use a warning instead of an invariant so components

4724 // don't show up in prod but not in __DEV__

5379 - ("production" !== "development" ? warning(

5380 - typeof typeDef[propName] === 'function',

5381 - '%s: %s type `%s` is invalid; it must be a function, usually from ' +

5382 - 'React.PropTypes.',

5383 - Constructor.displayName || 'ReactClass',

5384 - ReactPropTypeLocationNames[location],

5385 - propName

5386 - ) : null);

4725 + "development" !== 'production' ? warning(typeof typeDef[propName] === 'function', '%s: %s type `%s` is invalid; it must be a function, usually from ' + 'React.PropTypes.', Constructor.displayName || 'ReactClass', ReactPropTypeLocationNames[location], propName) : undefined;

4726 }

4727 }

4728 }

4729

4730 function validateMethodOverride(proto, name) {

5392 - var specPolicy = ReactClassInterface.hasOwnProperty(name) ?

5393 - ReactClassInterface[name] :

5394 - null;

4731 + var specPolicy = ReactClassInterface.hasOwnProperty(name) ? ReactClassInterface[name] : null;

4732

4733 // Disallow overriding of base class methods unless explicitly allowed.

4734 if (ReactClassMixin.hasOwnProperty(name)) {

5398 - ("production" !== "development" ? invariant(

5399 - specPolicy === SpecPolicy.OVERRIDE_BASE,

5400 - 'ReactClassInterface: You are attempting to override ' +

5401 - '`%s` from your class specification. Ensure that your method names ' +

5402 - 'do not overlap with React methods.',

5403 - name

5404 - ) : invariant(specPolicy === SpecPolicy.OVERRIDE_BASE));

4735 + !(specPolicy === SpecPolicy.OVERRIDE_BASE) ? "development" !== 'production' ? invariant(false, 'ReactClassInterface: You are attempting to override ' + '`%s` from your class specification. Ensure that your method names ' + 'do not overlap with React methods.', name) : invariant(false) : undefined;

4736 }

4737

4738 // Disallow defining methods more than once unless explicitly allowed.

4739 if (proto.hasOwnProperty(name)) {

5409 - ("production" !== "development" ? invariant(

5410 - specPolicy === SpecPolicy.DEFINE_MANY ||

5411 - specPolicy === SpecPolicy.DEFINE_MANY_MERGED,

5412 - 'ReactClassInterface: You are attempting to define ' +

5413 - '`%s` on your component more than once. This conflict may be due ' +

5414 - 'to a mixin.',

5415 - name

5416 - ) : invariant(specPolicy === SpecPolicy.DEFINE_MANY ||

5417 - specPolicy === SpecPolicy.DEFINE_MANY_MERGED));

4740 + !(specPolicy === SpecPolicy.DEFINE_MANY || specPolicy === SpecPolicy.DEFINE_MANY_MERGED) ? "development" !== 'production' ? invariant(false, 'ReactClassInterface: You are attempting to define ' + '`%s` on your component more than once. This conflict may be due ' + 'to a mixin.', name) : invariant(false) : undefined;

4741 }

4742 }

4743

@@ -5427,16 +4750,8 @@ function mixSpecIntoComponent(Constructor, spec) {

4750 return;

4751 }

4752

5430 - ("production" !== "development" ? invariant(

5431 - typeof spec !== 'function',

5432 - 'ReactClass: You\'re attempting to ' +

5433 - 'use a component class as a mixin. Instead, just use a regular object.'

5434 - ) : invariant(typeof spec !== 'function'));

5435 - ("production" !== "development" ? invariant(

5436 - !ReactElement.isValidElement(spec),

5437 - 'ReactClass: You\'re attempting to ' +

5438 - 'use a component as a mixin. Instead, just use a regular object.'

5439 - ) : invariant(!ReactElement.isValidElement(spec)));

4753 + !(typeof spec !== 'function') ? "development" !== 'production' ? invariant(false, 'ReactClass: You\'re attempting to ' + 'use a component class as a mixin. Instead, just use a regular object.') : invariant(false) : undefined;

4754 + !!ReactElement.isValidElement(spec) ? "development" !== 'production' ? invariant(false, 'ReactClass: You\'re attempting to ' + 'use a component as a mixin. Instead, just use a regular object.') : invariant(false) : undefined;

4755

4756 var proto = Constructor.prototype;

4757

@@ -5453,7 +4768,7 @@ function mixSpecIntoComponent(Constructor, spec) {

4768 }

4769

4770 if (name === MIXINS_KEY) {

5456 - // We have already handled mixins in a special case above

4771 + // We have already handled mixins in a special case above.

4772 continue;

4773 }

4774

@@ -5467,16 +4782,10 @@ function mixSpecIntoComponent(Constructor, spec) {

4782 // The following member methods should not be automatically bound:

4783 // 1. Expected ReactClass methods (in the "interface").

4784 // 2. Overridden methods (that were mixed in).

5470 - var isReactClassMethod =

5471 - ReactClassInterface.hasOwnProperty(name);

4785 + var isReactClassMethod = ReactClassInterface.hasOwnProperty(name);

4786 var isAlreadyDefined = proto.hasOwnProperty(name);

5473 - var markedDontBind = property && property.__reactDontBind;

4787 var isFunction = typeof property === 'function';

5475 - var shouldAutoBind =

5476 - isFunction &&

5477 - !isReactClassMethod &&

5478 - !isAlreadyDefined &&

5479 - !markedDontBind;

4788 + var shouldAutoBind = isFunction && !isReactClassMethod && !isAlreadyDefined && spec.autobind !== false;

4789

4790 if (shouldAutoBind) {

4791 if (!proto.__reactAutoBindMap) {

@@ -5488,18 +4797,8 @@ function mixSpecIntoComponent(Constructor, spec) {

4797 if (isAlreadyDefined) {

4798 var specPolicy = ReactClassInterface[name];

4799

5491 - // These cases should already be caught by validateMethodOverride

5492 - ("production" !== "development" ? invariant(

5493 - isReactClassMethod && (

5494 - (specPolicy === SpecPolicy.DEFINE_MANY_MERGED || specPolicy === SpecPolicy.DEFINE_MANY)

5495 - ),

5496 - 'ReactClass: Unexpected spec policy %s for key %s ' +

5497 - 'when mixing in component specs.',

5498 - specPolicy,

5499 - name

5500 - ) : invariant(isReactClassMethod && (

5501 - (specPolicy === SpecPolicy.DEFINE_MANY_MERGED || specPolicy === SpecPolicy.DEFINE_MANY)

5502 - )));

4800 + // These cases should already be caught by validateMethodOverride.

4801 + !(isReactClassMethod && (specPolicy === SpecPolicy.DEFINE_MANY_MERGED || specPolicy === SpecPolicy.DEFINE_MANY)) ? "development" !== 'production' ? invariant(false, 'ReactClass: Unexpected spec policy %s for key %s ' + 'when mixing in component specs.', specPolicy, name) : invariant(false) : undefined;

4802

4803 // For methods which are defined more than once, call the existing

4804 // methods before calling the new property, merging if appropriate.

@@ -5510,7 +4809,7 @@ function mixSpecIntoComponent(Constructor, spec) {

4809 }

4810 } else {

4811 proto[name] = property;

5513 - if ("production" !== "development") {

4812 + if ("development" !== 'production') {

4813 // Add verbose displayName to the function, which helps when looking

4814 // at profiling tools.

4815 if (typeof property === 'function' && spec.displayName) {

@@ -5533,24 +4832,11 @@ function mixStaticSpecIntoComponent(Constructor, statics) {

4832 continue;

4833 }

4834

5536 - var isReserved = name in RESERVED_SPEC_KEYS;

5537 - ("production" !== "development" ? invariant(

5538 - !isReserved,

5539 - 'ReactClass: You are attempting to define a reserved ' +

5540 - 'property, `%s`, that shouldn\'t be on the "statics" key. Define it ' +

5541 - 'as an instance property instead; it will still be accessible on the ' +

5542 - 'constructor.',

5543 - name

5544 - ) : invariant(!isReserved));

5545 -

5546 - var isInherited = name in Constructor;

5547 - ("production" !== "development" ? invariant(

5548 - !isInherited,

5549 - 'ReactClass: You are attempting to define ' +

5550 - '`%s` on your component more than once. This conflict may be ' +

5551 - 'due to a mixin.',

5552 - name

5553 - ) : invariant(!isInherited));

4835 + var isReserved = (name in RESERVED_SPEC_KEYS);

4836 + !!isReserved ? "development" !== 'production' ? invariant(false, 'ReactClass: You are attempting to define a reserved ' + 'property, `%s`, that shouldn\'t be on the "statics" key. Define it ' + 'as an instance property instead; it will still be accessible on the ' + 'constructor.', name) : invariant(false) : undefined;

4837 +

4838 + var isInherited = (name in Constructor);

4839 + !!isInherited ? "development" !== 'production' ? invariant(false, 'ReactClass: You are attempting to define ' + '`%s` on your component more than once. This conflict may be ' + 'due to a mixin.', name) : invariant(false) : undefined;

4840 Constructor[name] = property;

4841 }

4842 }

@@ -5563,22 +4849,11 @@ function mixStaticSpecIntoComponent(Constructor, statics) {

4849 * @return {object} one after it has been mutated to contain everything in two.

4850 */

4851 function mergeIntoWithNoDuplicateKeys(one, two) {

5566 - ("production" !== "development" ? invariant(

5567 - one && two && typeof one === 'object' && typeof two === 'object',

5568 - 'mergeIntoWithNoDuplicateKeys(): Cannot merge non-objects.'

5569 - ) : invariant(one && two && typeof one === 'object' && typeof two === 'object'));

4852 + !(one && two && typeof one === 'object' && typeof two === 'object') ? "development" !== 'production' ? invariant(false, 'mergeIntoWithNoDuplicateKeys(): Cannot merge non-objects.') : invariant(false) : undefined;

4853

4854 for (var key in two) {

4855 if (two.hasOwnProperty(key)) {

5573 - ("production" !== "development" ? invariant(

5574 - one[key] === undefined,

5575 - 'mergeIntoWithNoDuplicateKeys(): ' +

5576 - 'Tried to merge two objects with the same key: `%s`. This conflict ' +

5577 - 'may be due to a mixin; in particular, this may be caused by two ' +

5578 - 'getInitialState() or getDefaultProps() methods returning objects ' +

5579 - 'with clashing keys.',

5580 - key

5581 - ) : invariant(one[key] === undefined));

4856 + !(one[key] === undefined) ? "development" !== 'production' ? invariant(false, 'mergeIntoWithNoDuplicateKeys(): ' + 'Tried to merge two objects with the same key: `%s`. This conflict ' + 'may be due to a mixin; in particular, this may be caused by two ' + 'getInitialState() or getDefaultProps() methods returning objects ' + 'with clashing keys.', key) : invariant(false) : undefined;

4857 one[key] = two[key];

4858 }

4859 }

@@ -5633,32 +4908,25 @@ function createChainedFunction(one, two) {

4908 */

4909 function bindAutoBindMethod(component, method) {

4910 var boundMethod = method.bind(component);

5636 - if ("production" !== "development") {

4911 + if ("development" !== 'production') {

4912 boundMethod.__reactBoundContext = component;

4913 boundMethod.__reactBoundMethod = method;

4914 boundMethod.__reactBoundArguments = null;

4915 var componentName = component.constructor.displayName;

4916 var _bind = boundMethod.bind;

4917 /* eslint-disable block-scoped-var, no-undef */

5643 - boundMethod.bind = function(newThis ) {for (var args=[],$__0=1,$__1=arguments.length;$__0<$__1;$__0++) args.push(arguments[$__0]);

4918 + boundMethod.bind = function (newThis) {

4919 + for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {

4920 + args[_key - 1] = arguments[_key];

4921 + }

4922 +

4923 // User is trying to bind() an autobound method; we effectively will

4924 // ignore the value of "this" that the user is trying to use, so

4925 // let's warn.

4926 if (newThis !== component && newThis !== null) {

5648 - ("production" !== "development" ? warning(

5649 - false,

5650 - 'bind(): React component methods may only be bound to the ' +

5651 - 'component instance. See %s',

5652 - componentName

5653 - ) : null);

4927 + "development" !== 'production' ? warning(false, 'bind(): React component methods may only be bound to the ' + 'component instance. See %s', componentName) : undefined;

4928 } else if (!args.length) {

5655 - ("production" !== "development" ? warning(

5656 - false,

5657 - 'bind(): You are binding a component method to the component. ' +

5658 - 'React does this for you automatically in a high-performance ' +

5659 - 'way, so you can safely remove this call. See %s',

5660 - componentName

5661 - ) : null);

4929 + "development" !== 'production' ? warning(false, 'bind(): You are binding a component method to the component. ' + 'React does this for you automatically in a high-performance ' + 'way, so you can safely remove this call. See %s', componentName) : undefined;

4930 return boundMethod;

4931 }

4932 var reboundMethod = _bind.apply(boundMethod, arguments);

@@ -5681,34 +4949,11 @@ function bindAutoBindMethods(component) {

4949 for (var autoBindKey in component.__reactAutoBindMap) {

4950 if (component.__reactAutoBindMap.hasOwnProperty(autoBindKey)) {

4951 var method = component.__reactAutoBindMap[autoBindKey];

5684 - component[autoBindKey] = bindAutoBindMethod(

5685 - component,

5686 - ReactErrorUtils.guard(

5687 - method,

5688 - component.constructor.displayName + '.' + autoBindKey

5689 - )

5690 - );

4952 + component[autoBindKey] = bindAutoBindMethod(component, method);

4953 }

4954 }

4955 }

4956

5695 -var typeDeprecationDescriptor = {

5696 - enumerable: false,

5697 - get: function() {

5698 - var displayName = this.displayName || this.name || 'Component';

5699 - ("production" !== "development" ? warning(

5700 - false,

5701 - '%s.type is deprecated. Use %s directly to access the class.',

5702 - displayName,

5703 - displayName

5704 - ) : null);

5705 - Object.defineProperty(this, 'type', {

5706 - value: this

5707 - });

5708 - return this;

5709 - }

5710 -};

5711 -

4957 /**

4958 * Add more to the ReactClass base class. These are all legacy features and

4959 * therefore not already part of the modern ReactComponent.

@@ -5719,10 +4964,10 @@ var ReactClassMixin = {

4964 * TODO: This will be deprecated because state should always keep a consistent

4965 * type signature and the only use case for this, is to avoid that.

This file is too large to show in full.

docs/tips/02-inline-styles.ko-KR.md

+1 -1

@@ -17,7 +17,7 @@ var divStyle = {

17 msTransition: 'all' // 'ms'는 유일한 소문자 벤더 프리픽스(vendor prefix)입니다

18 };

20 -React.render(<div style={divStyle}>Hello World!</div>, mountNode);

20 +ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);

21 ```

23 스타일 키는 JS에서 DOM 노드의 프로퍼티에 접근하는 것과 일관성있도록 camelCased 형식입니다. (예를 들어 `node.style.backgroundImage`) [`ms`를 제외한](http://www.andismith.com/blog/2012/02/modernizr-prefixed/) 벤더 프리픽스는 대문자로 시작해야 합니다. 따라서 `WebkitTransition`은 대문자 "W"를 사용합니다.

docs/tips/02-inline-styles.md

+1 -1

@@ -17,7 +17,7 @@ var divStyle = {

17 msTransition: 'all' // 'ms' is the only lowercase vendor prefix

18 };

20 -React.render(<div style={divStyle}>Hello World!</div>, mountNode);

20 +ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);

21 ```

23 Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. `node.style.backgroundImage`). Vendor prefixes [other than `ms`](http://www.andismith.com/blog/2012/02/modernizr-prefixed/) should begin with a capital letter. This is why `WebkitTransition` has an uppercase "W".

docs/tips/03-if-else-in-JSX.ko-KR.md

+3 -3

@@ -11,10 +11,10 @@ JSX 안에서는 `if-else` 구문이 작동하지 않습니다. 왜냐하면 JSX

12 ```js

13 // 이 JSX 코드는

14 -React.render(<div id="msg">Hello World!</div>, mountNode);

14 +ReactDOM.render(<div id="msg">Hello World!</div>, mountNode);

16 // 다음의 JS 코드로 변환됩니다.

17 -React.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);

17 +ReactDOM.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);

18 ```

20 그렇기 때문에 `if` 구문을 넣을 수 없습니다. 다음 예제를 봅시다.

@@ -30,7 +30,7 @@ React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

30 이는 올바른 JS가 아닙니다. 대신 삼항 연산자를 사용할 수 있습니다.

32 ```js

33 -React.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);

33 +ReactDOM.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);

34 ```

36 삼항 연산자가 충분하지 않다면 JSX구문 밖에서 `if` 문을 사용해 어떤 컴포넌트가 사용될 지 결정할 수 있습니다.

docs/tips/03-if-else-in-JSX.md

+3 -3

@@ -11,10 +11,10 @@ next: self-closing-tag.html

12 ```js

13 // This JSX:

14 -React.render(<div id="msg">Hello World!</div>, mountNode);

14 +ReactDOM.render(<div id="msg">Hello World!</div>, mountNode);

16 // Is transformed to this JS:

17 -React.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);

17 +ReactDOM.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);

18 ```

20 This means that `if` statements don't fit in. Take this example:

@@ -30,7 +30,7 @@ React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

30 That's not valid JS. You probably want to make use of a ternary expression:

32 ```js

33 -React.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);

33 +ReactDOM.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);

34 ```

36 If a ternary expression isn't robust enough, you can use `if` statements outside of your JSX to determine which components should be used:

docs/tips/06-style-props-value-px.ko-KR.md

+1 -1

@@ -11,7 +11,7 @@ next: children-props-type-ko-KR.html

12 ```js

13 var divStyle = {height: 10}; // "height:10px" 로 렌더링 됩니다.

14 -React.render(<div style={divStyle}>Hello World!</div>, mountNode);

14 +ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);

15 ```

17 더 자세한 이야기는 [Inline Styles](/react/tips/inline-styles-ko-KR.html)를 참고해 주시기 바랍니다.

docs/tips/06-style-props-value-px.md

+1 -1

@@ -11,7 +11,7 @@ When specifying a pixel value for your inline `style` prop, React automatically

12 ```js

13 var divStyle = {height: 10}; // rendered as "height:10px"

14 -React.render(<div style={divStyle}>Hello World!</div>, mountNode);

14 +ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);

15 ```

17 See [Inline Styles](/react/tips/inline-styles.html) for more info.

docs/tips/07-children-props-type.ko-KR.md

+2 -2

@@ -20,7 +20,7 @@ var GenericWrapper = React.createClass({

20 }

21 });

23 -React.render(

23 +ReactDOM.render(

24 <GenericWrapper><span/><span/><span/></GenericWrapper>,

25 mountNode

26 );

@@ -43,7 +43,7 @@ var GenericWrapper = React.createClass({

43 }

44 });

46 -React.render(<GenericWrapper>hello</GenericWrapper>, mountNode);

46 +ReactDOM.render(<GenericWrapper>hello</GenericWrapper>, mountNode);

47 ```

49 `this.props.children`을 쉽게 다룰 수 있도록 [React.Children utilities](/react/docs/top-level-api-ko-KR.html#react.children)를 제공하고 있습니다.

docs/tips/07-children-props-type.md

+2 -2

@@ -20,7 +20,7 @@ var GenericWrapper = React.createClass({

20 }

21 });

23 -React.render(

23 +ReactDOM.render(

24 <GenericWrapper><span/><span/><span/></GenericWrapper>,

25 mountNode

26 );

@@ -43,7 +43,7 @@ var GenericWrapper = React.createClass({

43 }

44 });

46 -React.render(<GenericWrapper>hello</GenericWrapper>, mountNode);

46 +ReactDOM.render(<GenericWrapper>hello</GenericWrapper>, mountNode);

47 ```

49 To make `this.props.children` easy to deal with, we've provided the [React.Children utilities](/react/docs/top-level-api.html#react.children).

docs/tips/08-controlled-input-null-value.ko-KR.md

+2 -2

@@ -14,9 +14,9 @@ next: componentWillReceiveProps-not-triggered-after-mounting-ko-KR.html

14 아래 짧은 예제가 있습니다; 렌더링 후, 잠시 뒤에 텍스트를 고칠 수 있는 상태가 되는 것을 확인 하실 수 있습니다.

16 ```js

17 -React.render(<input value="hi" />, mountNode);

17 +ReactDOM.render(<input value="hi" />, mountNode);

19 setTimeout(function() {

20 - React.render(<input value={null} />, mountNode);

20 + ReactDOM.render(<input value={null} />, mountNode);

21 }, 1000);

22 ```

docs/tips/08-controlled-input-null-value.md

+2 -2

@@ -14,9 +14,9 @@ You might have run into a problem where `value` is specified, but the input can

14 The snippet below shows this phenomenon; after a second, the text becomes editable.

16 ```js

17 -React.render(<input value="hi" />, mountNode);

17 +ReactDOM.render(<input value="hi" />, mountNode);

19 setTimeout(function() {

20 - React.render(<input value={null} />, mountNode);

20 + ReactDOM.render(<input value={null} />, mountNode);

21 }, 1000);

22 ```

docs/tips/10-props-in-getInitialState-as-anti-pattern.ko-KR.md

+3 -3

@@ -26,7 +26,7 @@ var MessageBox = React.createClass({

26 }

27 });

29 -React.render(<MessageBox name="Rogers"/>, mountNode);

29 +ReactDOM.render(<MessageBox name="Rogers"/>, mountNode);

30 ```

32 더 나은 코드:

@@ -38,7 +38,7 @@ var MessageBox = React.createClass({

38 }

39 });

41 -React.render(<MessageBox name="Rogers"/>, mountNode);

41 +ReactDOM.render(<MessageBox name="Rogers"/>, mountNode);

42 ```

44 (복잡한 로직이라, 메소드에서 계산하는 부분만 떼어 왔습니다.)

@@ -63,5 +63,5 @@ var Counter = React.createClass({

63 }

64 });

66 -React.render(<Counter initialCount={7}/>, mountNode);

66 +ReactDOM.render(<Counter initialCount={7}/>, mountNode);

67 ```

docs/tips/10-props-in-getInitialState-as-anti-pattern.md

+3 -3

@@ -26,7 +26,7 @@ var MessageBox = React.createClass({

26 }

27 });

29 -React.render(<MessageBox name="Rogers"/>, mountNode);

29 +ReactDOM.render(<MessageBox name="Rogers"/>, mountNode);

30 ```

32 Better:

@@ -38,7 +38,7 @@ var MessageBox = React.createClass({

38 }

39 });

41 -React.render(<MessageBox name="Rogers"/>, mountNode);

41 +ReactDOM.render(<MessageBox name="Rogers"/>, mountNode);

42 ```

44 (For more complex logic, simply isolate the computation in a method.)

@@ -62,5 +62,5 @@ var Counter = React.createClass({

62 }

63 });

65 -React.render(<Counter initialCount={7}/>, mountNode);

65 +ReactDOM.render(<Counter initialCount={7}/>, mountNode);

66 ```

docs/tips/11-dom-event-listeners.ko-KR.md

+1 -1

@@ -36,7 +36,7 @@ var Box = React.createClass({

36 }

37 });

39 -React.render(<Box />, mountNode);

39 +ReactDOM.render(<Box />, mountNode);

40 ```

42 컴포넌트가 마운트 되고 DOM 표현을 가지게 되면 `componentDidMount`가 호출됩니다. 일반적인 DOM 이벤트를 붙이는 곳으로 여기를 종종 사용합니다.

docs/tips/11-dom-event-listeners.md

+1 -1

@@ -36,7 +36,7 @@ var Box = React.createClass({

36 }

37 });

39 -React.render(<Box />, mountNode);

39 +ReactDOM.render(<Box />, mountNode);

40 ```

42 `componentDidMount` is called after the component is mounted and has a DOM representation. This is often a place where you would attach generic DOM events.

docs/tips/12-initial-ajax.ko-KR.md

+1 -1

@@ -44,7 +44,7 @@ var UserGist = React.createClass({

44 }

45 });

47 -React.render(

47 +ReactDOM.render(

48 <UserGist source="https://api.github.com/users/octocat/gists" />,

49 mountNode

50 );

docs/tips/12-initial-ajax.md

+1 -1

@@ -44,7 +44,7 @@ var UserGist = React.createClass({

44 }

45 });

47 -React.render(

47 +ReactDOM.render(

48 <UserGist source="https://api.github.com/users/octocat/gists" />,

49 mountNode

50 );

docs/tips/13-false-in-jsx.ko-KR.md

+3 -3

@@ -12,19 +12,19 @@ next: communicate-between-components-ko-KR.html

12 `id="false"`로 렌더링

14 ```js

15 -React.render(<div id={false} />, mountNode);

15 +ReactDOM.render(<div id={false} />, mountNode);

16 ```

18 문자열 `"false"`를 입력값으로

20 ```js

21 -React.render(<input value={false} />, mountNode);

21 +ReactDOM.render(<input value={false} />, mountNode);

22 ```

24 자식 없음

26 ```js

27 -React.render(<div>{false}</div>, mountNode);

27 +ReactDOM.render(<div>{false}</div>, mountNode);

28 ```

30 `div` 자식으로 쓰인 문자열 `"false"`를 렌더링하지 않은 것은 더 일반적인 사용 사례를 허용하기 위함입니다. `<div>{x > 1 && '하나 이상의 아이템을 가졌습니다.'}</div>`

docs/tips/13-false-in-jsx.md

+3 -3

@@ -12,19 +12,19 @@ Here's how `false` renders in different situations:

12 Renders as `id="false"`:

14 ```js

15 -React.render(<div id={false} />, mountNode);

15 +ReactDOM.render(<div id={false} />, mountNode);

16 ```

18 String `"false"` as input value:

20 ```js

21 -React.render(<input value={false} />, mountNode);

21 +ReactDOM.render(<input value={false} />, mountNode);

22 ```

24 No child:

26 ```js

27 -React.render(<div>{false}</div>, mountNode);

27 +ReactDOM.render(<div>{false}</div>, mountNode);

28 ```

30 The reason why this one doesn't render as the string `"false"` as a `div` child is to allow the more common use-case: `<div>{x > 1 && 'You have more than one item'}</div>`.

docs/tips/14-communicate-between-components.ko-KR.md

+1 -1

@@ -31,7 +31,7 @@ var GroceryList = React.createClass({

31 }

32 });

34 -React.render(

34 +ReactDOM.render(

35 <GroceryList items={['사과', '바나나', '크랜베리']} />, mountNode

36 );

37 ```

docs/tips/14-communicate-between-components.md

+1 -1

@@ -31,7 +31,7 @@ var GroceryList = React.createClass({

31 }

32 });

34 -React.render(

34 +ReactDOM.render(

35 <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode

36 );

37 ```

docs/tips/15-expose-component-functions.ko-KR.md

+1 -1

@@ -53,7 +53,7 @@ var Todos = React.createClass({

53 }

54 });

56 -React.render(<Todos />, mountNode);

56 +ReactDOM.render(<Todos />, mountNode);

57 ```

59 다른 방법으로는, `isLastUnfinishedItem` prop을 `todo`에 넘기는 방식으로 원하는 바를 이룰수도 있습니다. `componentDidUpdate`에서 prop을 확인하고 스스로 애니메이션 효과를 주는겁니다; 하지만 애니메이션 제어를 위해 다른 prop들을 넘기게 되면 이는 금새 난잡해질 수 있습니다.

docs/tips/15-expose-component-functions.md

+1 -1

@@ -53,7 +53,7 @@ var Todos = React.createClass({

53 }

54 });

56 -React.render(<Todos />, mountNode);

56 +ReactDOM.render(<Todos />, mountNode);

57 ```

59 Alternatively, you could have achieved this by passing the `todo` an `isLastUnfinishedItem` prop, let it check this prop in `componentDidUpdate`, then animate itself; however, this quickly gets messy if you pass around different props to control animations.

docs/tips/16-references-to-components.ko-KR.md

+3 -3

@@ -7,10 +7,10 @@ prev: expose-component-functions-ko-KR.html

7 next: children-undefined-ko-KR.html

8 ---

10 -애플리케이션의 일부에서만 React 컴포넌트를 사용중이거나 코드를 React로 전환하고 있다면, 컴포넌트의 참조를 보존할 필요가 있을 것입니다. `React.render`는 마운트된 컴포넌트의 참조를 반환합니다:

10 +애플리케이션의 일부에서만 React 컴포넌트를 사용중이거나 코드를 React로 전환하고 있다면, 컴포넌트의 참조를 보존할 필요가 있을 것입니다. `ReactDOM.render`는 마운트된 컴포넌트의 참조를 반환합니다:

12 ```js

13 -var myComponent = React.render(<MyComponent />, myContainer);

13 +var myComponent = ReactDOM.render(<MyComponent />, myContainer);

14 ```

16 명심하세요, JSX는 컴포넌트 인스턴스를 반환하지 않습니다! 단지 마운트된 컴포넌트가 어떻게 보일지 알려주는 간단한 서술인 **ReactElement**일 뿐입니다.

@@ -20,7 +20,7 @@ var myComponentElement = <MyComponent />; // ReactElement일 뿐입니다.

21 // 코드들이 여기 위치하게 됩니다...

23 -var myComponentInstance = React.render(myComponentElement, myContainer);

23 +var myComponentInstance = ReactDOM.render(myComponentElement, myContainer);

24 ```

26 > 주의:

docs/tips/17-children-undefined.ko-KR.md

+1 -1

@@ -22,7 +22,7 @@ var App = React.createClass({

22 }

23 });

25 -React.render(<App></App>, mountNode);

25 +ReactDOM.render(<App></App>, mountNode);

26 ```

28 서브 컴포넌트(`span`)에 억세스하려면, [refs](/react/docs/more-about-refs.html)를 넣으세요.

docs/tips/17-children-undefined.md

+1 -1

@@ -22,7 +22,7 @@ var App = React.createClass({

22 }

23 });

25 -React.render(<App></App>, mountNode);

25 +ReactDOM.render(<App></App>, mountNode);

26 ```

28 To access your own subcomponents (the `span`s), place [refs](/react/docs/more-about-refs.html) on them.

docs/tips/18-use-react-with-other-libraries.ko-KR.md

+2 -2

@@ -16,7 +16,7 @@ var App = React.createClass({

16 },

18 componentDidMount: function() {

19 - $(React.findDOMNode(this.refs.placeholder)).append($('<span />'));

19 + $(ReactDOM.findDOMNode(this.refs.placeholder)).append($('<span />'));

20 },

22 componentWillUnmount: function() {

@@ -33,7 +33,7 @@ var App = React.createClass({

33 }

34 });

36 -React.render(<App />, mountNode);

36 +ReactDOM.render(<App />, mountNode);

37 ```

39 이 방식으로 별도의 [이벤트 리스너](/react/tips/dom-event-listeners-ko-KR.html)나 [이벤트 스트림](https://baconjs.github.io) 같은 것들을 더할 수 있습니다.

docs/tips/18-use-react-with-other-libraries.md

+2 -2

@@ -16,7 +16,7 @@ var App = React.createClass({

16 },

18 componentDidMount: function() {

19 - $(React.findDOMNode(this.refs.placeholder)).append($('<span />'));

19 + $(ReactDOM.findDOMNode(this.refs.placeholder)).append($('<span />'));

20 },

22 componentWillUnmount: function() {

@@ -33,7 +33,7 @@ var App = React.createClass({

33 }

34 });

36 -React.render(<App />, mountNode);

36 +ReactDOM.render(<App />, mountNode);

37 ```

39 You can attach your own [event listeners](/react/tips/dom-event-listeners.html) and even [event streams](https://baconjs.github.io) this way.

grunt/tasks/release.js

@@ -108,6 +108,7 @@ function docs() {

108

109 grunt.file.copy('build/react-' + VERSION + '.zip', 'docs/downloads/react-' + VERSION + '.zip');

110 grunt.file.copy('build/react.js', 'docs/js/react.js');

111 + grunt.file.copy('build/react-dom.js', 'docs/js/react-dom.js');

112

113 var files = grunt.file.expand(GH_PAGES_GLOB);

114 files.forEach(function(file) {