環境構築と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の復活
最後に
- 今後の学習に向けて