Menu
The MobX docs tell me I must "use the transform plugin transform-decorators-legacy and make sure it is first in the plugins list", in order for the decorators to work. The MobX boilerplate project suggests I need a .babelrc like:
{
"presets": [
"react",
"es2015",
"stage-1"
],
"plugins": ["transform-decorators-legacy", "react-hot-loader/babel"]
}
How do I do that with a create-react-app generated project? Any attempt to use @ decorators errors. There is no .babelrc even after the project is 'ejected'.
328
Create a new React app The above command will bootstrap the application and install the dependencies. We can use cd mobx-react to go into the folder. Now, inside of the src folder, we can create a folder for our components, create a PetList component inside the folder, and open the file in your favorite editor.
The basics of making objects observable is specifying an annotation per property using makeObservable . The most important annotations are: observable defines a trackable field that stores the state. action marks a method as action that will modify the state.
In this tutorial, we will learn how to use MobX with React Functional Components. MobX being a very useful state management library reduces the code that needs to be written for global state management. Mobx is easy to use and quick to learn.
There's an alternative now that was not available at the time of the accepted answer. It's custom-react-scripts. It will let you enable decorators, SASS and other niceties in your CRA app. And it does so without ejecting.
There's a nice medium article explaining the ideas behind it.
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
