React web app structure.
Install yarn and run
yarnyarn start- React: https://reactjs.org/.
- React-Router: https://reacttraining.com/react-router/web/example/basic.
- Redux: http://redux.js.org/.
- Saga: https://github.com/redux-saga/redux-saga.
- Reselect: https://github.com/reactjs/reselect.
- CSS - Inline styles with https://github.com/Khan/aphrodite.
ESLint with eslint-config-airbnb.
We can use two tools:
Use extension for redux, https://github.com/zalmoxisus/redux-devtools-extension.
https://github.com/infinitered/reactotron.
Helps to build components independently: https://storybook.js.org/basics/quick-start-guide/.
Generate a new dumb component / HOC Component (that has access to state)/ redux duck (actions/reducers) by using redux-cli
npm install -g redux-cliAfter installing, we can:
- generate duck file
redux g duck <name>- generate container (smart) component
redux g smart <name>- generate dumb component
redux g dumb <name>- duck-modular-redux: https://github.com/erikras/ducks-modular-redux
- smart vs dumb components: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
- Container components (containers folder): connect with redux store and dispatch actions to sagas or reducers.
- Dumb components (components folder): mainly describe UI, base on props, which are passed from container.
- Reducers (store/reducers folder): Receive actions (from sagas or containers) and return new state.
- Sagas (store/sagas folder): Listen actions from containers, handle side-effect (example: call remote api) and dispatch actions back to reducers.
- Selectors with Reselect (store/selectors folder): compute derived data from state, allowing Redux to store the minimal possible state (from Reselect documentation) and memorize data, avoid containers to re-render needlessly.
- update storybook.
- flow type checking.