つくって学ぶ、React x MobXの実装
- カテゴリー
- UIフレームワーク >
- React/Preact
全4回
Reactと状態管理ライブラリのMobXを組み合わせて、簡単なSPAを実装します。実際にコードに触れ、自分の手を動かすことで仕組みや特徴、注意点などを把握しましょう。
本シリーズ内で紹介している内容は利用できますが、現在のバージョンでは新しい書式などが追加されているので注意してください。（2020年7月現在）
最終回 今後を見据えたリファクタリング
React + MobXを用いたメモアプリケーションが一通り動作するようになったところで、ストア分割、Observableのチューニングなどのリファクタリングを行います。リファクタリングの考え方、ポイントがわかります。
第3回 メモの追加・削除・編集
Viewの土台が完成したメモアプリにメモの追加、削除、編集の機能を実装していきます。メモの状態をどのように管理するかと同時に、ReactとMobXの役割分担も考慮して実装を進めましょう。
第2回 Reactの組み込みと一覧の表示
1回目につくった土台のView部分をmobx-reactというバインディングライブラリを使って置き換えていきます。Reactのコンポーネントをobserver()でラップすることで、値の変更があると、Viewを更新するという仕組みが構築できます。
第1回 MobXによるルーティング
シリーズ1回目はアプリを開発するための環境を整えます。そして、まずアプリの土台となるMobXによるルーティング部分を実装します。decorateなどMobXのv4から追加された機能も利用します。