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

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

杉浦 有右嗣
杉浦 有右嗣 | フロントエンド・エンジニア

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

杉浦 有右嗣
杉浦 有右嗣 | フロントエンド・エンジニア

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

杉浦 有右嗣
杉浦 有右嗣 | フロントエンド・エンジニア

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

杉浦 有右嗣
杉浦 有右嗣 | フロントエンド・エンジニア