Skip to content

Commit

Permalink
[examples] Use Babel
Browse files Browse the repository at this point in the history
  • Loading branch information
zpao committed Sep 24, 2015
1 parent 4d3d14a commit 715dea0
Show file tree
Hide file tree
Showing 8 changed files with 31 additions and 33 deletions.
32 changes: 15 additions & 17 deletions examples/basic-click-counter/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,25 @@
<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="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">
<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>);
}
});
React.render(<Counter />,
document.getElementById('message')
);
Expand Down
4 changes: 2 additions & 2 deletions examples/basic-jsx-external/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ <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" src="example.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>
4 changes: 2 additions & 2 deletions examples/basic-jsx-harmony/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ <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="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 Down
8 changes: 4 additions & 4 deletions examples/basic-jsx-precompile/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ <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
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>.
Expand Down
4 changes: 2 additions & 2 deletions examples/basic-jsx/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ <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">
<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 Down
4 changes: 2 additions & 2 deletions examples/jquery-bootstrap/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
<body>
<div id="jqueryexample"></div>
<script src="../../build/react.js"></script>
<script src="../../build/JSXTransformer.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/jsx" src="js/app.js"></script>
<script type="text/babel" src="js/app.js"></script>
</body>
</html>
4 changes: 2 additions & 2 deletions examples/quadratic/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ <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" src="example.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>
4 changes: 2 additions & 2 deletions examples/transitions/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ <h4>Example Details</h4>
<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/JSXTransformer.js"></script>
<script type="text/jsx">
<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;
var INTERVAL = 2000;

Expand Down

0 comments on commit 715dea0

Please sign in to comment.