leannechen / react-crud-example

React CRUD example for teaching

How to use

1. Install application related packages: npm install
2. Development: npm run start
3. Build: npm run build

Design Principle

About design

1. Implement Responsive web design

About the list

1. Render user list with unique key, which is designated serialNo
2. Use this serialNo to decide which user to edit, which user to remove
3. If serialNo equals to 0, the editing user is a new one; if any number(1,2,3...), the editing user is an existing one
4. If user list updated (add/delete), users' serialNo will be re-assigned with new order

About the form

1. It's placed inside Modal because only Modal needs the information
2. A form contains needed fields objects
3. Every field has its own object with value and error message
4. Whether a field is valid or not depends on its error message string. If valid, it's empty; If invalid, it will be why it's invalid
5. If input is changed (touched), matching error message will show accordingly
6. Since we have to compare user name's uniqueness, userList is passed in to Modal
7. When submit, check all fields' validity. If any is invalid, update error messages of them. If all are valid, use editing serialNo to decide whether it is create or edit, and pass value to callback function from outside