From 7b10b2b88d2ad29bc42b6628010146a37b27c233 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 4 Oct 2016 19:33:09 +0100 Subject: [PATCH] Update the homepage with ES6 (#7868) * Update the homepage with ES6 * Avoid array spread and stale state --- README.md | 6 ++-- docs/Rakefile | 4 +-- docs/_js/examples/hello.js | 11 +++--- docs/_js/examples/markdown.js | 29 +++++++++------- docs/_js/examples/timer.js | 37 +++++++++++--------- docs/_js/examples/todo.js | 63 ++++++++++++++++++++++------------- docs/_js/live_editor.js | 20 +++++++---- docs/_layouts/default.html | 2 +- 8 files changed, 104 insertions(+), 68 deletions(-) diff --git a/README.md b/README.md index 366c7d39eacf0..2bba0361d328a 100644 --- a/README.md +++ b/README.md @@ -13,11 +13,11 @@ React is a JavaScript library for building user interfaces. We have several examples [on the website](https://facebook.github.io/react/). Here is the first one to get you started: ```js -var HelloMessage = React.createClass({ - render: function() { +class HelloMessage extends React.Component { + render() { return
Hello {this.props.name}
; } -}); +} ReactDOM.render( , diff --git a/docs/Rakefile b/docs/Rakefile index d50dc5b1023a1..7a9872b7c057b 100644 --- a/docs/Rakefile +++ b/docs/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 diff --git a/docs/_js/examples/hello.js b/docs/_js/examples/hello.js index bab86329c6981..16f7f1a4094b0 100644 --- a/docs/_js/examples/hello.js +++ b/docs/_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
Hello {this.props.name}
; } -}); +} -ReactDOM.render(, mountNode); -`; +ReactDOM.render(, mountNode); +`.trim(); ReactDOM.render( , diff --git a/docs/_js/examples/markdown.js b/docs/_js/examples/markdown.js index 8ec68ac670c31..696074cd658df 100644 --- a/docs/_js/examples/markdown.js +++ b/docs/_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 (

Input

@@ -21,15 +26,15 @@ var MarkdownEditor = React.createClass({

Output

); } -}); +} ReactDOM.render(, mountNode); -`; +`.trim(); ReactDOM.render( , diff --git a/docs/_js/examples/timer.js b/docs/_js/examples/timer.js index af9ebbd8af7ec..3d8cfc4c60d07 100644 --- a/docs/_js/examples/timer.js +++ b/docs/_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 (
Seconds Elapsed: {this.state.secondsElapsed}
); } -}); +} ReactDOM.render(, mountNode); -`; +`.trim(); ReactDOM.render( , diff --git a/docs/_js/examples/todo.js b/docs/_js/examples/todo.js index cc7c979c30e39..eaac631decb94 100644 --- a/docs/_js/examples/todo.js +++ b/docs/_js/examples/todo.js @@ -1,41 +1,56 @@ var TODO_COMPONENT = ` -var TodoList = React.createClass({ - render: function() { - var createItem = function(item) { - return
  • {item.text}
  • ; - }; - return
      {this.props.items.map(createItem)}
    ; +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 (

    TODO

    - +
    ); } -}); + + 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 ( +
      + {this.props.items.map(item => ( +
    • {item.text}
    • + ))} +
    + ); + } +} ReactDOM.render(, mountNode); -`; +`.trim(); ReactDOM.render( , diff --git a/docs/_js/live_editor.js b/docs/_js/live_editor.js index 27b4c81af1360..134cae5b86b15 100644 --- a/docs/_js/live_editor.js +++ b/docs/_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( , mountNode ); } else { + compiledCode = this.compileCode({skipES2015Transform: false}); eval(compiledCode); } } catch (err) { diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index d42b8b1572928..a3a44a53aa663 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -36,7 +36,7 @@ - +