Instructor: Let's kick off with a simple React TypeScript application.
We have a hello component that maintains a local clicked count state. We initialize the state in the constructor. We have a function that increments this using React's setState.
Finally, we render a button that increments this count onClick and shows the current click count as its content. We go ahead and render this component into the root of our page.
As we go ahead and click the button, the clicked count is incremented and the UI updates accordingly. Using MobX in a React application is super easy. All we need to do is install MobX and MobX React. Since MobX is written in TypeScript, there is no additional setup or type definitions required.
The MobX module provides decorators, observable, to mark the property as observable, and action, to carry out mutations in a transactional manner.
MobX React provides a decorator, observer, that can wrap a React component to make it reactive to observable's changes. These three, simple decorators are pretty much all you need to be highly productive with MobX.
To use this data class in a React component, we simply decorate the component as an observer. Since we are no longer using React's state, we remove its generic annotation.
We simply initialize the data whenever the component is initiated, and then, use this data member in a render function to interact with the state. If you run the demo, you can see that it works same as before.
Using MobX effectively turns React into a simple and effective data to DOM transform.