React chobi

「 React/ReduxでGoogleカレンダー風カレンダーアプリケーションを作ろう」やってみた

はじめに

タイトル通りReact /Reduxの知識を付けたかったので購入してみました。

またWindowsではうまく環境構築できなかったので、今回はMacで作りました。

※登記時は環境構築後からの備忘録です。

✅環境
Mac/Docker

✅教材
💻React/ReduxでGoogleカレンダー風カレンダーアプリケーションを作ろう

💻筆者のブランチ

コミットが章ごとになっている。親切！！

🤔この教材ではクラスコンポーネントではなく関数型コンポーネントになっているのがポイント！！

Reactの関数型コンポーネントについて

「 React/ReduxでGoogleカレンダー風カレンダーアプリケーションを作ろう」のWindowsでの環境構築

💻早く・それなりの 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の理解ができたのち再挑戦するでもよいかもしれない。

いずれにせよかなり深いところまで触れてくれていて何度も見返したい教材◎

コメントを残す

RECOMMENDこちらの記事も人気です。