Using MobX With React

Along the road of getting React into our codebase, we stumbled upon the most challenging bits of doing frontend development: state management.

How to leverage observables, observers, computed properties, autorun & more to supercharge & simplify your React workflow.

So, in this blog post I’m just going to highlight the most compelling new features.

Everything you need to know about using MobX in a create-react-app with React. The article shows you all the different edge cases on how to activate JavaScript decorators, how to use MobX without decorators, and as bonus how to use MobX in Next.js.

Using Redux or MobX in your React application? The article shows you all the differences between both state management libraries that can be used in React.

Refactor your React application from Redux to MobX. Use MobX instead of Redux for state management in React JS. Get to know actions, reactions and derivations in MobX and best practices.

Learn the basics of using MobX and build a silly example to see how it works.

MobX is wonderful. My first love when it comes to React state management.

We take an app from component state to MobX, then the same app from component state to Redux and talk about the differences. Async code in both MobX and Redux is covered!

In this video, I would like to address what is by far, the most asked question on Sketch Elements: Why do you use MobX? I'm excited to give my take but also to hear your thoughts on that topic.

4 ways to do Async code in MobX. We'll cover MobX 4, but show how it would be done in MobX 3.

Here we look at how MobX State Tree works and how it compares to MobX.

In this video we'll see how we can use MobX (with decorators!) without having to eject from create react app. You can also use this technique to add other babel plugins or modify your webpack config without ever needing to eject.

React and its component model is nowadays the most appealing abstraction to declaratively describe user interfaces. The core concepts are so powerful that we can apply them outside the DOM, like in React-VR, Sound manipulation, games etc. In this talk I will demonstrate that all the core ideas powering React are so powerful that we can even translate them to a completely different field: state management. MobX-state-tree applies these very same concepts to make data management declarative, elegant and easy to reason about.

Last years there have been great developments in state management libraries. Both Redux and MobX sprung from the React community and provide stand-alone, generic state management solutions. Both have gained big in popularity, and both have their own strengths and weaknesses. What can we learn from both approaches?

At React Amsterdam, you can meet its full-stack lead developer Michel who strongly believes in pragmatic, agile and the-simplest-thing-that-could-possibly-work programming.

At Mendix we use MobX to manage the state of our visual enterprise application studio. In this talk we will take a look behind the scenes and see how MobX simplifies concerns like authentication, data fetching and routing. The strong decoupling of state and UI helps us to iterate on our UI more quickly. The architecture of the studio is pluggable and we will see how MobX helps integrating external producers and consumers of state into the product. In the end, we believe that this approach results in a code base that is sane and accessible. In which we get things done quickly.