# REACT STRUCTURE

## Core technique

### I. JS
- React (16.8.4 + )
- [x] Can use hook
- Structure project
- [x] components (presentation component or stateless component)
- Only stateless component
- As small as possible
- [x] containers
- Can dispatchAction to store
- pass prop to UI components
- [x]React-router-dom
- [x] Using to redirect page in app
- [x] Structure
- [x] Has template page
- [x] Switch active to switch body or part of app base on routes
- Compatible with redux
- Compatible with test library
- [ ]Redux
- Using to manage state in whole project
- Should structure store, action, reducer base on best practice of redux
- refs:
- https://redux.js.org/recipes/configuring-your-store
- Setup redux-devtool-middleware to debug for dev environment
- [ ]Redux-thunk
- Using to handle middleware
- Has basic(standard ) actions to handle an action request from app to server
- [ ]React-redux
- Using to connect redux store into react component
- [x]Lodash
- Utilities to handle functionality and prevent minor bug from type

### II. CSS

- [x] Setup scss compiler in webpack
- [x]Add styled-components into project

### III. Test (extra)

- Setup test(using Jest) for redux, styled-components
- Setup for shallow test
- Setup nock to fake request

### IV. Editor env

- [x]setup eslint, stylelint

### IV. Deploy + git control (extra)

- [x] Setup husky + lintstage that making sure we won't push any bug into git
- [x] setup travis to for continous testing and deployment
- [x] Setup heroku or any server that can host project and link it to travis