環境構築とHello world
  • 利用する技術・ツール
  • 完成版のソースコード
  • 講座内で利用するエイリアスコマンド
  • エディタのインストール(atom)とプロジェクトの作成
  • パッケージマネージャー(yarn)のインストール
  • yarnでインストールするパッケージのバージョンについて
  • ES2015に必要なパッケージのインストール(bable・webpack)
  • 次のレクチャーで利用するソースコード
  • ES2015でのHello world
  • [ご確認ください] eslintの実行ファイルが消えるエラーについて
  • 静的解析ツール(eslint)の導入
  • 次のレクチャーで利用するソースコード
  • sass/scssを用いたスタイルシートの導入
  • [ご確認ください] reactとreact-domのバージョンについて
  • Reactを使ったHello world
Reactの基礎
  • 開発の基本単位となるComponentについて
  • propsを用いたcomponent間の情報伝達
  • stateを用いてcomponentに状態を持たせる
  • ユーザーの入力情報を取得する
Reactを使った実践的なWEBアプリケーションの作成
  • 緯度経度検索サービスの概要と設計
  • jsxファイル上でのタグの自動補完
  • SearchFormコンポーネントの実装
  • GeocodeResultコンポーネントの実装
  • APIから緯度経度を取得する
  • Google Mapの導入
  • componentからロジックを逃がすリファクタリング
  • ホテル検索機能の概要と設計
  • ホテル検索機能のコンポーネント実装とバーチャルDOMの仕組みの解説
  • 2つのAPIの連結
  • 表示する情報の追加
  • ソート機能の作成
  • componentのライフサイクル
React Routerを使った複数ページのアプリケーション
  • 作成するページの概要
  • SearchPageの切り出しと左ナビの追加
  • React RouterのインストールとAboutページの作成
  • React Routerの仕組み
  • history.pushでgetパラメータをつける
  • getパラメータをアプリ内で利用する
Reduxを使ったスケーラブルなアプリケーション
  • Flux・Reduxの概要
  • ReduxでのHello World
  • Presentational ComponentとContainer Componentの振り分け
  • Providerとconnect()を使って記述を簡略化する
  • redux-devtoolsのインストール
  • Reducerの分割とAjaxからのdispatch
  • Action Creatorの分割
  • Middlewareとthunkの解説
  • ホテル一覧部分のRedux化
  • React Routerの復活
最後に
  • 今後の学習に向けて