@samitouri / QOS-React / commits / 7b10b2b88d

Update the homepage with ES6 (#7868)

* Update the homepage with ES6 * Avoid array spread and stale state

Dan Abramov committed Oct 4, 2016 at 19:33 UTC 7b10b2b88d2ad29bc42b6628010146a37b27c233
8 files changed +104 -68
README.md
+3 -3
@@ -13,11 +13,11 @@ React is a JavaScript library for building user interfaces.
13 We have several examples [on the website](https://facebook.github.io/react/). Here is the first one to get you started:
14
15 ```js
16 -var HelloMessage = React.createClass({
17 - render: function() {
16 +class HelloMessage extends React.Component {
17 + render() {
18 return <div>Hello {this.props.name}</div>;
19 }
20 -});
20 +}
21
22 ReactDOM.render(
23 <HelloMessage name="John" />,
docs/Rakefile
+2 -2
@@ -6,8 +6,8 @@ require('open-uri')
6 desc "download babel-browser"
7 task :fetch_remotes do
8 IO.copy_stream(
9 - open('https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js'),
10 - 'js/babel-browser.min.js'
9 + open('https://unpkg.com/babel-standalone@6.15.0/babel.min.js'),
10 + 'js/babel.min.js'
11 )
12 end
13
docs/_js/examples/hello.js
+6 -5
@@ -1,12 +1,13 @@
1 +var name = Math.random() > 0.5 ? 'Jane' : 'John';
2 var HELLO_COMPONENT = `
2 -var HelloMessage = React.createClass({
3 - render: function() {
3 +class HelloMessage extends React.Component {
4 + render() {
5 return <div>Hello {this.props.name}</div>;
6 }
6 -});
7 +}
8
8 -ReactDOM.render(<HelloMessage name="John" />, mountNode);
9 -`;
9 +ReactDOM.render(<HelloMessage name="${name}" />, mountNode);
10 +`.trim();
11
12 ReactDOM.render(
13 <ReactPlayground codeText={HELLO_COMPONENT} />,
docs/_js/examples/markdown.js
+17 -12
@@ -1,16 +1,21 @@
1 var MARKDOWN_COMPONENT = `
2 -var MarkdownEditor = React.createClass({
3 - getInitialState: function() {
4 - return {value: 'Type some *markdown* here!'};
5 - },
6 - handleChange: function() {
2 +class MarkdownEditor extends React.Component {
3 + constructor(props) {
4 + super(props);
5 + this.handleChange = this.handleChange.bind(this);
6 + this.state = {value: 'Type some *markdown* here!'};
7 + }
8 +
9 + handleChange() {
10 this.setState({value: this.refs.textarea.value});
8 - },
9 - rawMarkup: function() {
11 + }
12 +
13 + getRawMarkup() {
14 var md = new Remarkable();
15 return { __html: md.render(this.state.value) };
12 - },
13 - render: function() {
16 + }
17 +
18 + render() {
19 return (
20 <div className="MarkdownEditor">
21 <h3>Input</h3>
@@ -21,15 +26,15 @@ var MarkdownEditor = React.createClass({
26 <h3>Output</h3>
27 <div
28 className="content"
24 - dangerouslySetInnerHTML={this.rawMarkup()}
29 + dangerouslySetInnerHTML={this.getRawMarkup()}
30 />
31 </div>
32 );
33 }
29 -});
34 +}
35
36 ReactDOM.render(<MarkdownEditor />, mountNode);
32 -`;
37 +`.trim();
38
39 ReactDOM.render(
40 <ReactPlayground codeText={MARKDOWN_COMPONENT} />,
docs/_js/examples/timer.js
+22 -15
@@ -1,26 +1,33 @@
1 var TIMER_COMPONENT = `
2 -var Timer = React.createClass({
3 - getInitialState: function() {
4 - return {secondsElapsed: 0};
5 - },
6 - tick: function() {
7 - this.setState({secondsElapsed: this.state.secondsElapsed + 1});
8 - },
9 - componentDidMount: function() {
10 - this.interval = setInterval(this.tick, 1000);
11 - },
12 - componentWillUnmount: function() {
2 +class Timer extends React.Component {
3 + constructor(props) {
4 + super(props);
5 + this.state = {secondsElapsed: 0};
6 + }
7 +
8 + tick() {
9 + this.setState((prevState) => ({
10 + secondsElapsed: prevState.secondsElapsed + 1
11 + }));
12 + }
13 +
14 + componentDidMount() {
15 + this.interval = setInterval(() => this.tick(), 1000);
16 + }
17 +
18 + componentWillUnmount() {
19 clearInterval(this.interval);
14 - },
15 - render: function() {
20 + }
21 +
22 + render() {
23 return (
24 <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
25 );
26 }
20 -});
27 +}
28
29 ReactDOM.render(<Timer />, mountNode);
23 -`;
30 +`.trim();
31
32 ReactDOM.render(
33 <ReactPlayground codeText={TIMER_COMPONENT} />,
docs/_js/examples/todo.js
+39 -24
@@ -1,41 +1,56 @@
1 var TODO_COMPONENT = `
2 -var TodoList = React.createClass({
3 - render: function() {
4 - var createItem = function(item) {
5 - return <li key={item.id}>{item.text}</li>;
6 - };
7 - return <ul>{this.props.items.map(createItem)}</ul>;
2 +class TodoApp extends React.Component {
3 + constructor(props) {
4 + super(props);
5 + this.handleChange = this.handleChange.bind(this);
6 + this.handleSubmit = this.handleSubmit.bind(this);
7 + this.state = {items: [], text: ''};
8 }
9 -});
10 -var TodoApp = React.createClass({
11 - getInitialState: function() {
12 - return {items: [], text: ''};
13 - },
14 - onChange: function(e) {
15 - this.setState({text: e.target.value});
16 - },
17 - handleSubmit: function(e) {
18 - e.preventDefault();
19 - var nextItems = this.state.items.concat([{text: this.state.text, id: Date.now()}]);
20 - var nextText = '';
21 - this.setState({items: nextItems, text: nextText});
22 - },
23 - render: function() {
9 +
10 + render() {
11 return (
12 <div>
13 <h3>TODO</h3>
14 <TodoList items={this.state.items} />
15 <form onSubmit={this.handleSubmit}>
29 - <input onChange={this.onChange} value={this.state.text} />
16 + <input onChange={this.handleChange} value={this.state.text} />
17 <button>{'Add #' + (this.state.items.length + 1)}</button>
18 </form>
19 </div>
20 );
21 }
35 -});
22 +
23 + handleChange(e) {
24 + this.setState({text: e.target.value});
25 + }
26 +
27 + handleSubmit(e) {
28 + e.preventDefault();
29 + var newItem = {
30 + text: this.state.text,
31 + id: Date.now()
32 + };
33 + this.setState((prevState) => ({
34 + items: prevState.items.concat(newItem),
35 + text: ''
36 + }));
37 + }
38 +}
39 +
40 +class TodoList extends React.Component {
41 + render() {
42 + return (
43 + <ul>
44 + {this.props.items.map(item => (
45 + <li key={item.id}>{item.text}</li>
46 + ))}
47 + </ul>
48 + );
49 + }
50 +}
51
52 ReactDOM.render(<TodoApp />, mountNode);
38 -`;
53 +`.trim();
54
55 ReactDOM.render(
56 <ReactPlayground codeText={TODO_COMPONENT} />,
docs/_js/live_editor.js
+14 -6
@@ -90,8 +90,14 @@ var ReactPlayground = React.createClass({
90
91 getDefaultProps: function() {
92 return {
93 - transformer: function(code) {
94 - return babel.transform(code).code;
93 + transformer: function(code, options) {
94 + var presets = ['react'];
95 + if (!options || !options.skipES2015Transform) {
96 + presets.push('es2015');
97 + }
98 + return Babel.transform(code, {
99 + presets
100 + }).code;
101 },
102 editorTabTitle: 'Live JSX Editor',
103 showCompiledJSTab: true,
@@ -115,15 +121,15 @@ var ReactPlayground = React.createClass({
121 this.setState({mode: mode});
122 },
123
118 - compileCode: function() {
119 - return this.props.transformer(this.state.code);
124 + compileCode: function(options) {
125 + return this.props.transformer(this.state.code, options);
126 },
127
128 render: function() {
129 var isJS = this.state.mode === this.MODES.JS;
130 var compiledCode = '';
131 try {
126 - compiledCode = this.compileCode();
132 + compiledCode = this.compileCode({skipES2015Transform: true});
133 } catch (err) {}
134
135 var JSContent =
@@ -201,13 +207,15 @@ var ReactPlayground = React.createClass({
207 } catch (e) { }
208
209 try {
204 - var compiledCode = this.compileCode();
210 + var compiledCode;
211 if (this.props.renderCode) {
212 + compiledCode = this.compileCode({skipES2015Transform: true});
213 ReactDOM.render(
214 <CodeMirrorEditor codeText={compiledCode} readOnly={true} />,
215 mountNode
216 );
217 } else {
218 + compiledCode = this.compileCode({skipES2015Transform: false});
219 eval(compiledCode);
220 }
221 } catch (err) {
docs/_layouts/default.html
+1 -1
@@ -36,7 +36,7 @@
36 <script src="/react/js/jsx.js"></script>
37 <script src="/react/js/react.js"></script>
38 <script src="/react/js/react-dom.js"></script>
39 - <script src="/react/js/babel-browser.min.js"></script>
39 + <script src="/react/js/babel.min.js"></script>
40 <script src="/react/js/live_editor.js"></script>
41 </head>
42 <body>