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! ?
Continue reading about How to use MobX with create-react-app
Semantically similar articles hand-picked by GPT-4
- How to structure your MobX app for the real world
- Livecoding #25: Adding MobX to a vanilla React project
- Simple MobX-driven modals
- Using HOCs to DRY up your code
- How to use React Context effectively
Learned something new?
Read more Software Engineering Lessons from Production
I write articles with real insight into the career and skills of a modern software engineer. "Raw and honest from the heart!" as one reader described them. Fueled by lessons learned over 20 years of building production code for side-projects, small businesses, and hyper growth startups. Both successful and not.
Subscribe below 👇
Software Engineering Lessons from Production
Join Swizec's Newsletter and get insightful emails 💌 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. 👌"
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 ❤️