https://github.com/mobxjs/mobx-react-todomvc
TodoMVC reference implementation on top of react-mobx-boilerplate
https://github.com/mobxjs/mobx-react-todomvc
Last synced: 9 months ago
JSON representation
TodoMVC reference implementation on top of react-mobx-boilerplate
- Host: GitHub
- URL: https://github.com/mobxjs/mobx-react-todomvc
- Owner: mobxjs
- License: mit
- Created: 2015-08-28T21:53:07.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2021-10-09T20:47:39.000Z (over 4 years ago)
- Last Synced: 2025-03-29T10:04:48.834Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 617 KB
- Stars: 502
- Watchers: 14
- Forks: 163
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-mobx - TodoMVC application, including Server Side Rendering
README
# React + MobX TodoMVC Example
This repository provides a reference implementation of the [TodoMVC](http://todomvc.com) application written using [MobX](https://github.com/mobxjs/mobx), [React](https://facebook.github.io/react) JSX and ES6.
## Running the example
```
npm install
npm start
open http://localhost:3000
```
The example requires node 4.0 or higher
## Changing the example
If you are new to MobX, take a look at the [ten minutes, interactive introduction](https://mobxjs.github.io/mobx/getting-started.html) to MobX and React. MobX provides a refreshing way to manage your app state by combining mutable data structures with transparent reactive programming.
The state and actions of this app are defined in two stores; `todoModel` and `viewModel`.
This is not necessary but it provides a nice separation of concerns between data that effects the domain of the application and data that affects the user interface of the application.
This is a useful distinction for testing, reuse in backend services etc.
The project uses hot-reloading so most changes made to the app will be picked automatically.
By default the `mobx-react-devtools` are enabled as well. During each rendering a small render report is printed on all updated components.
The dev-tools can be disabled by commenting the `import` statement in `src/index.js`.