[examples] Use Babel
Paul O’Shannessy committed
Sep 18, 2015 at 17:04 UTC
715dea085b9ac5c68fa8c7b7460f83e27bb6afcf
8 files changed
+31
-33
examples/basic-click-counter/index.html
+15
-17
@@ -4,27 +4,25 @@
4
<meta charset="utf-8">
5
<title>Basic Example with Click Counter</title>
6
<script src="../../build/react.js"></script>
7
- <script src="../../build/JSXTransformer.js"></script>
8
- <script type="text/jsx">
9
- var Counter = React.createClass({
10
- getInitialState: function () {
11
- return { clickCount: 0 };
12
- },
13
- handleClick: function () {
14
- this.setState(function(state) {
15
- return {clickCount: state.clickCount + 1};
16
- });
17
- },
18
- render: function () {
19
- return (<h2 onClick={this.handleClick}>Click me! Number of clicks: {this.state.clickCount}</h2>);
20
- }
21
- });
22
- </script>
7
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
8
</head>
9
<body>
10
<div id="message" align="center"></div>
11
27
- <script type="text/jsx">
12
+ <script type="text/babel">
13
+ var Counter = React.createClass({
14
+ getInitialState: function () {
15
+ return { clickCount: 0 };
16
+ },
17
+ handleClick: function () {
18
+ this.setState(function(state) {
19
+ return {clickCount: state.clickCount + 1};
20
+ });
21
+ },
22
+ render: function () {
23
+ return (<h2 onClick={this.handleClick}>Click me! Number of clicks: {this.state.clickCount}</h2>);
24
+ }
25
+ });
26
React.render(<Counter />,
27
document.getElementById('message')
28
);
examples/basic-jsx-external/index.html
+2
-2
@@ -25,7 +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/JSXTransformer.js"></script>
29
- <script type="text/jsx" src="example.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>
31
</html>
examples/basic-jsx-harmony/index.html
+2
-2
@@ -24,8 +24,8 @@
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/JSXTransformer.js"></script>
28
- <script type="text/jsx;harmony=true">
27
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
28
+ <script type="text/babel">
29
class ExampleApplication extends React.Component {
30
render() {
31
var elapsed = Math.round(this.props.elapsed / 100);
examples/basic-jsx-precompile/index.html
+4
-4
@@ -11,15 +11,15 @@
11
<p>
12
If you can see this, React is not running. Try running:
13
</p>
14
- <pre>npm install -g react-tools
14
+ <pre>npm install -g babel
15
cd examples/basic-jsx-precompile/
16
-jsx . build/</pre>
16
+babel example.js --out-dir=build</pre>
17
</div>
18
<h4>Example Details</h4>
19
<p>This is written with JSX in a separate file and precompiled to vanilla JS by running:</p>
20
- <pre>npm install -g react-tools
20
+ <pre>npm install -g babel
21
cd examples/basic-jsx-precompile/
22
-jsx . build/</pre>
22
+babel example.js --out-dir=build</pre>
23
<p>
24
Learn more about React at
25
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
examples/basic-jsx/index.html
+2
-2
@@ -24,8 +24,8 @@
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/JSXTransformer.js"></script>
28
- <script type="text/jsx">
27
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
28
+ <script type="text/babel">
29
var ExampleApplication = React.createClass({
30
render: function() {
31
var elapsed = Math.round(this.props.elapsed / 100);
examples/jquery-bootstrap/index.html
+2
-2
@@ -10,9 +10,9 @@
10
<body>
11
<div id="jqueryexample"></div>
12
<script src="../../build/react.js"></script>
13
- <script src="../../build/JSXTransformer.js"></script>
13
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
14
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js" charset="utf-8"></script>
15
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js" charset="utf-8"></script>
16
- <script type="text/jsx" src="js/app.js"></script>
16
+ <script type="text/babel" src="js/app.js"></script>
17
</body>
18
</html>
examples/quadratic/index.html
+2
-2
@@ -24,7 +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/JSXTransformer.js"></script>
28
- <script type="text/jsx" src="example.js"></script>
27
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
28
+ <script type="text/babel" src="example.js"></script>
29
</body>
30
</html>
examples/transitions/index.html
+2
-2
@@ -25,8 +25,8 @@
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/JSXTransformer.js"></script>
29
- <script type="text/jsx">
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 CSSTransitionGroup = React.addons.CSSTransitionGroup;
31
var INTERVAL = 2000;
32