React redux practice

Implement targets

Frameworks

• React
• webpack
• webpack devServer
• ESLint
• babel-eslint
• React hot loader
• Redux
• react-redux
• redux-thunk
• redux-observable
• RxJs
• react-router
• react-router-redux
• redux-devtools-extension
• whatwg-fetch
• Jest
• eslint-plugin-jest

Infrastructure

• Async action to fetch json data.(redux-thunk, fetch api)
• Devide logic in reducer / action / constant.
• Hot-module-replacement for component.(React-hot-loader)
• Hot-module-replacement for reducer.
• Eslint can accept rule of Object Rest / Spread operator.
• Eslint can accept class decorator.(babel-eslint)
• Webpack config file devide from production / development.

Global services

• Implement global service for detecting window layout change events (ex: rotate, view size change...).
• Theme change.
• Implement view size chnage to state.
• Fix view rotate detect.
• Detect user browser to state.(bowser)
• Scroll bar controll to state.
• Header auto collapse.
• Scroll to top action.(should not be a action for current app.)

Timer

• Endless Timer component.
• Timer trigger fetching data for synchronization in schedule.
• Timer component implement pause / run feature.
• Let timer should be a part of global service.
• Timer use different time span to count down in different view.
• Change view trigger timer reset.
• Refresh page should let timer know current page and get right time span.
• Trigger current page module update only.

Counter

• Simple counter component.
• Copy counter component.
• When fetching data is not first time, it can compare it selfs and show different color(better or worse).(data structure in reducer, css)
• Resolve after first time compare data, css will not change will cause color show be display.(change to use js solution, replace css solution)

Router

• Router handle url changing events.(react-router)
• Router url change with action like redux.(react-router-redux)
• Implement component to get routing parameter as props.(route rule setting)
• Resolve when we stay in some router url and refresh website, it should be not show 404 not found.(devServer historyApiFallback: true)
• Router link to a page and be redirect to another page.(browserHistory.push)
• Implement language path in router.
• 404 not found component in router.
• need Authertication component in router.

High-order component

• simple HOC.(enhancerFunction(Component))
• HOC as class decorator.(@enhancer)
• When view is changed, show loading screen.

Unit-test

• Using Jest framework.
• Run Jest test script.
• Resolve Jest API warning in eslint.(eslint-plugin-jest)
• Test reducer's simple scenario.(reducer(state, actionObject))
• Test all reducer sync action on expected.
• All unit test's input and output should be fixed.
• Code coverage report.
• Test result report.
• Test sync action will return object.
• Refactor unit-test folder structure.
• Test all reducers async action.
• Test current location changed action.
• Test React Component.

Form validation

• Simple form.
• Form validation.

i18n

• Implement i18n solution.
• Simple i18n example.
• Translate class decorator.
• Determine current language by url parameter.
• Set language-location as my language code in lower-case.
• any module / component can use its own localization file.

Others

• Browser detecting change to implement by myself.(remove bowser lib)
• Use Container-Pattern to refactor my large component.(App Component)
• Prepare package.json production dependency script for CI build, eslint and report.
• Upgrade Webpack to v2.
• Upgrade React to 15.5 version. Using current v15.3, because v15.5 in Windows 7 OS will have some troubles. (prepare for React-Fiber)
• Upgrade React-Router to v4 version.
• Upgrade React-Router-Redux to v5 version.
• React universal
• Adjust dependency and devDependency.

Dependencies

1. webpack
2. webpack-dev-server
3. babel-cli
4. babel-loader
5. babel-preset-es2015
6. babel-preset-react
7. babel-preset-stage-0
8. react
9. react-dom
10. react-hot-loader
11. redux
12. react-redux
13. redux-devtools-extension
14. redux-thunk redux-observable
15. react-router
16. react-router-redux
17. whatwg-fetch
18. eslint
19. babel-eslint
20. babel-plugin-transform-decorators-legacy
21. jest
22. eslint-plugin-jest
23. RxJs

Some solution will help in future.

1. react-lazyload
2. chrome-react-perf

Start with base repository

• Use my react-webpack-practice repository.

References

• Redux: React Counter Example by Dan Abramov
• Redux DevTools Extension