├── .gitignore ├── README.md ├── lessons ├── 00-setup │ ├── App.js │ ├── index.html │ ├── instruction.html │ ├── main.js │ ├── package.json │ └── webpack.config.js ├── 01-intro │ ├── App.js │ ├── index.html │ └── main.js ├── 02-render │ ├── App.js │ ├── index.html │ └── main.js ├── 03-properties │ ├── App.js │ ├── index.html │ └── main.js ├── 04-state │ ├── App.js │ ├── index.html │ └── main.js ├── 05-owner-ownee │ ├── App.js │ ├── index.html │ └── main.js ├── 06-refs │ ├── App.js │ ├── index.html │ └── main.js ├── 07-child-properties │ ├── App.js │ ├── index.html │ └── main.js ├── 08-lifecycle-mounting │ ├── App.js │ ├── index.html │ └── main.js ├── 09-lifecycle-mounting-usage │ ├── App.js │ ├── index.html │ └── main.js ├── 10-lifecycle-updates │ ├── App.js │ ├── index.html │ └── main.js ├── 11-higher-order │ ├── App.js │ ├── index.html │ └── main.js ├── 12-composable │ ├── App.js │ ├── index.html │ └── main.js ├── 13-dynamic │ ├── App.js │ ├── index.html │ └── main.js ├── 14-build-compiler │ ├── App.js │ ├── index.html │ ├── main.js │ └── style.css ├── 15-jsx │ └── index.html ├── 16-precompile │ ├── dist.js │ ├── index.html │ ├── src.js │ └── style.css ├── 17-integration │ ├── App.js │ ├── index.html │ └── main.js ├── 18-devtools │ ├── App.js │ ├── index.html │ └── main.js ├── cloneElement │ ├── App.js │ ├── index.html │ └── main.js ├── events │ ├── App.js │ ├── index.html │ └── main.js ├── index.html ├── prop-validation │ ├── App.js │ ├── index.html │ └── main.js └── react-children │ ├── App.js │ ├── index.html │ └── main.js ├── package.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ```bash 2 | npm install 3 | npm start 4 | ``` 5 | 6 | open browser to http://localhost:3000 7 | -------------------------------------------------------------------------------- /lessons/00-setup/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | class App extends React.Component { 3 | render(){ 4 | return
Hi
5 | } 6 | } 7 | 8 | export default App 9 | -------------------------------------------------------------------------------- /lessons/00-setup/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Setup 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lessons/00-setup/instruction.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 |

index.html

10 | 
11 | <!DOCTYPE html>
12 | <html lang="en">
13 | <head>
14 |   <meta charset="UTF-8">
15 |   <title>Setup</title>
16 | </head>
17 | <body>
18 |   <div id="app"></div>
19 |   <script src="index.js"></script>
20 | </body>
21 | </html>
22 |
23 |

package.json

24 | 
25 | {
26 |   "name": "es6-react-setup",
27 |   "version": "1.0.0",
28 |   "main": "index.js",
29 |   "scripts": {
30 |       "start": "webpack-dev-server"
31 |   },
32 |   "author": "",
33 |   "license": "ISC",
34 |   "dependencies": {
35 |       "babel-core": "^6.2.1",
36 |       "babel-loader": "^6.2.0",
37 |       "babel-preset-es2015": "^6.1.18",
38 |       "babel-preset-react": "^6.1.18",
39 |       "react": "^0.14.3",
40 |       "react-dom": "^0.14.3"
41 |   },
42 |   "description": "Setup files for React in ES6 lessons"
43 | }
44 |
45 |

webpack.config.js

46 | 
47 | module.exports = {
48 |   entry: './main.js',
49 |   output: {
50 |     path: './',
51 |     filename: 'index.js'
52 |   },
53 |   devServer: {
54 |     inline: true,
55 |     port: 3333
56 |   },
57 |   module: {
58 |     loaders: [
59 |       {
60 |         test: /\.js$/,
61 |         exclude: /node_modules/,
62 |         loader: 'babel',
63 |         query: {
64 |           presets: ['es2015', 'react']
65 |         }
66 |       }
67 |     ]
68 |   }
69 | }
70 | 
71 |
72 |

App.js

73 | 
74 | import React from 'react';
75 | class App extends React.Component {
76 |   render(){
77 |     return <div>Hi</div>
78 |   }
79 | }
80 | 
81 | export default App
82 |
83 |

main.js

84 | 
85 | import React from 'react';
86 | import ReactDOM from 'react-dom';
87 | import App from './App';
88 | ReactDOM.render(<App />, document.getElementById('app'))
89 |
90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /lessons/00-setup/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | ReactDOM.render(, document.getElementById('app')) 5 | -------------------------------------------------------------------------------- /lessons/00-setup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "es6-react-setup", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "scripts": { 6 | "start": "webpack-dev-server" 7 | }, 8 | "author": "", 9 | "license": "ISC", 10 | "dependencies": { 11 | "babel-core": "^6.2.1", 12 | "babel-loader": "^6.2.0", 13 | "babel-preset-es2015": "^6.1.18", 14 | "babel-preset-react": "^6.1.18", 15 | "react": "^0.14.3", 16 | "react-dom": "^0.14.3" 17 | }, 18 | "description": "Setup files for React in ES6 lessons" 19 | } 20 | -------------------------------------------------------------------------------- /lessons/00-setup/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './main.js', 3 | output: { 4 | path: './', 5 | filename: 'index.js' 6 | }, 7 | devServer: { 8 | inline: true, 9 | port: 3333 10 | }, 11 | module: { 12 | loaders: [ 13 | { 14 | test: /\.js$/, 15 | exclude: /node_modules/, 16 | loader: 'babel', 17 | query: { 18 | presets: ['es2015', 'react'] 19 | } 20 | } 21 | ] 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /lessons/01-intro/App.js: -------------------------------------------------------------------------------- 1 | // https://jsbin.com/bakoniw/2/ 2 | 3 | import React from 'react'; 4 | 5 | class App extends React.Component { 6 | render(){ 7 | return

Hello Series

8 | } 9 | } 10 | 11 | //const App = () =>

Hello stateless

12 | 13 | export default App 14 | -------------------------------------------------------------------------------- /lessons/01-intro/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lesson 01 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lessons/01-intro/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | ReactDOM.render(, document.getElementById('app')); 5 | -------------------------------------------------------------------------------- /lessons/02-render/App.js: -------------------------------------------------------------------------------- 1 | //https://jsbin.com/mezuno/edit?js,output 2 | 3 | import React from 'react'; 4 | 5 | class App extends React.Component { 6 | render(){ 7 | return ( 8 |
9 |

Hello World

10 | Bold 11 |
12 | ); 13 | } 14 | } 15 | 16 | export default App 17 | -------------------------------------------------------------------------------- /lessons/02-render/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lesson 02 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lessons/02-render/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | ReactDOM.render(, document.getElementById('app')); 5 | -------------------------------------------------------------------------------- /lessons/03-properties/App.js: -------------------------------------------------------------------------------- 1 | // https://jsbin.com/yirifo/edit?html,js,output 2 | 3 | import React from 'react'; 4 | import ReactDOM from 'react-dom'; 5 | import PropTypes from 'prop-types' 6 | 7 | class App extends React.Component { 8 | render(){ 9 | let txt = this.props.txt 10 | return

{txt}

11 | } 12 | } 13 | App.propTypes = { 14 | txt: PropTypes.string, 15 | cat: PropTypes.number.isRequired 16 | } 17 | App.defaultProps ={ 18 | txt: 'this is the default txt' 19 | } 20 | ReactDOM.render( 21 | , 22 | document.getElementById('app') 23 | ); 24 | -------------------------------------------------------------------------------- /lessons/03-properties/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lesson 03 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lessons/03-properties/main.js: -------------------------------------------------------------------------------- 1 | import App from './App'; 2 | -------------------------------------------------------------------------------- /lessons/04-state/App.js: -------------------------------------------------------------------------------- 1 | // https://jsbin.com/zijoxu/edit?js,output 2 | 3 | import React from 'react'; 4 | 5 | class App extends React.Component { 6 | constructor(){ 7 | super(); 8 | this.state = { 9 | txt: 'this is the state txt', 10 | cat: 0 11 | } 12 | } 13 | update(e){ 14 | this.setState({txt: e.target.value}) 15 | } 16 | render(){ 17 | return ( 18 |
19 | 21 |

{this.state.txt} - {this.state.cat}

22 |
23 | ) 24 | } 25 | } 26 | 27 | export default App 28 | -------------------------------------------------------------------------------- /lessons/04-state/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lesson 01 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lessons/04-state/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | ReactDOM.render(, document.getElementById('app')); 5 | -------------------------------------------------------------------------------- /lessons/05-owner-ownee/App.js: -------------------------------------------------------------------------------- 1 | // https://jsbin.com/sokoje/2/edit 2 | 3 | import React from 'react'; 4 | 5 | class App extends React.Component { 6 | constructor(){ 7 | super(); 8 | this.state = { 9 | txt: 'this is the state text' 10 | } 11 | } 12 | update(e){ 13 | this.setState({txt: e.target.value}) 14 | } 15 | render(){ 16 | return ( 17 |
18 |

{this.state.txt}

19 | 20 | 21 | 22 |
23 | ) 24 | } 25 | } 26 | 27 | const Widget = (props) => 28 | 29 | 30 | export default App 31 | -------------------------------------------------------------------------------- /lessons/05-owner-ownee/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lesson 01 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lessons/05-owner-ownee/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | ReactDOM.render(, document.getElementById('app')); 5 | -------------------------------------------------------------------------------- /lessons/06-refs/App.js: -------------------------------------------------------------------------------- 1 | // https://jsbin.com/jilucuw/1/edit 2 | 3 | import React from 'react'; 4 | 5 | class App extends React.Component { 6 | constructor(){ 7 | super(); 8 | this.state = {a: '', b: ''} 9 | } 10 | update(){ 11 | this.setState({ 12 | a: this.a.refs.input.value, 13 | b: this.refs.b.value 14 | }) 15 | } 16 | render(){ 17 | return ( 18 |
19 | this.a = component} 21 | update={this.update.bind(this)} 22 | /> {this.state.a} 23 |
24 | {this.state.b} 29 |
30 | ) 31 | } 32 | } 33 | 34 | class Input extends React.Component { 35 | render(){ 36 | return
37 | } 38 | } 39 | 40 | export default App 41 | -------------------------------------------------------------------------------- /lessons/06-refs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lesson 01 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lessons/06-refs/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | ReactDOM.render(, document.getElementById('app')); 5 | -------------------------------------------------------------------------------- /lessons/07-child-properties/App.js: -------------------------------------------------------------------------------- 1 | // https://jsbin.com/cumopab/edit?js,output 2 | 3 | import React from 'react'; 4 | 5 | class App extends React.Component { 6 | render(){ 7 | return 8 | } 9 | } 10 | 11 | const Button = (props) => 12 | 13 | 14 | class Heart extends React.Component { 15 | render(){ 16 | return ♥ 17 | } 18 | } 19 | 20 | export default App 21 | -------------------------------------------------------------------------------- /lessons/07-child-properties/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lesson 07 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /lessons/07-child-properties/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | ReactDOM.render(, document.getElementById('app')); 5 | -------------------------------------------------------------------------------- /lessons/08-lifecycle-mounting/App.js: -------------------------------------------------------------------------------- 1 | // problematic in JsBin 2 | 3 | import React from 'react'; 4 | import ReactDOM from 'react-dom'; 5 | 6 | class App extends React.Component { 7 | constructor(){ 8 | super(); 9 | this.state = { val: 0 }; 10 | this.update = this.update.bind(this); 11 | } 12 | update(){ 13 | this.setState({val: this.state.val + 1 }) 14 | } 15 | componentWillMount(){ 16 | console.log('componentWillMount') 17 | } 18 | render(){ 19 | console.log('render') 20 | return 21 | } 22 | componentDidMount(){ 23 | console.log('componentDidMount') 24 | } 25 | componentWillUnmount(){ 26 | console.log('componentWillUnmount') 27 | } 28 | } 29 | 30 | class Wrapper extends React.Component { 31 | constructor(){ 32 | super(); 33 | } 34 | mount(){ 35 | ReactDOM.render(, document.getElementById('a')) 36 | } 37 | unmount(){ 38 | ReactDOM.unmountComponentAtNode(document.getElementById('a')) 39 | } 40 | render(){ 41 | return ( 42 |
43 | 44 | 45 |
46 |
47 | ) 48 | } 49 | } 50 | 51 | 52 | export default Wrapper 53 | -------------------------------------------------------------------------------- /lessons/08-lifecycle-mounting/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lesson 08 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lessons/08-lifecycle-mounting/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | ReactDOM.render(, document.getElementById('app')); 5 | -------------------------------------------------------------------------------- /lessons/09-lifecycle-mounting-usage/App.js: -------------------------------------------------------------------------------- 1 | // problematic in JsBin 2 | 3 | import React from 'react'; 4 | import ReactDOM from 'react-dom'; 5 | 6 | class App extends React.Component { 7 | constructor(){ 8 | super(); 9 | this.state = { val: 0 }; 10 | this.update = this.update.bind(this); 11 | } 12 | update(){ 13 | this.setState({val: this.state.val + 1 }) 14 | } 15 | componentWillMount(){ 16 | console.log('componentWillMount') 17 | this.setState({m: 2}) 18 | } 19 | render(){ 20 | console.log('render') 21 | return ( 22 | 25 | ) 26 | } 27 | componentDidMount(){ 28 | console.log('componentDidMount') 29 | this.inc = setInterval(this.update,500) 30 | } 31 | componentWillUnmount(){ 32 | console.log('componentWillUnmount'); 33 | clearInterval(this.inc) 34 | } 35 | } 36 | 37 | class Wrapper extends React.Component { 38 | constructor(){ 39 | super(); 40 | } 41 | mount(){ 42 | ReactDOM.render(, document.getElementById('a')) 43 | } 44 | unmount(){ 45 | ReactDOM.unmountComponentAtNode(document.getElementById('a')) 46 | } 47 | render(){ 48 | return ( 49 |
50 | 51 | 52 |
53 |
54 | ) 55 | } 56 | } 57 | 58 | 59 | export default Wrapper 60 | -------------------------------------------------------------------------------- /lessons/09-lifecycle-mounting-usage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lesson 09 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lessons/09-lifecycle-mounting-usage/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | ReactDOM.render(, document.getElementById('app')); 5 | -------------------------------------------------------------------------------- /lessons/10-lifecycle-updates/App.js: -------------------------------------------------------------------------------- 1 | // https://jsbin.com/deliwe/edit?js,console,output 2 | 3 | import React from 'react'; 4 | import ReactDOM from 'react-dom'; 5 | 6 | class App extends React.Component { 7 | constructor(){ 8 | super(); 9 | this.state = {increasing: false} 10 | } 11 | update(){ 12 | ReactDOM.render( 13 | , 14 | document.getElementById('root')) 15 | } 16 | componentWillReceiveProps(nextProps){ 17 | this.setState({increasing: nextProps.val > this.props.val}) 18 | } 19 | shouldComponentUpdate(nextProps, nextState) { 20 | return nextProps.val % 5 === 0; 21 | } 22 | render(){ 23 | console.log(this.state.increasing) 24 | return ( 25 | 28 | ) 29 | } 30 | componentDidUpdate(prevProps, prevState) { 31 | console.log(`prevProps: ${prevProps.val}`) 32 | } 33 | } 34 | 35 | App.defaultProps = {val: 0} 36 | 37 | export default App 38 | -------------------------------------------------------------------------------- /lessons/10-lifecycle-updates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lesson 10 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lessons/10-lifecycle-updates/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | ReactDOM.render(, document.getElementById('root')); 5 | -------------------------------------------------------------------------------- /lessons/11-higher-order/App.js: -------------------------------------------------------------------------------- 1 | // https://jsbin.com/boxoso/edit?js,output 2 | 3 | import React from 'react'; 4 | 5 | const HOC = (InnerComponent) => class extends React.Component { 6 | constructor(){ 7 | super(); 8 | this.state = {count: 0} 9 | } 10 | update(){ 11 | this.setState({count: this.state.count + 1}) 12 | } 13 | componentWillMount(){ 14 | console.log('will mount') 15 | } 16 | render(){ 17 | return ( 18 | 23 | ) 24 | } 25 | } 26 | 27 | class App extends React.Component { 28 | render(){ 29 | return ( 30 |
31 | 32 |
33 | label 34 |
35 | ) 36 | } 37 | } 38 | 39 | const Button = HOC((props) => 40 | 41 | ) 42 | 43 | class Label extends React.Component { 44 | componentWillMount(){ 45 | console.log('label will mount') 46 | } 47 | render(){ 48 | return ( 49 | 52 | ) 53 | } 54 | } 55 | 56 | const LabelHOC = HOC(Label) 57 | 58 | export default App 59 | -------------------------------------------------------------------------------- /lessons/11-higher-order/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lesson 11 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lessons/11-higher-order/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | ReactDOM.render(, document.getElementById('app')); 5 | -------------------------------------------------------------------------------- /lessons/12-composable/App.js: -------------------------------------------------------------------------------- 1 | // https://jsbin.com/yiboxe/edit?js,output 2 | 3 | import React from 'react'; 4 | import ReactDOM from 'react-dom'; 5 | class App extends React.Component { 6 | constructor(){ 7 | super(); 8 | this.state = { 9 | red: 0 10 | } 11 | this.update = this.update.bind(this) 12 | } 13 | update(e){ 14 | this.setState({ 15 | red: ReactDOM.findDOMNode(this.refs.red.refs.inp).value 16 | }) 17 | } 18 | render(){ 19 | return ( 20 |
21 | 29 |
30 | ); 31 | } 32 | } 33 | 34 | class NumInput extends React.Component { 35 | render(){ 36 | let label = this.props.label !== '' ? 37 | : '' 38 | return ( 39 |
40 | 47 | {label} 48 |
49 | ); 50 | } 51 | } 52 | 53 | NumInput.propTypes = { 54 | min: React.PropTypes.number, 55 | max: React.PropTypes.number, 56 | step: React.PropTypes.number, 57 | val: React.PropTypes.number, 58 | label: React.PropTypes.string, 59 | update: React.PropTypes.func.isRequired, 60 | type: React.PropTypes.oneOf(['number', 'range']) 61 | } 62 | 63 | NumInput.defaultProps = { 64 | min: 0, 65 | max: 0, 66 | step: 1, 67 | val: 0, 68 | label: '', 69 | type: 'range' 70 | } 71 | 72 | 73 | export default App 74 | -------------------------------------------------------------------------------- /lessons/12-composable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lesson 12 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lessons/12-composable/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | ReactDOM.render(, document.getElementById('app')); 5 | -------------------------------------------------------------------------------- /lessons/13-dynamic/App.js: -------------------------------------------------------------------------------- 1 | // https://jsbin.com/qubonu/1/edit?js,output 2 | import React from 'react'; 3 | class App extends React.Component { 4 | constructor(){ 5 | super(); 6 | this.state = {items: []} 7 | } 8 | componentWillMount(){ 9 | fetch( 'https://swapi.co/api/people/?format=json' ) 10 | .then( response => response.json() ) 11 | .then( ({results: items}) => this.setState({items})) 12 | } 13 | filter(e){ 14 | this.setState({filter: e.target.value}) 15 | } 16 | render(){ 17 | let items = this.state.items; 18 | if(this.state.filter){ 19 | items = items.filter( item => 20 | item.name.toLowerCase() 21 | .includes(this.state.filter.toLowerCase())) 22 | } 23 | return ( 24 |
25 | 27 | {items.map(item => 28 | )} 29 |
30 | ) 31 | } 32 | } 33 | 34 | const Person = (props) =>

{props.person.name}

35 | 36 | export default App 37 | -------------------------------------------------------------------------------- /lessons/13-dynamic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lesson 13 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lessons/13-dynamic/main.js: -------------------------------------------------------------------------------- 1 | // https://jsbin.com/qubonu/edit?js,output 2 | 3 | import React from 'react'; 4 | import ReactDOM from 'react-dom'; 5 | import App from './App'; 6 | ReactDOM.render(, document.getElementById('app')); 7 | -------------------------------------------------------------------------------- /lessons/14-build-compiler/App.js: -------------------------------------------------------------------------------- 1 | // https://jsbin.com/qonaga/edit?js,output 2 | 3 | import React from 'react'; 4 | 5 | class App extends React.Component { 6 | constructor(){ 7 | super(); 8 | this.state = { 9 | input: '/* add your jsx here */', 10 | output: '', 11 | err: '' 12 | } 13 | } 14 | update(e){ 15 | let code = e.target.value; 16 | try { 17 | this.setState({ 18 | output: window.Babel 19 | .transform(code, { presets: ['es2015', 'react']}) 20 | .code, 21 | err: '' 22 | }) 23 | } 24 | catch(err){ 25 | this.setState({err: err.message}) 26 | } 27 | } 28 | render(){ 29 | return ( 30 |
31 |
{this.state.err}
32 |
33 |