MobX & creat react app

We have learned the easiest way of initializing a React application which is a one step:

• create-react-app <new-react-application>

Now in order to start a MobX application:

1. create-react-app <new-react-application>
2. npm run eject
   • It will ask for permission because there is no going back from it give it y for yes 😃
   • And mostly it won't allow you to eject it unless you committed your latest repository changes, to have a backup point from your latest changes.
   • You have to note that we are ejecting not breaking the app you have, if you test it that must be fine as React.js.
3. npm install --saveDev @babel/plugin-proposal-decorators
   • babel is allowing us to get a features from the future simply, in this case it's decorators.
   • In other words we can say it's only to get a feature the Js developers are currently testing out to make it available later.
4. npm install mobx mobx-react
   • because we will use MobX we need MobX!
   • mobx-react in order to use MobX with React.js

Before the last step Every thing should be working fine and as expected with React.js

5. in your package.json file you will find a property called babel, and what you will have inside it is:

  "babel": {
    "presets": [
      "react-app"
    ]
  }

what you should copy under babel property name, in order to use decorators that it will be introduced during the lecture:

    "plugins": [
      [ "@babel/plugin-proposal-decorators", { "legacy": true } ]
    ]

Now you should have the following:

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [ "@babel/plugin-proposal-decorators", { "legacy": true } ]
    ]
  }

---

the last step you don't have to really worry about what is happening right now.

every thing you have to know about it that it's just allowing us to use the legacy decorators syntax.