Visual Stduio 2015 Update 1で可能になったTypeScript JSXを使ったReactの入門です。基本的なところから、最終的にはFluxのChatアプリのサンプルをTypeScript JSXで書いた場合の例なども載せています。
目次
1はじめに
1.1ReactとJSX
1.2Visual StudioとTypeScript JSX
1.3環境構築
2ReactでHello world
2.1プロジェクトの作成
2.2TypeScriptの設定
2.3必要なライブラリや型指定ファイルのインストールとプロジェクト設定
2.4TypeScript JSXの記述
2.5HTMLの作成
2.6実行して動作確認
2.7プロジェクトテンプレートの作成
2.8プロジェクトテンプレートの動作確認
3TODOアプリの作成
3.1プロジェクトの作成
3.2TODOアプリのモデルの作成
3.3Reactコンポーネントの作成
3.3.1TodoFormの作りこみ
3.3.2Appとモデルの接続
3.3.3TodoListの作りこみ
3.4実行して動作確認
4Reactの裏側
4.1仮想DOM
4.2コンポーネントのライフサイクルと特殊なメソッド
4.2.1レンダリング
4.2.2ステートの初期化
4.2.3デフォルトのプロパティ
4.2.4マウント時:componentWillMountメソッド
4.2.5マウント時:componentDidMountメソッド
4.2.6アンマウント時:componentWillUnmountメソッド
4.2.7更新時:componentWillReceiveProps
4.2.8更新時:shouldComponentUpdate
4.2.9更新時:componentWillUpdate
4.2.10更新時:componentDidUpdate
5落ち穂拾い
5.1インラインスタイル
5.2DOMのイベントの処理
5.3初期フォーカスの制御
5.4コンポーネント内のエレメントへの直接アクセス
5.5HTMLとの相違点
5.6サニタイズされたくない
5.7key属性
6Flux
6.1TODOアプリ
6.1.1Fluxを支援するライブラリの導入
6.1.2Dispatcherインスタンスの作成
6.1.3Storeクラスの作成
6.1.4AppActionクラスの作成
6.1.5コンポーネントの作成
6.1.6TODOアプリまとめ
6.2ChatアプリのTypeScript化
6.2.1プロジェクトの作成
6.2.2モデルの作成
6.2.3ダミーデータの作成
6.2.4utilsクラスの作成
6.2.5Dispatcherの作成
6.2.6Dispatcherでやり取りするメッセージの作成
6.2.7ActionCreatorsの作成
6.2.8Storeの作成
6.2.9コンポーネントの作成
6.2.10エントリポイントの作成
6.2.11実行して動作確認
目次
1はじめに
1.1ReactとJSX
1.2Visual StudioとTypeScript JSX
1.3環境構築
2ReactでHello world
2.1プロジェクトの作成
2.2TypeScriptの設定
2.3必要なライブラリや型指定ファイルのインストールとプロジェクト設定
2.4TypeScript JSXの記述
2.5HTMLの作成
2.6実行して動作確認
2.7プロジェクトテンプレートの作成
2.8プロジェクトテンプレートの動作確認
3TODOアプリの作成
3.1プロジェクトの作成
3.2TODOアプリのモデルの作成
3.3Reactコンポーネントの作成
3.3.1TodoFormの作りこみ
3.3.2Appとモデルの接続
3.3.3TodoListの作りこみ
3.4実行して動作確認
4Reactの裏側
4.1仮想DOM
4.2コンポーネントのライフサイクルと特殊なメソッド
4.2.1レンダリング
4.2.2ステートの初期化
4.2.3デフォルトのプロパティ
4.2.4マウント時:componentWillMountメソッド
4.2.5マウント時:componentDidMountメソッド
4.2.6アンマウント時:componentWillUnmountメソッド
4.2.7更新時:componentWillReceiveProps
4.2.8更新時:shouldComponentUpdate
4.2.9更新時:componentWillUpdate
4.2.10更新時:componentDidUpdate
5落ち穂拾い
5.1インラインスタイル
5.2DOMのイベントの処理
5.3初期フォーカスの制御
5.4コンポーネント内のエレメントへの直接アクセス
5.5HTMLとの相違点
5.6サニタイズされたくない
5.7key属性
6Flux
6.1TODOアプリ
6.1.1Fluxを支援するライブラリの導入
6.1.2Dispatcherインスタンスの作成
6.1.3Storeクラスの作成
6.1.4AppActionクラスの作成
6.1.5コンポーネントの作成
6.1.6TODOアプリまとめ
6.2ChatアプリのTypeScript化
6.2.1プロジェクトの作成
6.2.2モデルの作成
6.2.3ダミーデータの作成
6.2.4utilsクラスの作成
6.2.5Dispatcherの作成
6.2.6Dispatcherでやり取りするメッセージの作成
6.2.7ActionCreatorsの作成
6.2.8Storeの作成
6.2.9コンポーネントの作成
6.2.10エントリポイントの作成
6.2.11実行して動作確認