概要
『速習 React』読書メモ に続き、2冊目のReact教本を読み進めた際の読書メモです。
上記の本で基礎を押さえていたのでサクサク読めましたが、逆に本書が1冊目だったら少し大変だったかもしれません。
所要時間は約18時間でした。(後半の2割程度はCordovaの話なので、それを除けば15時間程度)
ローカルストレージやMaterial-UIの話もあり、ちょっとしたアプリなら作れるようになった気がします。
書籍概要
- 書籍名：ReactでTodoアプリを作ってみよう
- 著者 ：kenpapa
- 発刊日：2018/10/21
- 頁数 ：358ページ
- 備考 ：Kindle版のみ
環境構築
Android Studio・Cordova
-
Android Studioをインストール後に環境変数を設定する（Android Platform Guide - Apache Cordova）
- JAVA_HOME
- JDKの場所確認：
$ /usr/libexec/java_home - 環境変数への追加：
$ export JAVA_HOME=(上で確認した値)- 永続化させる場合は
~/.bash_profileなり/.zshrcなりに記述する（以降も同様）
- 永続化させる場合は
- 追加確認：
$ echo $JAVA_HOME
- JDKの場所確認：
- ANDROID_HOME
- Android SDKの場所確認：Android Studio起動 → Preferences → 「Android SDK」で検索 → Android SDK Location
- 環境変数への追加：
$ export ANDROID_HOME=(上で確認した値) - 追加確認：
$ echo $ANDROID_HOME
- PATH
- 環境変数への追加：
$ export PATH=${PATH}:(ANDROID_HOMEの値)/platform-tools:/(ANDROID_HOMEの値)/tools - 追加確認：
$ echo $PATH
- 環境変数への追加：
- JAVA_HOME
-
JDKバージョンの変更（cordova checking java jdk and android sdk versionsエラーが出た場合）
- Cordova向けにJDKを再インストール - Qiita
-
MacのBrewで複数バージョンのJavaを利用する + jEnv - Qiita
$ brew tap homebrew/cask-versions$ brew cask install adoptopenjdk8
-
Gradleのインストール（ビルド時にGradleがないと怒られた場合）
$ brew install gradle
読書ノート
React全般
-
JSのフレームワークには大きく分けて「クライアント」で動作するものと「サーバ」で動作するものがある
- ReactやVueやAngular等はクライアントで動作するもの
- Express等はサーバで動作するもの
コンポーネントで管理できるメリットは、アプリの規模が大きくなった際にコンポーネントを増やせば対応できること
JSXでは
classの代わりにclassNameを使う必要がある（classはJSの予約語だから）-
Reactにはデータバインディングの仕組みがあり、テンプレートとロジックの連携をフレームワークが自動的に行なってくれる
- 一方向のデータバインディング：データが変更されるとUIが変更される
- 双方向のデータバインディング：上に加えて、UIの変更または操作に応じてデータが変更される
-
export default：「そのファイルのデフォルトとして後ろに続くものをexportする」という意味 valueまたはdefaultValue属性とonEvent属性の両方を使用することで、双方向データバインディングが可能
親子間のデータ受け渡し
-
親コンポーネントから子コンポーネントにデータを渡す場合
- 親：
<Child xxx={データ} yyy={データ} ...></Child> - 子：
var1 = this.props.xxx, var2 = this.props.yyy, ...
- 親：
-
子コンポーネントから親コンポーネントにデータを渡す場合
- 親：
<Child bbb={親のメソッド}></Child> - 子：
this.props.bbb(データ)
- 親：
ルーティング
-
ルーティングでページ遷移を行う方法はテンプレートで行う方法とロジックで行う方法の2通りがある
- テンプレートで行う方法：
<Link to="path">リンク名</Link> - ロジックで行う方法：
this.props.history.push('path');
- テンプレートで行う方法：
-
ルーティングにはHistoryモードとHashモードの2つのモードがある
- Historyモード：BrowserRouterをインポートして使う
- Hashモード：HashRouterをインポートして使う（URLに「#」が含まれる）
-
Webサーバ上で起動した際のルーティング方法による違い
- Historyモード：FQDN以外のページでリロードした際に404が返される（その場合は適当な画面に遷移させる等の処理が必要）
- Hashモード：FQDN以外のページでリロードしても404は返されない（あくまでルートのURLは変わっていないから）
ローカルストレージ
- ローカルストレージの使用方法
- データ保存：
localStorage.setItem('key', 'value'); - データ取得：
localStorage.getItem('key'); - データ保存（複数）：
localStorage.setItem('key', JSON.stringify(複数データ)); - データ取得（複数）：
const value = JSON.parse(localStorage.getItem('key'));
- データ保存：
Material-UI
-
Material-UIの
variant属性の指定-
<Typography variant="title">という記述があるが、現バージョンではvariantにtitleは指定不可- 代わりに
h5辺りを指定すると良い感じになる（Typography API - Material-UI）
- 代わりに
- 同様に
<Button variant="fab">も現バージョンでは指定不可- 代わりに
contained辺りを指定する（Button API - Material-UI）
- 代わりに
-
-
Material-UIの
<ListItem>のkey設定-
<ListItem key={i}>という記述があるが、このままだと「リストの子要素には一意のキーを設定すべき」というWarningが出る-
<ListItem>の親要素の<div>に<div key={i}>のようにキーを設定するとWarningは消える- 配列をmapした結果をreturnする際は、最上位の要素のキーを設定する必要がある？（未確認）
- Lists and Keys – React
-
-
Cordova
CordovaでReactアプリを動かす場合はルーティングモードはHashモードにしておく
-
$ cordova run android実行時に「No target specified and no devices found, deploying to emulator」から進まない問題の対応- Android StudioでAPIバージョンを下げたAVDを作り直したらいけた（理由は気になるが今回はとりあえずスルー）