如何在 Create-React-App 中实现 MobX？

Question

While studying React, and Redux, I was told to have a look at MobX as well, because it's much simpler. And I agree, I find it more intuitive when demonstrated to me. But when I try to implement it in my React project I run into a lot of trouble, eg with the decorators, experimental syntax warnings and when fixed I run into a lot of more trouble. And I can't follow tutorials, it does not look the same to me when I try it, new versions have arrived since then, etc..

After installing:

npm install mobx --save
npm install mobx-react --save

...what confuses me is the usage of the 2 files for further settings (or do I need just one of them?):

.babelrc
babel.config.js

Do I have to create those files myself (or just one of them)?, and WHERE??

And I am also told by tutorials to change babel section in package.json, but there is no such section. Right now I am stuck in a compiler (VSCode) error:

"Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled".

I did run the command:

npm install @babel/plugin-proposal-decorators  

.. but there is still that error when compiling in VSCode.

Answer 1

In MobX 6 there is a new thing that will probably allow you to drop decorators altogether, makeAutoObservable :

import { makeAutoObservable } from "mobx"

class Store {
  // Don't need decorators now
  string = 'Test String';

  setString = (string) => {
    this.string = string;
  };

  constructor() {
    // Just call it here
    makeAutoObservable (this);
  }
}

With that you don't even need decorator syntax to be enabled.

More info here https://mobx.js.org/migrating-from-4-or-5.html and https://mobx.js.org/react-integration.html