Update the homepage with ES6 (#7868)

* Update the homepage with ES6

* Avoid array spread and stale state

Rakefile

@@ -6,8 +6,8 @@ require('open-uri')
 desc "download babel-browser"
 task :fetch_remotes do
   IO.copy_stream(
-    open('https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js'),
-    'js/babel-browser.min.js'
+    open('https://unpkg.com/babel-standalone@6.15.0/babel.min.js'),
+    'js/babel.min.js'
   )
 end
 

_js/examples/hello.js

@@ -1,12 +1,13 @@
+var name = Math.random() > 0.5 ? 'Jane' : 'John';
 var HELLO_COMPONENT = `
-var HelloMessage = React.createClass({
-  render: function() {
+class HelloMessage extends React.Component {
+  render() {
     return <div>Hello {this.props.name}</div>;
   }
-});
+}
 
-ReactDOM.render(<HelloMessage name="John" />, mountNode);
-`;
+ReactDOM.render(<HelloMessage name="${name}" />, mountNode);
+`.trim();
 
 ReactDOM.render(
   <ReactPlayground codeText={HELLO_COMPONENT} />,

_js/examples/markdown.js

@@ -1,16 +1,21 @@
 var MARKDOWN_COMPONENT = `
-var MarkdownEditor = React.createClass({
-  getInitialState: function() {
-    return {value: 'Type some *markdown* here!'};
-  },
-  handleChange: function() {
+class MarkdownEditor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.state = {value: 'Type some *markdown* here!'};
+  }
+
+  handleChange() {
     this.setState({value: this.refs.textarea.value});
-  },
-  rawMarkup: function() {
+  }
+
+  getRawMarkup() {
     var md = new Remarkable();
     return { __html: md.render(this.state.value) };
-  },
-  render: function() {
+  }
+
+  render() {
     return (
       <div className="MarkdownEditor">
         <h3>Input</h3>
@@ -21,15 +26,15 @@ var MarkdownEditor = React.createClass({
         <h3>Output</h3>
         <div
           className="content"
-          dangerouslySetInnerHTML={this.rawMarkup()}
+          dangerouslySetInnerHTML={this.getRawMarkup()}
         />
       </div>
     );
   }
-});
+}
 
 ReactDOM.render(<MarkdownEditor />, mountNode);
-`;
+`.trim();
 
 ReactDOM.render(
   <ReactPlayground codeText={MARKDOWN_COMPONENT} />,

_js/examples/timer.js

@@ -1,26 +1,33 @@
 var TIMER_COMPONENT = `
-var Timer = React.createClass({
-  getInitialState: function() {
-    return {secondsElapsed: 0};
-  },
-  tick: function() {
-    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
-  },
-  componentDidMount: function() {
-    this.interval = setInterval(this.tick, 1000);
-  },
-  componentWillUnmount: function() {
+class Timer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {secondsElapsed: 0};
+  }
+
+  tick() {
+    this.setState((prevState) => ({
+      secondsElapsed: prevState.secondsElapsed + 1
+    }));
+  }
+
+  componentDidMount() {
+    this.interval = setInterval(() => this.tick(), 1000);
+  }
+
+  componentWillUnmount() {
     clearInterval(this.interval);
-  },
-  render: function() {
+  }
+
+  render() {
     return (
       <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
     );
   }
-});
+}
 
 ReactDOM.render(<Timer />, mountNode);
-`;
+`.trim();
 
 ReactDOM.render(
   <ReactPlayground codeText={TIMER_COMPONENT} />,

_js/examples/todo.js

@@ -1,41 +1,56 @@
 var TODO_COMPONENT = `
-var TodoList = React.createClass({
-  render: function() {
-    var createItem = function(item) {
-      return <li key={item.id}>{item.text}</li>;
-    };
-    return <ul>{this.props.items.map(createItem)}</ul>;
+class TodoApp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.state = {items: [], text: ''};
   }
-});
-var TodoApp = React.createClass({
-  getInitialState: function() {
-    return {items: [], text: ''};
-  },
-  onChange: function(e) {
-    this.setState({text: e.target.value});
-  },
-  handleSubmit: function(e) {
-    e.preventDefault();
-    var nextItems = this.state.items.concat([{text: this.state.text, id: Date.now()}]);
-    var nextText = '';
-    this.setState({items: nextItems, text: nextText});
-  },
-  render: function() {
+
+  render() {
     return (
       <div>
         <h3>TODO</h3>
         <TodoList items={this.state.items} />
         <form onSubmit={this.handleSubmit}>
-          <input onChange={this.onChange} value={this.state.text} />
+          <input onChange={this.handleChange} value={this.state.text} />
           <button>{'Add #' + (this.state.items.length + 1)}</button>
         </form>
       </div>
     );
   }
-});
+
+  handleChange(e) {
+    this.setState({text: e.target.value});
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    var newItem = {
+      text: this.state.text,
+      id: Date.now()
+    };
+    this.setState((prevState) => ({
+      items: prevState.items.concat(newItem),
+      text: ''
+    }));
+  }
+}
+
+class TodoList extends React.Component {
+  render() {
+    return (
+      <ul>
+        {this.props.items.map(item => (
+          <li key={item.id}>{item.text}</li>
+        ))}
+      </ul>
+    );
+  }
+}
 
 ReactDOM.render(<TodoApp />, mountNode);
-`;
+`.trim();
 
 ReactDOM.render(
   <ReactPlayground codeText={TODO_COMPONENT} />,

_js/live_editor.js

@@ -90,8 +90,14 @@ var ReactPlayground = React.createClass({
 
   getDefaultProps: function() {
     return {
-      transformer: function(code) {
-        return babel.transform(code).code;
+      transformer: function(code, options) {
+        var presets = ['react'];
+        if (!options || !options.skipES2015Transform) {
+          presets.push('es2015');
+        }
+        return Babel.transform(code, {
+          presets
+        }).code;
       },
       editorTabTitle: 'Live JSX Editor',
       showCompiledJSTab: true,
@@ -115,15 +121,15 @@ var ReactPlayground = React.createClass({
     this.setState({mode: mode});
   },
 
-  compileCode: function() {
-    return this.props.transformer(this.state.code);
+  compileCode: function(options) {
+    return this.props.transformer(this.state.code, options);
   },
 
   render: function() {
     var isJS = this.state.mode === this.MODES.JS;
     var compiledCode = '';
     try {
-      compiledCode = this.compileCode();
+      compiledCode = this.compileCode({skipES2015Transform: true});
     } catch (err) {}
 
     var JSContent =
@@ -201,13 +207,15 @@ var ReactPlayground = React.createClass({
     } catch (e) { }
 
     try {
-      var compiledCode = this.compileCode();
+      var compiledCode;
       if (this.props.renderCode) {
+        compiledCode = this.compileCode({skipES2015Transform: true});
         ReactDOM.render(
           <CodeMirrorEditor codeText={compiledCode} readOnly={true} />,
           mountNode
         );
       } else {
+        compiledCode = this.compileCode({skipES2015Transform: false});
         eval(compiledCode);
       }
     } catch (err) {

_layouts/default.html

@@ -36,7 +36,7 @@
   <script src="/react/js/jsx.js"></script>
   <script src="/react/js/react.js"></script>
   <script src="/react/js/react-dom.js"></script>
-  <script src="/react/js/babel-browser.min.js"></script>
+  <script src="/react/js/babel.min.js"></script>
   <script src="/react/js/live_editor.js"></script>
 </head>
 <body>