The resulting app we’ll build together!

Building a React & MobX application with MVVM

Today, we’ll deep dive into building a full TodoEditor with MobX and React, starting from the basics and ending with some considerations.

Here you’ll find the entire code repo!
https://github.com/mattiamanzati/react-mobx-todo-editor

Finding a JavaScript editor

First of all, you will obviously need any text editor to edit your JavaScript code. I recommend using VSCode, an OpenSource JavaScript editor supported by Microsoft. Give it a shoot, it’s great!

Setting up the build environment

Setting up the full stack build environment for a React application could be tedious, but fortunately facebook published a create-react-app package, which provides a fast and convinient way to create your React app and automatically setup Babel and Webpack.

Now, after installing NodeJS on our system, let’s install the create-react-app package globally by doing

npm install -g create-react-app

Notice: if you are running on Linux, you may need to prefix it with “sudo”.

Now we can create our project folder by running from the parent destination folder:

create-react-app react-mobx-todo-editor

After some dependencies are downloaded, a “react-mobx-todo-editor” folder will appear, and we’ll reference to it later as “project folder”.

Unfortunately the preset does’nt includes by default support to decorators, that we will use later to decorate class properties, so we need to “eject” the default configuration and edit that manually. To do so, simply run

npm run eject

inside of your project folder. That will result in a config and in a scripts directory being created. Let’s now install the Babel plugin to handle decorators:

npm install babel-plugin-transform-decorators-legacy --save-dev

now, we need to edit both “config/babel.dev.js” and “config/babel.prod.js” and add the decorators legacy transformer to the plugins array like this to let babel know about this additional transformer:

plugins: [
    // handles @decorator
    require.resolve('babel-plugin-transform-decorators-legacy'),

Now, you can run

npm run start

to start the development server: a browser page will open showing a default React app.

You can also run

npm run build

to create the production build of your project! A “build” folder will appear containing the built files of your single page application.

You can now clear the content of the “src” folder, as we will put there our application code.

Installing additional required packages

Now we need to install mobx and mobx-react! To do so, simply type:

npm install mobx mobx-react --save

Creating the domain models with MobX

React and MobX are great libraries that allow to build a clean MVVM architecture in JavaScript.

Let’s now start by writing first our domain models, which in this example the only domain model is the “Todo” entity. We’ll create a “Todo.js” file in the “src” folder with the following code:

Our Todo domain model using MobX

To create a full working example, I added two serialize and deserialize methods, but keep in mind that you could use https://github.com/mobxjs/serializr to easily define the model schema and serialize/deserialize it easily to JSON.

Creating the ViewModel in MobX

You know, Model is’nt everything! You need somewhere to define the logic to interact with it! That’s what’s the ViewModel is for. ViewModel provides data and logic that will be used by the view to interact with domain models.

We will create a “TodoViewModel.js” file in the “src” folder with the content below:

As you can see, our view model is a simple list of todos, with methods to add and remove todos and save and load them form the browser LocalStorage.

Creating the React View

Now we have all the data and methods to interact with… what’s missing? The View! To create the View we simply create React components that accepts a “model” prop which is an instance of our ViewModel and decorate them with “observer” from the “mobx-react” package.

The observer will automatically force the view to update whenever an object given as prop to our component has changed observable properties. And that’s exactly our case; we want the view to automatically update whenever our ViewModel or our Model changes.

This way our view is completely decoupled from our logic. We could for example take advantage of this feature and create a React Native view using the same Model and ViewModel of the HTML one.

Notice that I have used classic React components class to improve readability, but you should use StatelessFunctionalComponents, as the data is coming in from the view model.

Wiring it up

Finally the last step is to wire up ViewModel and View, and proceed to render them. To do so, we simply create and “index.js” file in our “src” folder that imports the View and the ViewModel, creates a ViewModel instance and render the View with the given ViewModel instance.

Now we run “npm run start” and our first React & MobX Todo Editor is running!

If you’re ok with it, you can now simply run “npm run build” and serve the “build” folder content to an HTTP server!

Make it prettier

What your app to rock? We could use the MaterialUI package components to make our todo app look nicer! You simply need to update your view to use the MaterialUI components package! First of all, let’s install the material-ui package:

npm install material-ui react-tap-event-plugin --save

Here’s the code to build it! You can find more components in the Material UI API docs!

you will also need to add these line to the start of “index.js” in order to support mobile devices tap event:

Now you are able to build larger application with React & MobX; simply keep going creating Model, ViewModel and Views and wire them up. As occurs in other languages, you can use multiple ways to wire up the View and the View Model.

The easy one is to create a singleton of the ViewModel and simply pass it as property of the React component, as we did before.

Another way, that avoids singleton, is to use the <Provider/> and connect() from the ‘mobx-react’ package, that allows to define a top-level provider which provides instances of the ViewModels and the Views will connect() to one of the provided ViewModels.

You could also check-out the mobx-mvvm package, which is an on-going experiment that provides not only a way to link View and ViewModels, but also provides a way to link the properties of the component to the properties of ViewModel automatically.

Here you could find the same example of this post wired with mobx-mvvm.

Thanks for your time!