react-es6-tutorial

A React tutorial project writing with ES6 and stage-0 features. You can reading the series via:

• Part I: Setup the environment
• Part II: Props and State
• Part III: Function bind
• Part IV: HOC and Mixin

Dependencies

• node 4.x (prefer LTS)
• npm 3.x (don't use 2.x)
• react 15.x
• seu 0.x (latest version)

Running

1. Clone or download the project
2. In your local folder, install project dependencies via npm install
3. Run npm start to start the seu service
4. Open the browser to visit http://localhost:3000/demo to check the results

Structure

- demo              // display your app
- src
    - components    // your app components
    - index.jsx     // your app root
- index.jsx         // your app export entry
- webpack.config.js // your custome webpack configs

Docs

1. Compile entry:

   Setup the webpack compile entry by entry.index in the package.json.

2. SEU is a light weight tool set to help you create, build, watch, lint your React components.

   Using seu, you can write react codes with es6, stage-0 features by default.

3. If you want to config webpack, such as adding SASS support, you should follow this doc.

   Because atool-build is depended in the SEU package, therefore,

Read more about React.js:

• Data processing:
  • The evolution of Flux frameworks
  • Getting to know Redux | Video
  • Keeping your state flat: normalizr
  • Trying isomorphic-fetch to communicate with APIs
• Immutable state:
  • Immutable objects
  • Trying immutable.js
  • Reding Lee Byron's Immutable data and react
• Router:
  • Trying react-router
  • In redux, you can use redux-simple-router
  • Code splitting, lazy loading: using webpack
  • Getting to know: HTTP/2 multiplexed
  • Combining with chunk hashing you can also optimize your cache hit ratio after code changes.
  • Reading Ryan Florence's Welcome to Future of Web Application Delivery
• Components:
  • Using JSX: JSX looks like an abomination - but it's good for you
  • Using ES6 Class, extends React.Component
  • Using High Order Components to replace mixins
  • Mixin is dead
  • Checking propTypes
• Tests
  • Component testing: trying AirBnB's enzyme
  • Assertion library: chai-enyzime
  • Redux testing: async actions testing redux-mock-store
  • Redux testing in depth
• Bundle
  • Reading: Reduce your bundle.js file size by doing this one thing
  • Getting to know more about Webpack
  • Component-level hot reload: react-transform-boilerplate
• Linters
  • Force linters: pre-push or pre-commit
  • Javascript Standard Style with eslint-plugin-react
• The Elm Architecutre

References:

1. React.js Best Practices for 2016 | CN