ReactNative

[changtimwu]

official

• even official scaffold tool create-react-native-app generates code containing expo.
  • all the on devicedeploy targets are actually running through the expo app.
• expo and eject
  • it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app.
  • perform reject

others

• reactnative app generator
  • cli: https://github.com/infinitered/ignite
  • typescript boilerplate: https://github.com/aerian-studios/ignite-typescript-boilerplate
• nativebase https://github.com/GeekyAnts/NativeBase

[changtimwu]

react redux typescript static typing guide https://github.com/piotrwitek/react-redux-typescript-guide

[changtimwu]

looks good https://github.com/airbnb/lottie-react-native

[changtimwu]

about statex https://github.com/rintoj/statex/tree/master/examples/todo-react-ts

• 把 AppState 訂好, Action 也定義好, 純資料 資料結構(type)訂好就好, 不用加上相關操作
• 在UI(TSX) 裡直接 new 出該action 後dispatch, store 寫法對的話( decorator, action binding), 會觸動相對應 reduce function, 裡面寫該如何 mutate AppState.

four roles

• state: state value and type. data only
• action: just define action and its correspondent parameters. You can think it as message.
  • the same idea as redux's action. Remember that actions only describe the fact that something happened. but don't describe how the application's state changes.
  • statex's represent action with class so it can define action and its creator(factory) at once.
• store: define how each action mutant app states.
  • It looks like reducer in redux Reducers specify how the application's state changes in response to actions sent to the store.
  • constraints of writing functions here are equivalent to redux's reducer. Returning new state instead of mutating original state.
• app(actually UI/TSX/ReactComponent):
  • define the conversion from app state to component props with @data
  • use @inject on the React.Componet rendering the state. You can access the state through this.props
  • trig actions on related event

[changtimwu]

• https://github.com/piotrwitek/react-redux-typescript-webpack-starter -- terrible! not recommend
• https://github.com/piotrwitek/react-redux-typescript-guide abundant redux!!

[changtimwu]

mobx

• state types are defined in model
  • model is a class. It can have member functions.
• state values are in store.
  • store has reference state values in its internal state. This is done by @observable.
• actions are in store defined with store method decorated with @action
• state reading can be done with store class functions
  • add @computed if this operation doesn't have the observable state changed.
  • add get if you want to access them like variable

basic points

• index -> App ->(header, footer, todo-list)
• App 也是 component type, 但是不太可能被 reuse, 所以放在 container 底下
• Provider tag 用 store 當 props, 想像成, 被Provider包起來的 component instance, 都可以引用 store.
• component 可以透過 props 存取到 store, mobx 做的,
  • Provider 傳 store instance 下去,
  • 用 @inject() + @observer 在 app component 前
  • 下面, 每一層再決定要把 store 抽哪些出來傳下去, 甚至可以傳 action (store method)下去, 如果那個 component 只需要這個操作.
• prop 得 type casting 要如何減少? 常要 redefine store type partially

some trace points

• TodoTextInput

  const { todos, ...actions } = // 除了 todos, 其餘都是 actions

  <TodoList todos={filteredTodos}
        completeAll={todoStore.completeAll}
        deleteTodo={todoStore.deleteTodo}
        editTodo={todoStore.editTodo} />

MST

• https://github.com/mobxjs/mobx-state-tree
• The type information is designed in such a way that it is used both at design- and run-time to verify type correctness , 雖然第一眼看重複了 typescript, 但其實是可合併用.
  • 仔細讀 https://github.com/mobxjs/mobx-state-tree#typescript--mst
  • enable noImplicitThis and strictNullChecks in tsconfig.json
• 關於 mutable 的解釋, Although mutable sounds scary to some, fear not: actions have many interesting properties. By default trees can only be modified by using an action that belongs to the same subtree. Furthermore, actions are replayable and can be used to distribute changes (example).

[changtimwu]

http://eddychang.me/blog/16-javascript/45-spread-operator-rest-parameters.html

let aobj={a:1,b:2}
let dobj={g:'yes', ...aobj}
console.log(dobj)
//{ g: 'yes', a: 1, b: 2 }
let alist=[7,9,8]
let clist=[1,2,...alist]
console.log(clist)
// [ 1, 2, 7, 9, 8 ]

• 想像是 source code 原地展開
• 有 object.copy() or object.assign({}, yourobj) 的效果. 目的是強制產生 copy, 避免 mutate original state

[changtimwu]

run on iOS device

https://facebook.github.io/react-native/docs/running-on-device.html

• plug iphone to MAC with USB
• In xcode, open the project.xcode under the ios sub-directory
• setup the signing to build the project. please note you have to sign the test target. or it won't deploy.

[changtimwu]

Acceptance test for RN https://calaba.sh/