Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update examples for Babel, 0.14; remove 3rd party code #4914

Merged
merged 7 commits into from
Sep 24, 2015
Merged

Update examples for Babel, 0.14; remove 3rd party code #4914

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
16608e3
[examples] Assume es5 compatible browsers with console
zpao Sep 18, 2015
4d3d14a
[exmaples] Remove local 3rd party code, use CDN (mostly)
zpao Sep 19, 2015
715dea0
[examples] Use Babel
zpao Sep 19, 2015
c475699
[examples] Use ReactDOM for appropriate APIs
zpao Sep 19, 2015
f1ede3e
[examples] Fix transtion example with timeout prop
zpao Sep 19, 2015
145ca27
[examples] Update basic-commonjs for new React, watchify
zpao Sep 19, 2015
3c0f46e
[examples] Use refs instead of findDOMNode
zpao Sep 24, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
36 changes: 18 additions & 18 deletions examples/basic-click-counter/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,28 @@
<meta charset="utf-8">
<title>Basic Example with Click Counter</title>
<script src="../../build/react.js"></script>
<script src="../../build/JSXTransformer.js"></script>
<script type="text/jsx">
var Counter = React.createClass({
getInitialState: function () {
return { clickCount: 0 };
},
handleClick: function () {
this.setState(function(state) {
return {clickCount: state.clickCount + 1};
});
},
render: function () {
return (<h2 onClick={this.handleClick}>Click me! Number of clicks: {this.state.clickCount}</h2>);
}
});
</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>
<div id="message" align="center"></div>

<script type="text/jsx">
React.render(<Counter />,
<script type="text/babel">
var Counter = React.createClass({
getInitialState: function () {
return { clickCount: 0 };
},
handleClick: function () {
this.setState(function(state) {
return {clickCount: state.clickCount + 1};
});
},
render: function () {
return (<h2 onClick={this.handleClick}>Click me! Number of clicks: {this.state.clickCount}</h2>);
}
});
ReactDOM.render(
<Counter />,
document.getElementById('message')
);
</script>
Expand Down
4 changes: 3 additions & 1 deletion examples/basic-commonjs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

Run `npm install` in the directory to install React from npm. Then run:

./node_modules/.bin/browserify --debug --transform reactify ./index.js > ./bundle.js
```sh
npm start
```

to produce `bundle.js` with example code and React.
5 changes: 1 addition & 4 deletions examples/basic-commonjs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,11 @@ <h1>Basic CommonJS Example with Browserify</h1>
</div>
<h4>Example Details</h4>
<p>This is written with JSX in a CommonJS module and precompiled to vanilla JS by running:</p>
<pre>browserify --debug --transform reactify index.js &gt; bundle.js</pre>
<pre>npm start</pre>
<p>
Learn more about React at
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
</p>
<script src="../shared/thirdparty/es5-shim.min.js"></script>
<script src="../shared/thirdparty/es5-sham.min.js"></script>
<script src="../shared/thirdparty/console-polyfill.js"></script>
<script src="bundle.js"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion examples/basic-commonjs/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
'use strict';

var React = require('react');
var ReactDOM = require('react-dom');

var ExampleApplication = React.createClass({
render: function() {
Expand All @@ -16,7 +17,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')
);
Expand Down
11 changes: 6 additions & 5 deletions examples/basic-commonjs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@
"name": "react-basic-commonjs-example",
"description": "Basic example of using React with CommonJS",
"main": "index.js",
"devDependencies": {
"browserify": "^6.3.3",
"react": "^0.13.0",
"reactify": "^0.17.1"
"dependencies": {
"babelify": "^6.3.0",
"react": "^0.14.0-rc1",
"react-dom": "^0.14.0-rc1",
"watchify": "^3.4.0"
},
"scripts": {
"build": "browserify --debug --transform reactify index.js > bundle.js"
"start": "watchify index.js -v -t babelify -o bundle.js"
}
}
2 changes: 1 addition & 1 deletion examples/basic-jsx-external/example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
);
Expand Down
8 changes: 3 additions & 5 deletions examples/basic-jsx-external/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,9 @@ <h4>Example Details</h4>
Learn more about React at
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
</p>
<script src="../shared/thirdparty/es5-shim.min.js"></script>
<script src="../shared/thirdparty/es5-sham.min.js"></script>
<script src="../shared/thirdparty/console-polyfill.js"></script>
<script src="../../build/react.js"></script>
<script src="../../build/JSXTransformer.js"></script>
<script type="text/jsx" src="example.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>
</html>
7 changes: 4 additions & 3 deletions examples/basic-jsx-harmony/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,9 @@ <h4>Example Details</h4>
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
</p>
<script src="../../build/react.js"></script>
<script src="../../build/JSXTransformer.js"></script>
<script type="text/jsx;harmony=true">
<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 {
render() {
var elapsed = Math.round(this.props.elapsed / 100);
Expand All @@ -38,7 +39,7 @@ <h4>Example Details</h4>
}
var start = new Date().getTime();
setInterval(() => {
React.render(
ReactDOM.render(
<ExampleApplication elapsed={new Date().getTime() - start} />,
document.getElementById('container')
);
Expand Down
2 changes: 1 addition & 1 deletion examples/basic-jsx-precompile/example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
);
Expand Down
12 changes: 5 additions & 7 deletions examples/basic-jsx-precompile/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,21 @@ <h1>Basic Example with Precompiled JSX</h1>
<p>
If you can see this, React is not running. Try running:
</p>
<pre>npm install -g react-tools
<pre>npm install -g babel
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What was wrong with this? Your way gives extra whitespace.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nothing I just wanted prettier HTML. Comparing styling now though, looks like leaving as purely pre will be better.

cd examples/basic-jsx-precompile/
jsx . build/</pre>
babel example.js --out-dir=build</pre>
</div>
<h4>Example Details</h4>
<p>This is written with JSX in a separate file and precompiled to vanilla JS by running:</p>
<pre>npm install -g react-tools
<pre>npm install -g babel
cd examples/basic-jsx-precompile/
jsx . build/</pre>
babel example.js --out-dir=build</pre>
<p>
Learn more about React at
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
</p>
<script src="../shared/thirdparty/es5-shim.min.js"></script>
<script src="../shared/thirdparty/es5-sham.min.js"></script>
<script src="../shared/thirdparty/console-polyfill.js"></script>
<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>
<script src="build/example.js"></script>
</body>
</html>
10 changes: 4 additions & 6 deletions examples/basic-jsx/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,10 @@ <h4>Example Details</h4>
Learn more about React at
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
</p>
<script src="../shared/thirdparty/es5-shim.min.js"></script>
<script src="../shared/thirdparty/es5-sham.min.js"></script>
<script src="../shared/thirdparty/console-polyfill.js"></script>
<script src="../../build/react.js"></script>
<script src="../../build/JSXTransformer.js"></script>
<script type="text/jsx">
<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({
render: function() {
var elapsed = Math.round(this.props.elapsed / 100);
Expand All @@ -41,7 +39,7 @@ <h4>Example Details</h4>
});
var start = new Date().getTime();
setInterval(function() {
React.render(
ReactDOM.render(
<ExampleApplication elapsed={new Date().getTime() - start} />,
document.getElementById('container')
);
Expand Down
6 changes: 2 additions & 4 deletions examples/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,8 @@ <h4>Example Details</h4>
Learn more about React at
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
</p>
<script src="../shared/thirdparty/es5-shim.min.js"></script>
<script src="../shared/thirdparty/es5-sham.min.js"></script>
<script src="../shared/thirdparty/console-polyfill.js"></script>
<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>
<script>
var ExampleApplication = React.createClass({
render: function() {
Expand All @@ -44,7 +42,7 @@ <h4>Example Details</h4>

var start = new Date().getTime();
setInterval(function() {
React.render(
ReactDOM.render(
ExampleApplicationFactory({elapsed: new Date().getTime() - start}),
document.getElementById('container')
);
Expand Down
14 changes: 6 additions & 8 deletions examples/jquery-bootstrap/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,16 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Integration</title>
<link rel="stylesheet" href="../shared/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="css/example.css" type="text/css" />
</head>
<body>
<div id="jqueryexample"></div>
<script src="../shared/thirdparty/es5-shim.min.js"></script>
<script src="../shared/thirdparty/es5-sham.min.js"></script>
<script src="../shared/thirdparty/console-polyfill.js"></script>
<script src="../../build/react.js"></script>
<script src="../../build/JSXTransformer.js"></script>
<script src="../shared/thirdparty/jquery.min.js" charset="utf-8"></script>
<script src="../shared/thirdparty/bootstrap.min.js" charset="utf-8"></script>
<script type="text/jsx" src="js/app.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>
<script type="text/babel" src="js/app.js"></script>
</body>
</html>
13 changes: 6 additions & 7 deletions examples/jquery-bootstrap/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,16 @@ 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))
.modal({backdrop: 'static', keyboard: false, show: false});
$(this.refs.root).modal({backdrop: 'static', keyboard: false, show: false});
},
componentWillUnmount: function() {
$(React.findDOMNode(this)).off('hidden', this.handleHidden);
$(this.refs.root).off('hidden', this.handleHidden);
},
close: function() {
$(React.findDOMNode(this)).modal('hide');
$(this.refs.root).modal('hide');
},
open: function() {
$(React.findDOMNode(this)).modal('show');
$(this.refs.root).modal('show');
},
render: function() {
var confirmButton = null;
Expand All @@ -52,7 +51,7 @@ var BootstrapModal = React.createClass({
}

return (
<div className="modal fade">
<div className="modal fade" ref="root">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
Expand Down Expand Up @@ -124,4 +123,4 @@ var Example = React.createClass({
}
});

React.render(<Example />, document.getElementById('jqueryexample'));
ReactDOM.render(<Example />, document.getElementById('jqueryexample'));
12 changes: 5 additions & 7 deletions examples/jquery-mobile/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,15 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile React Example</title>
<link rel="stylesheet" href="../shared/css/jquery.mobile.min.css" />
<link rel="stylesheet" href="../shared/css/jqm-demos.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" />
<link rel="stylesheet" href="https://demos.jquerymobile.com/1.4.5/_assets/css/jqm-demos.css" />
</head>
<body class="ui-mobile-viewport ui-overlay-a">
<div id="content"></div>
<script src="../shared/thirdparty/es5-shim.min.js"></script>
<script src="../shared/thirdparty/es5-sham.min.js"></script>
<script src="../shared/thirdparty/console-polyfill.js"></script>
<script src="../shared/thirdparty/jquery.min.js"></script>
<script src="../shared/thirdparty/jquery.mobile.min.js"></script>
<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>
2 changes: 1 addition & 1 deletion examples/jquery-mobile/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
2 changes: 1 addition & 1 deletion examples/quadratic/example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ var QuadraticCalculator = React.createClass({
}
});

React.render(
ReactDOM.render(
<QuadraticCalculator />,
document.getElementById('container')
);
8 changes: 3 additions & 5 deletions examples/quadratic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,9 @@ <h4>Example Details</h4>
Learn more about React at
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
</p>
<script src="../shared/thirdparty/es5-shim.min.js"></script>
<script src="../shared/thirdparty/es5-sham.min.js"></script>
<script src="../shared/thirdparty/console-polyfill.js"></script>
<script src="../../build/react.js"></script>
<script src="../../build/JSXTransformer.js"></script>
<script type="text/jsx" src="example.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>
</html>
5 changes: 0 additions & 5 deletions examples/shared/css/bootstrap.min.css
View file
Open in desktop

This file was deleted.