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データとコンポーネントとの接続調整