React TypeScript MVVM
This is the MVVM TypeScript template for Create React App.
To use this template, add
--template typescript-mvvm when creating a new app.
npx create-react-app my-app --template typescript-mvvm # or yarn create react-app my-app --template typescript-mvvm
For more information, please refer to:
- Getting Started – How to create a new app.
- User Guide – How to develop apps bootstrapped with Create React App.
MVVM has four main blocks:
- The View — UI layer that users interact with,
- The ViewController —has access to the ViewModel and handles user input,
- The ViewModel — has access to the Model and handles business logic,
- The Model — application data source
With React we’re building user interfaces and this is what most of us are already familiar with. The View is the only touching point for a user with your application. A user will interact with your View that will trigger ViewController methods depending on events such as mouse movements, key presses etc. The View is not only used for a user input but also for displaying output — results of some actions. The View is a dumb, presentational React.Component which means that it should be used only for displaying data and triggering events passed from the ViewController. This way, we’re keeping our components reusable and easy to test. With the help of MobX, we’ll turn React.Componentinto reactive component that will observe any changes and automatically update itself accordingly.
The ViewController is a brain for the View — it has all View related logic and owns a reference to the ViewModel. The View is not aware of the ViewModel and it is relying on the ViewController to pass all necessary data and events. Relation between the ViewController and the ViewModel is one-to-many — one ViewController can have references to different ViewModels. Handling user input shouldn’t be left to the ViewModel but rather handled in the ViewController that will pass clean and prepared data to the ViewModel.
The Model is acting as a data source ie. global store for the application. It composes all data from the network layer, databases, services and serve them in a easy way. It shouldn’t have any other logic except one that actually updates a model and doesn’t have any side effects.
One component that is not part of the MVVM but we’ll use it to glue everything together is called Provider. This component will instantiate ViewModel and provide all needed dependency to it. Furthermore, instance of the ViewModel is passed through props to the ViewController component. Provider should be clean, without any logic as its purpose is just to wire up everything.
And updated with the last version of Mobx and project structure.