Last week we went over the main principles of MobX, as well as why mixing it with React is an amazing idea. That covers all of the basics that we need and sets common grounds of understanding. Which means we can now focus on building our first application using the two of them. And that’s what we’ll be doing in this MobX + React Tutorial. Our first MobX + React Application. We’re going to be building an App called a List Detail View. The App will render out a list of one line “summary” components for larger pieces of data. Additionally, clicking one of them will render a second component containing more detailed information. In this way you click on a list element to view its details. List Detail View. Simple enough right? See the Pen #100DaysOfCode: (React + MobX) List Detail View by Orlando Paredes Hamsho (@orliph) on CodePen.…
MobX has slowly built itself up as Redux’s main competition for state management real-estate. Which is definitely not a coincidence. Because, not only is MobX incredibly easy to use; it’s also very powerful. And, believe me when I say this: I’ve never seen React perform any better than when I mix the two of them. But, instead of me telling you, why don’t I show you instead?
A little bit of History: I’ve been working with Redux since version 1.0.0 came out. I was one of the early adopters at my previous company, gave courses on it, and tried to evangelize everyone to my cause. Pretty standard stuff.
Which means that, by the time I found out about MobX, I was already pretty familiar with the competition. Making me change sides was going to be no easy task.
And that’s when I ran into this video by Matt Ruby:
But, since it’s 42 minutes long, I’ll summarize it for you: Mixing MobX and React is like giving your car a consistent Nitro Boost while also reducing its fuel consumption by 90%.
What do I mean by this? The combination literally reduces the number of updates and (by extension) rendering to the bare minimum. Which brings your application to the peak of its performance.
If that doesn’t convince you to give this combo meal a try, nothing will. But, if being super fast is something that interests you, then boy do I have a treat for you next.
To do that I have prepared a list of my 5 favorite features about it. But, don’t get me wrong. I don’t mean these are the best ES6 features; that’s definitely up there for debate.
What do I mean then? Just that these are the 5 features that keep me installing Babel on all my projects. And I’m not even kidding. They just make my life that much more awesome.
So without further ado (and in no particular order) here are the 5 reasons why ES6 ROCKS, yo:
There are still a lot of questions around React Fiber. This article seeks to answer one of them: What does Fiber mean for rendering in React?