問題提起
React始めたいですよね!
でも今時、型のない言語とか使いたくないですよね!
TypeScriptコンパイラもjsxに対応したし、Angular2でもTypeScriptが標準っぽいし、
とりあえずこれから始めるならTypeScriptでしょう。
ということで、個人的に良いのではと考えている技術スタックをまとめてみました。
内容が膨大なのでシリーズにしています。
環境・技術スタック
基本的には以下のように最新に追従していきます。
- NodeJS 7.X~
- React 15.5
- Redux
- TypeScript 2.3
- wepack 2.5
- express(開発用の仮サーバーとして)
- karma
(他、各種ライブラリを都度見ていきます)
記事
導入編
Reactで普通のSPAを作るために最低限必要だと筆者が考える構成を順を追って説明していきます。
-
React + TypeScript + Webpackの最小構成
- まずはReactの環境構築です。
-
React + Redux + TypeScriptの最小構成
- ここでReduxを導入してみます。
-
React + Redux + TypeScriptでテストを書く
- Reduxによって分けられた、Component/Reducer/ActionCreatorのテストを書いてみます。
-
React + Redux + TypeScriptで非同期処理
- ミドルウェアは使わずにシンプルに書いてみます。もちろんテストも
-
React + Redux + TypeScriptでreact-router
- SPAの必須要件とも言えるroutingを書いてみます。
拡張編
Reactをさらに便利に使うための便利ライブラリなどを導入してみます。
-
React + Redux + TypeScriptとImmutable.js
- TypeScriptを相性が良いと筆者が思っているImmutable.jsをどうにゅうしてみます。
番外編
随時更新したい
こちら、ReactやTypescriptのバージョンが上がったり、これらのスタックをさらに便利にするものが出てきたら随時紹介してきます。
(今のところhot-module-loaderなどは入れる予定はありません。)
何かご質問やもっと良い構成案があれば気軽にコメント頂ければと思います。
TBD
- Material-ui(or material design css framework)
- react-bootstrap
- websocket
- canvas