[examples] Use ReactDOM for appropriate APIs
Paul O’Shannessy committed
Sep 18, 2015 at 17:46 UTC
c475699d6b36300a119f445f9953b8ce91b932da
15 files changed
+25
-14
examples/basic-click-counter/index.html
+3
-1
@@ -4,6 +4,7 @@
4
<meta charset="utf-8">
5
<title>Basic Example with Click Counter</title>
6
<script src="../../build/react.js"></script>
7
+ <script src="../../build/react-dom.js"></script>
8
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
9
</head>
10
<body>
@@ -23,7 +24,8 @@
24
return (<h2 onClick={this.handleClick}>Click me! Number of clicks: {this.state.clickCount}</h2>);
25
}
26
});
26
- React.render(<Counter />,
27
+ ReactDOM.render(
28
+ <Counter />,
29
document.getElementById('message')
30
);
31
</script>
examples/basic-jsx-external/example.js
+1
-1
@@ -12,7 +12,7 @@ var ExampleApplication = React.createClass({
12
var start = new Date().getTime();
13
14
setInterval(function() {
15
- React.render(
15
+ ReactDOM.render(
16
<ExampleApplication elapsed={new Date().getTime() - start} />,
17
document.getElementById('container')
18
);
examples/basic-jsx-external/index.html
+1
@@ -25,6 +25,7 @@
25
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
26
</p>
27
<script src="../../build/react.js"></script>
28
+ <script src="../../build/react-dom.js"></script>
29
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
30
<script type="text/babel" src="example.js"></script>
31
</body>
examples/basic-jsx-harmony/index.html
+2
-1
@@ -24,6 +24,7 @@
24
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25
</p>
26
<script src="../../build/react.js"></script>
27
+ <script src="../../build/react-dom.js"></script>
28
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
29
<script type="text/babel">
30
class ExampleApplication extends React.Component {
@@ -38,7 +39,7 @@
39
}
40
var start = new Date().getTime();
41
setInterval(() => {
41
- React.render(
42
+ ReactDOM.render(
43
<ExampleApplication elapsed={new Date().getTime() - start} />,
44
document.getElementById('container')
45
);
examples/basic-jsx-precompile/example.js
+1
-1
@@ -12,7 +12,7 @@ var ExampleApplication = React.createClass({
12
var start = new Date().getTime();
13
14
setInterval(function() {
15
- React.render(
15
+ ReactDOM.render(
16
<ExampleApplication elapsed={new Date().getTime() - start} />,
17
document.getElementById('container')
18
);
examples/basic-jsx-precompile/index.html
+1
@@ -25,6 +25,7 @@ babel example.js --out-dir=build</pre>
25
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
26
</p>
27
<script src="../../build/react.js"></script>
28
+ <script src="../../build/react-dom.js"></script>
29
<script src="build/example.js"></script>
30
</body>
31
</html>
examples/basic-jsx/index.html
+2
-1
@@ -24,6 +24,7 @@
24
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25
</p>
26
<script src="../../build/react.js"></script>
27
+ <script src="../../build/react-dom.js"></script>
28
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
29
<script type="text/babel">
30
var ExampleApplication = React.createClass({
@@ -38,7 +39,7 @@
39
});
40
var start = new Date().getTime();
41
setInterval(function() {
41
- React.render(
42
+ ReactDOM.render(
43
<ExampleApplication elapsed={new Date().getTime() - start} />,
44
document.getElementById('container')
45
);
examples/basic/index.html
+2
-1
@@ -24,6 +24,7 @@
24
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25
</p>
26
<script src="../../build/react.js"></script>
27
+ <script src="../../build/react-dom.js"></script>
28
<script>
29
var ExampleApplication = React.createClass({
30
render: function() {
@@ -41,7 +42,7 @@
42
43
var start = new Date().getTime();
44
setInterval(function() {
44
- React.render(
45
+ ReactDOM.render(
46
ExampleApplicationFactory({elapsed: new Date().getTime() - start}),
47
document.getElementById('container')
48
);
examples/jquery-bootstrap/index.html
+1
@@ -10,6 +10,7 @@
10
<body>
11
<div id="jqueryexample"></div>
12
<script src="../../build/react.js"></script>
13
+ <script src="../../build/react-dom.js"></script>
14
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
15
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js" charset="utf-8"></script>
16
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js" charset="utf-8"></script>
examples/jquery-bootstrap/js/app.js
+5
-5
@@ -18,17 +18,17 @@ var BootstrapModal = React.createClass({
18
// integrate Bootstrap or jQuery with the components lifecycle methods.
19
componentDidMount: function() {
20
// When the component is added, turn it into a modal
21
- $(React.findDOMNode(this))
21
+ $(ReactDOM.findDOMNode(this))
22
.modal({backdrop: 'static', keyboard: false, show: false});
23
},
24
componentWillUnmount: function() {
25
- $(React.findDOMNode(this)).off('hidden', this.handleHidden);
25
+ $(ReactDOM.findDOMNode(this)).off('hidden', this.handleHidden);
26
},
27
close: function() {
28
- $(React.findDOMNode(this)).modal('hide');
28
+ $(ReactDOM.findDOMNode(this)).modal('hide');
29
},
30
open: function() {
31
- $(React.findDOMNode(this)).modal('show');
31
+ $(ReactDOM.findDOMNode(this)).modal('show');
32
},
33
render: function() {
34
var confirmButton = null;
@@ -124,4 +124,4 @@ var Example = React.createClass({
124
}
125
});
126
127
-React.render(<Example />, document.getElementById('jqueryexample'));
127
+ReactDOM.render(<Example />, document.getElementById('jqueryexample'));
examples/jquery-mobile/index.html
+1
@@ -13,6 +13,7 @@
13
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
14
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
15
<script src="../../build/react.js"></script>
16
+ <script src="../../build/react-dom.js"></script>
17
<script src="js/app.js"></script>
18
</body>
19
</html>
examples/jquery-mobile/js/app.js
+1
-1
@@ -188,4 +188,4 @@ var PagePopUpContent = React.createClass({
188
PagePopUpContent = React.createFactory(PagePopUpContent);
189
190
// Render application.
191
-React.render(App(null), document.getElementById('content'));
191
+ReactDOM.render(App(null), document.getElementById('content'));
examples/quadratic/example.js
+1
-1
@@ -53,7 +53,7 @@ var QuadraticCalculator = React.createClass({
53
}
54
});
55
56
-React.render(
56
+ReactDOM.render(
57
<QuadraticCalculator />,
58
document.getElementById('container')
59
);
examples/quadratic/index.html
+1
@@ -24,6 +24,7 @@
24
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25
</p>
26
<script src="../../build/react.js"></script>
27
+ <script src="../../build/react-dom.js"></script>
28
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
29
<script type="text/babel" src="example.js"></script>
30
</body>
examples/transitions/index.html
+2
-1
@@ -25,6 +25,7 @@
25
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
26
</p>
27
<script src="../../build/react-with-addons.js"></script>
28
+ <script src="../../build/react-dom.js"></script>
29
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
30
<script type="text/babel">
31
var CSSTransitionGroup = React.addons.CSSTransitionGroup;
@@ -69,7 +70,7 @@
70
}
71
});
72
72
- React.render(
73
+ ReactDOM.render(
74
<AnimateDemo />,
75
document.getElementById('container')
76
);