[React Native]Getting Start

這幾天面試了很多間公司，每間要求的資料都很多，常常搞到12點都沒時間寫日記，今天早上花2小時來了解React Native的文件吧

Step1
安裝Expo到自己的電腦裡面, command: npm install -g expo-cli

Step2
用Expo建立一個React Native的專案, command: expo init ProjectName
功能等同於 angular cli command: ng new ProjectName

Step3
接著就用熟悉的開發工具打開,npm start就可以模擬上線的結果, 要模擬系統執行在android或ios的裝置上的話，必須做以下這N件事情:
3-1. 安裝Expo client在要模擬的手機上(android&ios的client端)
3-2. 讓這支手機和電腦連到同一個網域
3-3. 用這支手機直接掃描Server提供的QR code, 即可看到執行結果

[Day11]React - run on redux

今天將redux整個串聯起來。
source code: https://github.com/ShawnTseng/react-for-fun/commit/2cbcf515971365909734ee67f07dbeef40ffbbf5

[Day10]Redux: Action, Middleware

Q: Action是什麼?
A: 規範所有改變資料的行為
Q: 改變資料的行為有哪些?
A:可分為"同步"和"非同步"

• 同步(reducer可處理): 接收到Action就對應到特定的處理方式

• 非同步(thunk): 接收到Action等待資料回傳

Q: 要在什麼時候將Action分類並且用適合的方式處理

A: 透過Middleware分類

src:

https://github.com/ShawnTseng/react-for-fun/commit/9e05f026f42d3c1ba99d96205726bfedeac572f9

https://github.com/ShawnTseng/react-for-fun/commit/a5185d5bf791de385ca45c9723bf4857c555a577

[Day9]redux初探 - reducer實作

Flux這個單向資料流的解決了很多資料同步的問題，最致命的缺點在於Store這個角色承擔了二個職責:

1. 儲存資料狀態
2. 根據Action改變資料狀態

因此Redux主要的目的就是將上述兩者拆開，拆法如下:

1. 儲存資料狀態=>用狀態樹紀錄(一個應用程式只會有一個Store，裡面包含多個State)
2. 改變資料狀態=>用Reducer解決 (Reducer概念源於Elm architecture)

整體改變:

1.Store從多個變成一個，因為被多個State和Reducer取代，原本的Store概念變成所有State集合的地方。

2.因為1.，所以就不需要Dispatcher來分配Action到Store，因為只有一個Store，因此移除Dispatcher

3.加入Reducer的概念管理資料變更

source code:

https://github.com/ShawnTseng/react-for-fun/commit/b0d325de9e4a26fbf2f4b0fc8a167845d2bbd0a6

https://github.com/ShawnTseng/react-for-fun/commit/f4bea26a2dad81f5ead9f6d930f0d8f5801ff5a5

[Day8]Flux Utils應用

Flux Utils

目的: 用更簡單的寫法實現Flux中Store的邏輯

作法: extends Flux Utils 中的 ReduceStore

ReduceStore API文件: https://facebook.github.io/flux/docs/flux-utils.html#reducestore-t

source code: https://github.com/ShawnTseng/react-for-fun/commit/2bee9924a00eed7a437fbea7d777220103986118

 心得: 寫法真的方便很多, 不過要花一些時間成本讀API文件

[Day7]react.js Container Pattern

使用目的:
        實現關注點分離、符合單一職責原則
使用結果:
        和Store、Action邏輯放入Container, UI邏輯放在原本的Component中
練習code:
https://github.com/ShawnTseng/react-for-fun/commit/8ed1a9f001acc77ac04f47a230c8e528a656d194

註記: Design Pattern在使用時，要特別注意是否達到目的，Design Pattern不是用越多越好

[Day6]react.js中 Flux概念理解

Flux簡言之，就是一種單向資料流的設計模式(Design Pattern)，主要想要解決的問題是資料一致性，在這個設計模式中，主要有四種角色: Action、Dispatcher、Store、View

Action

定義系統的所有行為，例如增刪修查資料(CRUD)、登入登出等。

Dispatcher

將Action告訴Store(有註冊的才通知)

Store

儲存商務邏輯、資料，只能取得(get)資料，不能變更(set)資料

View

渲染(Render)畫面，並且監聽使用者的操作，例如Click。

好處顯而易見，以關注點分離的面向而言，各個角色各司其職，提高資料的一致性。真的有點複雜，要實際寫過才能內化。

[Day5]用VS Code對react.js不友善

Github: https://github.com/ShawnTseng/react-for-fun/commit/8388043fd166323872cab7aa17bfe8028a3b7981

今天假日用自己的筆電開啟vscode寫react，排版時(Shift + Alt + F)，整個亂掉無法執行，因此作了以下調整：
1.安裝套件
npm install babel-eslint eslint-plugin-jsx-a11y eslint-plugin-react --save-dev
npm install prettier-eslint --save-dev
2.設定vscode/settings.json

// Format a file on save.

// A formatter must be available,

// the file must not be auto-saved,

// and editor must not be shutting down.

"editor.formatOnSave": true,

// Enable/disable default JavaScript formatter (For Prettier)

"javascript.format.enable": false,

// Use 'prettier-eslint' instead of 'prettier'.

// Other settings will only be fallbacks

// in case they could not be inferred from eslint rules.

"prettier.eslintIntegration": true

3.將副檔名js改成jsx
3-1.匯入檔案時的副檔名也要記得改

[Day4]React 練習

原始碼: https://github.com/ShawnTseng/react-for-fun

Angular學得滿完整的，在自學react的過程中，有非常多概念可以共用，目前把 React的 props, state, Component開發, validate, CRUD實作過了。
目前進入到Flux整個概念的了解與熟悉。

參考資料:
https://github.com/shiningjason/react-quick-tutorial