つくって学ぶ、React x MobXの実装

全4回

Reactと状態管理ライブラリのMobXを組み合わせて、簡単なSPAを実装します。実際にコードに触れ、自分の手を動かすことで仕組みや特徴、注意点などを把握しましょう。

本シリーズ内で紹介している内容は利用できますが、現在のバージョンでは新しい書式などが追加されているので注意してください。（2020年7月現在）

最終回今後を見据えたリファクタリング 2018年7月19日

React + MobXを用いたメモアプリケーションが一通り動作するようになったところで、ストア分割、Observableのチューニングなどのリファクタリングを行います。リファクタリングの考え方、ポイントがわかります。

Viewの土台が完成したメモアプリにメモの追加、削除、編集の機能を実装していきます。メモの状態をどのように管理するかと同時に、ReactとMobXの役割分担も考慮して実装を進めましょう。

1回目につくった土台のView部分をmobx-reactというバインディングライブラリを使って置き換えていきます。Reactのコンポーネントをobserver()でラップすることで、値の変更があると、Viewを更新するという仕組みが構築できます。

シリーズ1回目はアプリを開発するための環境を整えます。そして、まずアプリの土台となるMobXによるルーティング部分を実装します。decorateなどMobXのv4から追加された機能も利用します。

運営会社