The purpose of this workshop / example is to compare:
- classic way of writing react components VS the "hooks" way
- State management: React Context API (with and without hooks) vs Redux vs Mobx
- Typescript is used everywhere
This is a small application which fetches some recipes data from a public API. User can search through the recipes and add/remove recipes to/from a list.
the source folder structure is:
- components -> This contains the basic components which are not linked to any state
- containers -> Here we have components which are using different state management mechanism
- mobx -> this folder also contains the mobx stores
- redux -> this folder contains the required redux actions, reducers
- interfaces -> define all the common typescript interfaces here
- providers -> the context providers used for React Context API examples
- services -> define all services here, like the one which retrieves data from an API
- views -> these components are rendered by the routing system, each is the entrypoint for the corresponding example
This project was bootstrapped with Create React App.