Install flow

brew update
brew install flow
yarn add flow-bin -D

Use flow with vscode

1. 安裝 vscode ESLint 套件
2. 設定 .eslintrc
3. 安裝需要 package

ref

Use flow with babel/webpack/react

ref

// 使用 flow-typed 指令安裝第三方套件可以讓你定義他們的 interface
yarn global add flow-typed
// ex. flow-typed install rxjs@5.0.x

TODO List

enviroment config

• 可使用 flow

• React

• 可使用 Redux

• 可使用 Reselect

• Redux-thunk

• 可使用 ImmutableJS

• Ant-Design

• Ant-Design custom theme

• Mock API (使用 mock-json-server)

• Axios

• Ramda

• dayjs

• reducer helper

• React Router with Dynamic imports

• react-router-redux 目的就是要把react-router 的history 跟store 互相同步, 也就是說store 裡面會有router 的狀態

• persistence state

• react-motion

• chart

• favicon

• localStorage

• 強制在指定檔案加上 /* @flow */ 字段，並且 git hook 檢查，如果指定的檔案沒有 @flow 不給 push

• webpack alias

• duck pattern

• ajax middleware

• eslint

• git hook

• 可使用 decorator React.js 用 @decorator 來裝飾你的 Component 吧！ – Larry・Blog

• 可使用 async await Webpack 4 与 Babel/preset-env 升级不完全指南 · Issue #14 · zchen9/code · GitHub Await Off My Shoulders: Enabling Async/Await in Webpack | CodingItWrong

Webpack Goal

• 1. debug 容易
• 2. 打包速度快
• 3. 写 scss
• 4. chunk 模式
• 5. 分离 development, production 配置 login-flow/makewebpackconfig.js at master · mxstbr/login-flow · GitHub
• 6. 添加 .env 参数
• 7. webpack dynamic imports

Folder Structure

. |-- dist/ |-- mockAPI/ (fake api generator) |-- src/ |-- assets/ 靜態資源 |-- components/ (dump components, antd custom components) |-- containers/ (pages, smart components) |-- libs/ (第三方套件庫) |-- middleware/ |-- router/ |-- scripts/ (可執行的 nodejs file or bash file) |-- store/ |-- utils/ |-- main.js