---
# System prepended metadata

title: REACT STRUCTURE

---

# 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