はじめに
タイトル通りReact /Reduxの知識を付けたかったので購入してみました。
またWindowsではうまく環境構築できなかったので、今回はMacで作りました。
※登記時は環境構築後からの備忘録です。
✅環境
Mac/Docker
✅教材
💻React/ReduxでGoogleカレンダー風カレンダーアプリケーションを作ろう
コミットが章ごとになっている。親切！！
🤔この教材ではクラスコンポーネントではなく関数型コンポーネントになっているのがポイント！！
💻早く・それなりの UI を実現する React コンポーネントセット 16
Reactではどうやらmaterial-uiが一番定番ぽい。
開発を進めるにあたって
アプリ制作する上でいくつか前提となるコマンドがあるのでまとめ。
・Dockerは起動させておく。
※ルートディレクトリ
docker-compose up -d
http://localhost:8080 ※http://127.0.0.1:8080
・開発は基本./front以下で行い自動ビルドさせておく。
cd front nom run watch
基本的にビルド(jsxをjsファイルにトランスパイル)されるとファイルはbundle.jsとなる。
・reduxのサーバーを起動する(2章以降は不要)
cd redux-sample npm start
http://127.0.0.1:8081 ※開発環境によって変動
※一章ではさらに自動ビルドさせておく
cd redux-sample npm run watch
1章 Reduxの説明
✅ディレクトリ構造
📁src
- index.js
- 📁redux
- 📁components
📁redux
- rootReducer.js：すべてのレデューサーをまとめる(combineReducers()活用)
- 📁count
📁count
- reducer.js：レデューサー
- actions.js：アクション
- constants.js：アクションタイプ
📁components/Counter
- countainer.jsx：ロジックに責任を持つコンポーネント
- presentation.jsx：表示にだけ責任を持つコンポーネント
※一つのコンポーネントは一つのことにだけ関心をもつべきというオブジェクト試行の考え方に基づいている。
🙄App.jsではなくindex.jsでAppを定義して、Counterコンポーネントを読み込んでいるのが印象的です。
✅記法に関して
mapStateProps
store からどの state を引っ張ってくるかを定義
const mapStateProps = ({ count }) => ({ count });
引数は分割代入でcount変数にprops.countが代入されている。何度もpropsを書かなくて済むので簡潔になる。
※以下は省略前
const mapStateProps = state => {
return { count: state.count };
};
オブジェクトのプロパティのキー名と値の変数名が等しい場合、値を省略できるES6の省略記法の応用。
参考：オブジェクトリテラルのプロパティ/メソッドのいろんな書き方（ES6版）
mapDispatchProps
どんな dispatcher を props に渡すかを定義
const mapDispatchProps = dispatch => ({
increment: count => {
dispatch(increment(count));
},
decrement: count => {
dispatch(decrement(count));
}
});
本編
2章 UIを整える
※2章終了時点の画面
✅ライブラリ
・Day.jsのインストール
npm install --save dayjs
・MaterialUIのインストール
npm install --save @material-ui/core @material-ui/icons
・コマンドによるサブディレクトリ含めた作成
mkdir -p src/components/CalendarBoard
✅ファイル構成
ライブラリはsrc/index.jsxにまとめる。※実行ファイルなので初期化時必ず呼ばれるため。
ロジックはservices/calendar.js
３章 Reduxの導入/Date pickerの実装
reducerは状態管理に責任を持つべきなので、詳細なロジックを記載していない。
combineReducersの引数は、{[state名]: [reducer]}で対応づけしている。
container は redux からの state と redux に dispatch する関数を props として提供するためのコンポーネント
４章 予定追加のdialogを実装
🤔正直、material-uiによる独自タグの実装が多くて純粋なReactの学習している感は薄い。が、実際の開発もこんな感じで応用的な開発しかないのだから、このウェイトでの開発にも早く慣れたい。
※5−4:終えた時点で画面が真っ白に。。。
6章 非同期&APIの実装
Reduxには非同期処理機能がないのでredux-thunkというmiddlewareを使用。
npm i redux-thunk
curlコマンドでJSONデータをPOSTしてる。
curl -X POST "localhost:8080/api/schedules/create-test-data"
7章 UX向上
バリデーション処理、エラーの表示、hoverによるボタンの機能説明、confirmによる誤動作の対処
おわりに
※2-3まで終えた。
想像以上に難しい。。。
.jsxファイルと.jsファイルの違い。
6/3追記
5−4まで終えて画面が真っ白になってしまったので、再度見直す。
Reduxの実装に加えてmaterial-uiによる実装の説明が多く、理解するのに難易度が結構高めなので他のチュートリアルでしっかりReduxの理解ができたのち再挑戦するでもよいかもしれない。
いずれにせよかなり深いところまで触れてくれていて何度も見返したい教材◎
コメントを残す