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
- node 4.x (prefer LTS)
- npm 3.x (don't use 2.x)
- react 15.x
- seu 0.x (latest version)
- Clone or download the project
- In your local folder, install project dependencies via
npm install
- Run
npm start
to start the seu service - Open the browser to visit
http://localhost:3000/demo
to check the results
- 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
-
Compile entry:
Setup the webpack compile entry by
entry.index
in thepackage.json
. -
SEU is a light weight tool set to help you create, build, watch, lint your React components.
Using
seu
, you can write react codes withes6
,stage-0
features by default. -
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,
- 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