-
Notifications
You must be signed in to change notification settings - Fork 2
ToDo List App Tutorial Part 1: Requirements
In this tutorial series we will see how we can use react-model-view-viewmodel
package to create, the one and only, todo list application. This is a good sample application because it covers everything we need, displaying a list of items, having detail pages for these items as well as creating, editing and deleting items. This will include forms and validation.
To better understand what we want to build in this tutorial we should make a list (oh yes, a todo list!) of features we want to implement.
- Display a list of todo items
- Be able to add a todo item, has a description and has three states: todo, doing and done
- Be able to update todo items, maybe we had a typo or want to add more details
- Not be able to add empty todo items, unlikely that we will actually do this, but a little validation wouldn't hurt
- Be able to progress our todo items, it would be pretty useless if we couldn't do that, but we want to do this from the display list as well
- Be able to delete our todo items, once we complete them it may become crowded
- Be able to search in our list
We will be developing this application using TypeScript to take full advantage of its type checking with Webpack. Obviously, we will be using React since this is a React library, hehe. Some custom CSS will suffice, let the artist within come forth!
With our requirements in place, it's time to get started! Next part is ToDo List App Tutorial Part 2: Setup
Motivation
Overview
Guides and Tutorials - Getting Started
Releases
API
Events
IEvent
IEventHandler
INotifyPropertiesChanged
INotifyCollectionChanged
IItemAddedEventArgs
IItemRemovedEventArgs
ICollectionChange
ItemRemovedCallback
ICollectionChange
EventDispatcher
Observable Collections
IReadOnlyObservableCollection
IObservableCollection
ReadOnlyObservableCollection
ObservableCollection
ViewModels
ViewModel
isViewModel
Forms
IFormFieldViewModel
IFormFieldViewModelConfig
FormFieldViewModel
FormFieldCollectionViewModel
FormFieldSet
DynamicFormFieldCollectionViewModel
Validation
IReadOnlyValidatable
IValidatable
IValidationConfig
ValidatorCallback
CollectionItemValidatorCallback
ValidatableSelectorCallback
ValidationConfigSelectorCallback
UnsubscribeCallback
registerValidators
registerCollectionValidators
registerCollectionItemValidators
React Hooks
EventHandler
useEvent
ViewModelType
ViewModelFactory
useViewModel
useViewModelMemo
useObservableCollection
useValidators
useCollectionValidators
useCollectionItemValidators