実行環境

• node 13.6.0
• yarn 1.21.1

環境構築方法

1. nodeをインストール
2. yarnをインストール(コマンドライン上にてnpm install -g yarn)
3. (Error: Cannot find module 'express'と言われた場合は、コマンドライン上にてyarn add express)

アプリ実行方法

• 初回clone時には yarn install する

(ターミナルを2つ使います)

1. yarn mock-server これでモックサーバを立ち上げる
2. yarn start React Appの実行

使用技術等

• 言語：TypeScript
• UIライブラリ：React, styled-components
• State管理：Redux
• フォルダ構成：Redux Way
• ミドルウェア：Redux Saga
• React Componentsの切り方：Atomic Design
• HTTP通信：Axios
• モックサーバ：JavaScript&Express

参考資料

(実際に書いたり、チームメンバーに聞く方が100倍効率が良いので、1回くらい読み流す程度でok)

• Reactとは(useStateまで読めばok)
• Reduxの概念であるFluxについて
• Reduxとは(各役割が何をしたいかだけ抑えればok)
• Atomic Designとは

コードの読み方について（Redux）

読む順番はstates→actions→reducers→componentsがオススメ
これが理解できるようになったら、actions→sagas→apis→sagas→actionsという流れも理解しよう！

• states: アプリにて管理したい情報の型を定義(例:ユーザ名)
• actions: アプリにて管理したい情報が変更される状況を記述(例:ユーザ名を編集)
• reducers: 情報の具体的な変更処理を記述(例:ユーザ名を太郎から次郎に変更)
• components: UI(アプリの見た目)を記述
• sagas: 非同期処理を行う(例:ユーザ名の取得と見た目の表示を同時に行う)
• api: 通信処理を記述(例:サーバからユーザ名を取得する)

コードの読み方について（React）

以下、componentsフォルダ内の説明です。 下に行くほど大きいComponentになっています。

• Atoms：UIとしての最小単位　　　→ Button, Form
• Molecules：UXとしての最小単位 → Login Form, Add Task
• Organisms：１つの領域を表現 → Header, Side Bar
• Templates：画面の領域分けを表現 → Headerは上部20%, Side Barは左30%… (今回はGridLayoutによって表現)
• Pages：初期データの取得、Templatesに実データを渡すなど
• App.tsx：ログイン等の画面処理、CSSの初期化、画面遷移など

演習問題

• ボタンやフォームの色や大きさを変えてみる(React, styled-components)
• 画面の領域分けを変えてみる(React, styled-components, Grid Layout)
• タスクの削除機能を実装してみる(React, Redux)
• 画面遷移を実装してみる(React, React Router)
• モックサーバからtasksを取得してみる(Axios, Redux, Redux Saga)