udemyで勉強しているReact、React Nativeついてメモをとっていく、まだ始めたばかりなので、追記していく予定

最短で学ぶReactとReduxの基礎から実践まで

• github
  • https://github.com/muratayusuke/udemy_react
• 動画
  • https://www.udemy.com/react-redux-from-beginning/

The Complete React Native and Redux Course

• github　
  • https://github.com/StephenGrider/ReactNativeReduxCasts
• 動画　
  • https://www.udemy.com/the-complete-react-native-and-redux-course/

Reduxの勉強

• mapStateToProps
  • Store が持つ状態 state をどのように props に混ぜ込むかを決める
• mapDispatchToProps
  • Reducer にアクションを通知する関数 dispatch をどのように props に混ぜ込むかを決める
• 参考サイト
  • Redux入門【ダイジェスト版】10分で理解するReduxの基礎
  • たぶんこれが一番分かりやすいと思います React + Redux のフロー図解
  • redux-sagaで非同期処理と戦う
  • reduxで非同期処理をするいくつかの方法（redux-thunk、redux-saga）
• 参考アプリ
  • React-Native-Apps
• エラー
  • React NativeでiOS実行時に”CFBundleIdentifier Does Not Exist”となってしまう場合の対処

「最短で学ぶReactとReduxの基礎から実践まで」で実装したアプリ

• 進捗にあわせてセクションごとにブランチを作成した。APIは、.envファイルに設定(GoogleMap、Rakuten)
• TypeScriptにも変換してみた
• https://github.com/ka-yamao/udemy_react

初めに

• section3-22 から Google マップを使います。GoogleAPI キーが必要となります。
• GoogleAPI キーの取得方法は以下が参考になるかと思います。
  • https://maps.multisoup.co.jp/blog/2967/
• section3-29 から楽天トラベルの API を使います。あらかじめ、API キーを取得しておきます。
  • https://webservice.rakuten.co.jp/app/create
  • https://webservice.rakuten.co.jp/api/simplehotelsearch/

API キーについて

• 勉強したソースコードを Github で公開してますが、API キーのべた書きはよくないので、このリポジトリでは「.env」ファイルに設定しました。動画での設定方法と少しことなります。

• .env ファイルを作成方法
  cp .env.sample .env

GOOGLE_MAP_API_KEY=Google の API キーを設定
RAKUTEN_APP_ID=楽天の API ID を設定

• dotenvのパッケージで.envの内容を読み込んで使ってます。

ブランチ

• 動画の各セクション、ユニットごとでブランチを切ってます。途中見逃したソースなどあれば参考に使ってください。

React Router ドキュメント

• React Router

TypeScript について

• TypeScript を学習中で、セクションの区切りで TypeScrip 変換バージョンのブランチ（末尾に「-ts」がついてるブランチ）もあります。お作法もあいまいなまま実装。