Swizec Teller - a geek with a hatswizec.com

Senior Mindset Book

Get promoted, earn a bigger salary, work for top companies

Senior Engineer Mindset cover
Learn more

    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"
    @observer
    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! ?

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

    Did you enjoy this article?

    Continue reading about How to use MobX with create-react-app

    Semantically similar articles hand-picked by GPT-4

    Senior Mindset Book

    Get promoted, earn a bigger salary, work for top companies

    Learn more

    Have a burning question that you think I can answer? Hit me up on twitter and I'll do my best.

    Who am I and who do I help? I'm Swizec Teller and I turn coders into engineers with "Raw and honest from the heart!" writing. No bullshit. Real insights into the career and skills of a modern software engineer.

    Want to become a true senior engineer? Take ownership, have autonomy, and be a force multiplier on your team. The Senior Engineer Mindset ebook can help 👉 swizec.com/senior-mindset. These are the shifts in mindset that unlocked my career.

    Curious about Serverless and the modern backend? Check out Serverless Handbook, for frontend engineers 👉 ServerlessHandbook.dev

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

    Want to get my best emails on JavaScript, React, Serverless, Fullstack Web, or Indie Hacking? Check out swizec.com/collections

    Did someone amazing share this letter with you? Wonderful! You can sign up for my weekly letters for software engineers on their path to greatness, here: swizec.com/blog

    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 ❤️