├── .eslintrc
├── .gitignore
├── LICENSE
├── README.md
├── demo
    ├── index.html
    └── index.jsx
├── index.jsx
├── package.json
├── src
    ├── components
    │   ├── CartItem.jsx
    │   └── Comp.jsx
    ├── index.jsx
    └── index.scss
└── webpack.config.js


/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "root": true,
3 |   "parser": "babel-eslint",
4 |   "extends": "airbnb",
5 |   "rules": {
6 |     "constructor-super": "error"
7 |   }
8 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | node_modules/
3 | 
4 | npm-debug.log


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Weiwei SUN
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-es6-tutorial [![Dependency Status][daviddm-image]][daviddm-url]
 2 | 
 3 | A React tutorial project writing with ES6 and stage-0 features. You can reading the series via:
 4 | 
 5 | - [Part I: Setup the environment](http://wwsun.github.io/posts/react-with-es6-part-1.html)
 6 | - [Part II: Props and State](http://wwsun.github.io/posts/react-with-es6-part-2.html)
 7 | - [Part III: Function bind](http://wwsun.github.io/posts/react-with-es6-part-3.html)
 8 | - [Part IV: HOC and Mixin](http://wwsun.github.io/posts/react-with-es6-part-4.html)
 9 | 
10 | ## Dependencies
11 | 
12 | - node 4.x (prefer LTS)
13 | - npm 3.x (don't use 2.x)
14 | - react 15.x
15 | - [seu](https://github.com/wwsun/seu) 0.x (latest version)
16 | 
17 | ## Running
18 | 
19 | 1. Clone or download the project
20 | 2. In your local folder, install project dependencies via `npm install`
21 | 3. Run `npm start` to start the [seu](https://github.com/wwsun/seu) service
22 | 4. Open the browser to visit `http://localhost:3000/demo` to check the results
23 | 
24 | ## Structure
25 | 
26 | ```bash
27 | - demo              // display your app
28 | - src
29 |     - components    // your app components
30 |     - index.jsx     // your app root
31 | - index.jsx         // your app export entry
32 | - webpack.config.js // your custome webpack configs
33 | ```
34 | 
35 | ## Docs
36 | 
37 | 1. Compile entry:
38 | 
39 |    Setup the webpack compile entry by `entry.index` in the `package.json`.
40 | 
41 | 2. [SEU](https://github.com/wwsun/seu) is a light weight tool set to help you create, build, watch, lint your React components.
42 | 
43 |     Using `seu`, you can write react codes with `es6`, `stage-0` features by default.
44 | 
45 | 3. If you want to config webpack, such as adding SASS support, you should follow this [doc](http://ant-tool.github.io/webpack-config.html).
46 | 
47 |     Because [atool-build](https://github.com/ant-tool/atool-build) is depended in the SEU package, therefore,
48 | 
49 | ## Read more about React.js:
50 | 
51 | - Data processing:
52 |     - [The evolution of Flux frameworks](https://medium.com/@dan_abramov/the-evolution-of-flux-frameworks-6c16ad26bb31#.90lamiv5l)
53 |     - Getting to know [Redux](https://github.com/rackt/redux) | [Video](https://egghead.io/series/getting-started-with-redux)
54 |     - Keeping your state flat: [normalizr](https://github.com/gaearon/normalizr)
55 |     - Trying [isomorphic-fetch](https://www.npmjs.com/package/isomorphic-fetch) to communicate with APIs
56 | - Immutable state:
57 |     - [Immutable objects](https://en.wikipedia.org/wiki/Immutable_object)
58 |     - Trying [immutable.js](https://facebook.github.io/immutable-js/)
59 |     - Reding Lee Byron's [Immutable data and react](https://www.youtube.com/watch?v=I7IdS-PbEgI)
60 | - Router:
61 |     - Trying [react-router](https://github.com/rackt/react-router)
62 |     - In redux, you can use [redux-simple-router](https://github.com/rackt/redux-simple-router)
63 |     - Code splitting, lazy loading: using webpack
64 |     - Getting to know: [HTTP/2 multiplexed](https://http2.github.io/faq/#why-is-http2-multiplexed)
65 |     - Combining with [chunk hashing](https://christianalfoni.github.io/react-webpack-cookbook/Optimizing-caching.html) you can also optimize your cache hit ratio after code changes.
66 |     - Reading Ryan Florence's [Welcome to Future of Web Application Delivery](https://medium.com/@ryanflorence/welcome-to-future-of-web-application-delivery-9750b7564d9f#.vuf3e1nqi)
67 | - Components:
68 |     - Using JSX: [JSX looks like an abomination - but it's good for you](https://medium.com/javascript-scene/jsx-looks-like-an-abomination-1c1ec351a918#.ca28nvee6)
69 |     - Using ES6 Class, extends `React.Component`
70 |     - Using [High Order Components](http://jamesknelson.com/structuring-react-applications-higher-order-components/) to replace mixins
71 |     - [Mixin is dead](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750)
72 |     - Checking `propTypes`
73 | - Tests
74 |     - Component testing: trying AirBnB's [enzyme](https://github.com/airbnb/enzyme)
75 |     - Assertion library: [chai-enyzime](https://github.com/producthunt/chai-enzyme)
76 |     - Redux testing: async actions testing [redux-mock-store](https://www.npmjs.com/package/redux-mock-store)
77 |     - [Redux testing in depth](http://rackt.org/redux/docs/recipes/WritingTests.html)
78 | - Bundle
79 |     - Reading: [Reduce your bundle.js file size by doing this one thing](https://lacke.mn/reduce-your-bundle-js-file-size/)
80 |     - Getting to know more about [Webpack](https://christianalfoni.github.io/react-webpack-cookbook)
81 |     - Component-level hot reload: [react-transform-boilerplate](https://github.com/gaearon/react-transform-boilerplate)
82 | - Linters
83 |     - Force linters: [pre-push](https://www.npmjs.com/package/pre-push) or [pre-commit](https://www.npmjs.com/package/pre-commit)
84 |     - Javascript Standard Style with [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react)
85 | - [The Elm Architecutre](https://github.com/evancz/elm-architecture-tutorial/)
86 | 
87 | ## References:
88 | 
89 | 1. [React.js Best Practices for 2016](https://blog.risingstack.com/react-js-best-practices-for-2016/) 
90 | | [CN](http://insights.thoughtworkers.org/react-js-best-practices-for-2016/)
91 | 
92 | 
93 | [daviddm-image]: https://david-dm.org/wwsun/react-es6-tutorial.svg?theme=shields.io
94 | [daviddm-url]: https://david-dm.org/wwsun/react-res6-tutorial


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>React with ES6 Tutorial</title>
 6 | </head>
 7 | <body>
 8 | 
 9 | <h1>React with ES6</h1>
10 | <div id="react-app"></div>
11 | 
12 | <script src="./common.js"></script>
13 | <script src="./index.js"></script>
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/demo/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from '../index.jsx';
 4 | 
 5 | const order = {
 6 |   title: 'Fresh fruits package',
 7 |   image: 'http://7xpv9g.com1.z0.glb.clouddn.com/fruit-image.jpg',
 8 |   initialQty: 3,
 9 |   price: 8,
10 | };
11 | 
12 | ReactDOM.render(<App {...order} />, document.getElementById('react-app'));
13 | 


--------------------------------------------------------------------------------
/index.jsx:
--------------------------------------------------------------------------------
1 | import App from './src/index.jsx';
2 | 
3 | export default App;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-es6-tutorial",
 3 |   "version": "2.3.0",
 4 |   "description": "A React tutorial with ES6",
 5 |   "entry": {
 6 |     "index": "./demo/index.jsx"
 7 |   },
 8 |   "dependencies": {
 9 |     "react": "^15.0.1",
10 |     "react-dom": "^15.0.1"
11 |   },
12 |   "devDependencies": {
13 |     "babel-eslint": "^6.0.4",
14 |     "eslint": "^2.10.1",
15 |     "eslint-config-airbnb": "^9.0.1",
16 |     "eslint-plugin-babel": "^3.2.0",
17 |     "eslint-plugin-import": "^1.6.1",
18 |     "eslint-plugin-jsx-a11y": "^1.0.4",
19 |     "eslint-plugin-react": "^5.0.1",
20 |     "node-sass": "^3.7.0",
21 |     "sass-loader": "^3.2.0",
22 |     "seu": "^0.6.2",
23 |     "style-loader": "^0.13.1"
24 |   },
25 |   "scripts": {
26 |     "start": "npm run dev",
27 |     "dev": "seu server",
28 |     "lint": "seu lint",
29 |     "precommit": "eslint `git diff HEAD --name-only --diff-filter=ACMRTU | awk '/\\.(js|jsx)$/' | awk -v path=$(git rev-parse --show-toplevel)/ '{print path$1}' ORS=' '`"
30 |   },
31 |   "repository": {
32 |     "type": "git",
33 |     "url": "git+https://github.com/wwsun/react-es6-tutorial.git"
34 |   },
35 |   "keywords": [
36 |     "react",
37 |     "es6",
38 |     "react with es6"
39 |   ],
40 |   "author": "Weiwei SUN",
41 |   "license": "MIT",
42 |   "bugs": {
43 |     "url": "https://github.com/wwsun/react-es6-tutorial/issues"
44 |   },
45 |   "homepage": "https://github.com/wwsun/react-es6-tutorial#readme"
46 | }
47 | 


--------------------------------------------------------------------------------
/src/components/CartItem.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react';
 2 | 
 3 | /**
 4 |  * Component CartItem
 5 |  *  which used to display a cart item
 6 |  *
 7 |  *  props: 由父组件传递给子组件
 8 |  *  state: 组件自身负责管理, 凡是在运行时需要修改的数据一定是state
 9 |  */
10 | class CartItem extends React.Component {
11 | 
12 |   static propTypes = {
13 |     title: PropTypes.string,
14 |     image: PropTypes.string,
15 |     price: PropTypes.number,
16 |     initialQty: PropTypes.number,
17 |   };
18 | 
19 |   static defaultProps = {
20 |     title: 'undefined',
21 |     image: '',
22 |     price: 0,
23 |   };
24 | 
25 |   constructor(props, context) {
26 |     super(props, context);
27 |     this.state = {
28 |       qty: this.props.initialQty,
29 |       total: 0,
30 |     };
31 |   }
32 | 
33 |   componentWillMount() {
34 |     this.recalculateTotal();
35 |   }
36 | 
37 |   // private
38 |   increaseQty() {
39 |     this.setState({ qty: this.state.qty + 1 }, this.recalculateTotal);
40 |   }
41 | 
42 |   // private
43 |   decreaseQty() {
44 |     this.setState({ qty: this.state.qty - 1 }, this.recalculateTotal);
45 |   }
46 | 
47 |   // private
48 |   recalculateTotal() {
49 |     this.setState({ total: this.state.qty * this.props.price });
50 |   }
51 | 
52 |   render() {
53 |     const { title, image, price } = this.props;
54 | 
55 |     return (
56 |       <aricle>
57 |         <figure>
58 |           <p><img src={image} alt="product" /></p>
59 |           <figcaption><h2>{title}</h2></figcaption>
60 |         </figure>
61 | 
62 |         <p><strong>Quantity: {this.state.qty}</strong></p>
63 | 
64 |         <p>
65 |           <button onClick={::this.increaseQty} className="btn btn-primary">+</button>
66 |           <button onClick={::this.decreaseQty} className="btn btn-danger">-</button>
67 |         </p>
68 | 
69 |         <p><strong>Price per item:</strong> ${price}</p>
70 | 
71 |         <h3>Total: ${this.state.total}</h3>
72 |       </aricle>);
73 |   }
74 | }
75 | 
76 | export default CartItem;
77 | 


--------------------------------------------------------------------------------
/src/components/Comp.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | /**
 4 |  * This is a demo component,
 5 |  *  which used to show what the component structure is.
 6 |  */
 7 | const Comp = () => (<div>I am a lovely react component!</div>);
 8 | 
 9 | export default Comp;
10 | 


--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import CartItem from './components/CartItem.jsx';
 3 | import Comp from './components/Comp.jsx';
 4 | 
 5 | import './index.scss';
 6 | 
 7 | // export default class App extends React.Component {
 8 | //
 9 | //   render() {
10 | //     return (
11 | //       <div>
12 | //         <Comp />
13 | //         <CartItem {...this.props} />
14 | //       </div>
15 | //     );
16 | //   }
17 | // }
18 | 
19 | // todo: write your own components
20 | // todo: combine your components here
21 | const App = function App(props) {
22 |   return (
23 |     <div className="main-content">
24 |       <Comp />
25 |       <CartItem {...props} />
26 |     </div>
27 |   );
28 | };
29 | 
30 | export default App;
31 | 


--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
 1 | $btn-color-success: #4caf50;
 2 | $btn-color-danger: #f44336;
 3 | 
 4 | .main-content {
 5 | 
 6 |     margin: 0 auto;
 7 |     width: 900px;
 8 |     border: 2px solid green;
 9 |     text-align: center;
10 | 
11 |     .btn {
12 |         display: inline-block;
13 |         background: white;
14 |         color: black;
15 |         padding: 15px 32px;
16 |         text-align: center;
17 |         text-decoration: none;
18 |         font-size: 16px;
19 |         transition-duration: 0.4s;
20 |         margin: 5px;
21 | 
22 |         &:hover {
23 |             color: white;
24 |         }
25 |     }
26 | 
27 |     .btn-primary {
28 |         border: 2px solid $btn-color-success;
29 |         &:hover {
30 |             background: $btn-color-success;
31 |         }
32 |     }
33 | 
34 |     .btn-danger {
35 |         border: 2px solid $btn-color-danger;
36 |         &:hover {
37 |             background:  $btn-color-danger;
38 |         }
39 |     }
40 | 
41 | }


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = webpackConfig => {
 2 |   webpackConfig.babel.plugins.push('antd');
 3 | 
 4 |   webpackConfig.module.loaders.unshift(
 5 |     {
 6 |       test: /\.jsx?/,
 7 |       exclude: /node_modules/,
 8 |       loader: 'babel',
 9 |       query: { presets: ['es2015', 'react', 'stage-0'] },
10 |     },
11 |     {
12 |       test: /\.scss?/,
13 |       loaders: ['style', 'css', 'sass'],
14 |     }
15 |   );
16 | 
17 |   return webpackConfig;
18 | };
19 | 


--------------------------------------------------------------------------------