hanzoai/react
2
0
Fork 0
mirror of https://github.com/hanzoai/react.git synced 2026-09-24 17:02:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

[examples] Use ReactDOM for appropriate APIs

Browse Source
This commit is contained in:
Paul O’Shannessy
2015-09-24 15:08:28 -07:00
parent 30c1dab81f
commit 4087ee9c39
15 changed files with 25 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/basic-click-counter/index.html
+3 -1
View File
@@ -4,6 +4,7 @@
<meta charset="utf-8">
<title>Basic Example with Click Counter</title>
<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
@@ -23,7 +24,8 @@
return (<h2 onClick={this.handleClick}>Click me! Number of clicks: {this.state.clickCount}</h2>);
}
});
React.render(<Counter />,
ReactDOM.render(
<Counter />,
document.getElementById('message')
);
</script>
examples/basic-jsx-external/example.js
+1 -1
View File
@@ -12,7 +12,7 @@ var ExampleApplication = React.createClass({
var start = new Date().getTime();
setInterval(function() {
React.render(
ReactDOM.render(
<ExampleApplication elapsed={new Date().getTime() - start} />,
document.getElementById('container')
);
examples/basic-jsx-external/index.html
+1
View File
@@ -25,6 +25,7 @@
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
</p>
<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script type="text/babel" src="example.js"></script>
</body>
examples/basic-jsx-harmony/index.html
+2 -1
View File
@@ -24,6 +24,7 @@
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
</p>
<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script type="text/babel">
class ExampleApplication extends React.Component {
@@ -38,7 +39,7 @@
}
var start = new Date().getTime();
setInterval(() => {
React.render(
ReactDOM.render(
<ExampleApplication elapsed={new Date().getTime() - start} />,
document.getElementById('container')
);
examples/basic-jsx-precompile/example.js
+1 -1
View File
@@ -12,7 +12,7 @@ var ExampleApplication = React.createClass({
var start = new Date().getTime();
setInterval(function() {
React.render(
ReactDOM.render(
<ExampleApplication elapsed={new Date().getTime() - start} />,
document.getElementById('container')
);
examples/basic-jsx-precompile/index.html
+1
View File
@@ -25,6 +25,7 @@ babel example.js --out-dir=build</pre>
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
</p>
<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>
<script src="build/example.js"></script>
</body>
</html>
examples/basic-jsx/index.html
+2 -1
View File
@@ -24,6 +24,7 @@
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
</p>
<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script type="text/babel">
var ExampleApplication = React.createClass({
@@ -38,7 +39,7 @@
});
var start = new Date().getTime();
setInterval(function() {
React.render(
ReactDOM.render(
<ExampleApplication elapsed={new Date().getTime() - start} />,
document.getElementById('container')
);
examples/basic/index.html
+2 -1
View File
@@ -24,6 +24,7 @@
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
</p>
<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>
<script>
var ExampleApplication = React.createClass({
render: function() {
@@ -41,7 +42,7 @@
var start = new Date().getTime();
setInterval(function() {
React.render(
ReactDOM.render(
ExampleApplicationFactory({elapsed: new Date().getTime() - start}),
document.getElementById('container')
);
examples/jquery-bootstrap/index.html
+1
View File
@@ -10,6 +10,7 @@
<body>
<div id="jqueryexample"></div>
<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js" charset="utf-8"></script>
<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
Vendored
+5 -5
View File
@@ -18,17 +18,17 @@ var BootstrapModal = React.createClass({
// integrate Bootstrap or jQuery with the components lifecycle methods.
componentDidMount: function() {
// When the component is added, turn it into a modal
$(React.findDOMNode(this))
$(ReactDOM.findDOMNode(this))
.modal({backdrop: 'static', keyboard: false, show: false});
},
componentWillUnmount: function() {
$(React.findDOMNode(this)).off('hidden', this.handleHidden);
$(ReactDOM.findDOMNode(this)).off('hidden', this.handleHidden);
},
close: function() {
$(React.findDOMNode(this)).modal('hide');
$(ReactDOM.findDOMNode(this)).modal('hide');
},
open: function() {
$(React.findDOMNode(this)).modal('show');
$(ReactDOM.findDOMNode(this)).modal('show');
},
render: function() {
var confirmButton = null;
@@ -124,4 +124,4 @@ var Example = React.createClass({
}
});
React.render(<Example />, document.getElementById('jqueryexample'));
ReactDOM.render(<Example />, document.getElementById('jqueryexample'));
examples/jquery-mobile/index.html
+1
View File
@@ -13,6 +13,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>
<script src="js/app.js"></script>
</body>
</html>
examples/jquery-mobile/js/app.js
Vendored
+1 -1
View File
@@ -188,4 +188,4 @@ var PagePopUpContent = React.createClass({
PagePopUpContent = React.createFactory(PagePopUpContent);
// Render application.
React.render(App(null), document.getElementById('content'));
ReactDOM.render(App(null), document.getElementById('content'));
examples/quadratic/example.js
+1 -1
View File
@@ -53,7 +53,7 @@ var QuadraticCalculator = React.createClass({
}
});
React.render(
ReactDOM.render(
<QuadraticCalculator />,
document.getElementById('container')
);
examples/quadratic/index.html
+1
View File
@@ -24,6 +24,7 @@
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
</p>
<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script type="text/babel" src="example.js"></script>
</body>
examples/transitions/index.html
+2 -1
View File
@@ -25,6 +25,7 @@
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
</p>
<script src="../../build/react-with-addons.js"></script>
<script src="../../build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script type="text/babel">
var CSSTransitionGroup = React.addons.CSSTransitionGroup;
@@ -69,7 +70,7 @@
}
});
React.render(
ReactDOM.render(
<AnimateDemo />,
document.getElementById('container')
);