Hello React
- 身につける技術と作成するアプリの紹介
- node.jsのversionについて
- create-react-appによる雛形作成
reactによる画面設計
- 概要
- 扱うデータ構造
- Component設計
- Formの実装
- Todoの表示
- 汎用的な入力コンポーネントの実装
- Todoに編集モードを追加
- LabelPaneの実装
- スタイルをあてる
- styled定義済みのコード
reduxによる状態管理
- reduxとは
- reduxの導入
- actionsの定義
- reducersの定義
- redux-devtoolsのインストール
- storeの作成
- react-redux(actionsの呼び出し)
- react-redux(storeの情報を表示)
- 複数reducerからstoreを生成
- Todoのすべてのアクションを結合
- Labelのアクションを結合
API連携
- 前準備
- モックAPIの紹介
- redux-thunkの紹介
- 非同期actionの作成
- redux-thunkの適用
normalizrによる正規化
- normalizrの紹介
- schemaの定義、normalize処理作成
- entities用reducer作成、各reducerの修正
- storeデータとコンポーネントとの接続調整
Immutable.Recordを使ってモデルを定義する
- Immutableなデータとは
- Immutableなモデル定義
- entityをモデルに
- storeデータとコンポーネントとの接続調整