a template project with React, MobX, Emotion and TypeScript + Unit testing.
Details:
- State management with MobX
- CSS in JS with Emotion
- HTTP requests with Wretch
- Linting with TSLint
- Code formatting with Prettier
- Testing with Jest
Setup is based on Create-react-app 's TypeScript version (react-scripts-ts) but also has some additional features such as decorator syntax (made possible with react-app-rewired).
You should have Yarn (https://yarnpkg.com/en/) installed. Then run
yarn
in project directory to install package dependencies.
Starts your project and opens it automatically in browser.
- Runs unit tests (with Jest) .
Runs yarn test and if it succeeds then builds the app for production to the build folder.
The build is minified and the filenames include the hashes.
- apis directory contains code for external api interactions.
- components directory contains reusable components.
- stores directory contains MobX store definitions.
- views directory contains views which are routed to different urls.
└── src
├── apis
├── components
│ ├── CustomButton
│ ├── Note
│ └── TopNavigation
├── stores
│ └── notes
└── views
├── App
├── NoteCount
└── Notes
The project contains simple application to demonstrate following features:
- Observables & Observers
- Actions (both sync & async)
- Computed state
- Calling an API with async action and updating results to MobX store
- Linting & Formatting
- Testing actions & store with Jest unit tests
- Testing automatically mocked external api with Jest unit tests
- Styling components with CSS-in-JS (Emotion)
- Including devtools in development environment builds (mobx-react-devtools)
- Including decorator features to CRA based setup (with react-app-rewired)