IntroductionReact (with MobX)ArchitectureModelsNetworkingData TransformersStoresViews & View Models


Models are the types of objects we use within the app. Many times these are directly modeled after the response of an API, especially if you're using a backend specifically designed for your front end, but when using a generic API, we may not want to follow their models exactly. I like to design my models with my app in mind and not depend exclusively on the API's response to drive my models. I often transform data from the API to what would be most useful for my app vs building and using models based on the API. This also makes it easier to swap APIs if I ever need to!

Let's create a model for our weather app. We know we'll want to track the temperature in Celcius and hold onto the name of the city.

1 2 3 4 5 6 type Weather = { temperature: number; // Temperature in Celsius city: string; // Name of the city }; export default Weather;

This is the model our app will use to track its weather data.