Swizec Teller - a geek with a hatswizec.com

    How to use MobX with create-react-app

    create-react-app is the best thing that's happened to the React ecosystem since React 14 gave us functional components. No more messing around with random boilerplates or manual headaches around setting up your project from scratch.

    Instead, you run create-react-app MyThing, and it sets everything up.

    If you like MobX, there's a crucial piece missing: decorators. You don't have to use decorators with MobX, but that's like saying you don't have to use JSX with React. You don't "have to”; you "want to". Because that's what the library was designed for.

    MobX is a state management competitor to Redux, by the way. I like it because there's almost no boilerplate. We've been using at The Day Job™ and it's been amaze so far.

    A React component that reacts to MobX data store changes would use the @observer decorator. Like this:

    import React, { Component } from "react";
    import { observer } from "mobx-react";
    class Hello extends Component {
    render() {
    return <h1>Hello {this.props.store.name}</h1>;

    You can think of decorators as function wrappers. A sort of functional composition, if you will.

    The observer decorator automatically runs a component’s render method when MobX detects a change in a store value that render references. Yes, MobX circumvents React's own prop and state change detection.

    I'm not sure yet how I feel about that, but so far, so good. Can't complain.

    It's those decorators that make working with MobX powerful and concise. But create-react-app doesn't enable them because of some interesting history. They used to be in Babel 5, then Babel 6 removed them because the official spec got pushed back.

    There's a Babel plugin you can use, but create-react-app maintainers have decided not to include it.

    How to get decorators in create-react-app

    Ok, so here's what you do when setting up a new React app:

    1) Run create-react-app. This creates a new app with the official configuration.

    2) Run npm run eject. This moves files around and makes your app's configuration accessible.

    3) Run npm install --saveDev babel-plugin-transform-decorators-legacy. This installs the Babel plugin for decorators. It's called legacy even though it's a feature from the far future.

    4) Open package.json, find the "babel" section (line 78 for me), and add 4 lines so it looks like this:

    "babel": {"plugins": [ "transform-decorators-legacy" ], "presets": [ "react-app" ]},

    5) Run npm install --save mobx mobx-react. This installs MobX.

    You're ready to go. Happy hacking! ?

    Did you enjoy this article?

    Published on October 27th, 2016 in Front End, react, Technical

    Learned something new?
    Want to become an expert?

    Here's how it works 👇

    Leave your email and I'll send you thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

    Join Swizec's Newsletter

    And get thoughtful letters 💌 on mindsets, tactics, and technical skills for your career. Real lessons from building production software. No bullshit.

    "Man, love your simple writing! Yours is the only newsletter I open and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. 👌"

    ~ Ashish Kumar

    Join over 14,000 engineers just like you already improving their careers with my letters, workshops, courses, and talks. ✌️

    Have a burning question that you think I can answer? I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

    Ready to Stop copy pasting D3 examples and create data visualizations of your own?  Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization

    Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

    Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first 💰 on the side with ServerlessReact.Dev

    Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com

    By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️

    Created by Swizec with ❤️