The Book List app is a nice training app for practicing React state.
Demo: https://book-app-rose.vercel.app
We will apply the four essential CRUD operations on book data:
- C - Create: Add new book entries to the list
- R - Read: Filter entries in the list when user types a searchterm (=> filter means: HIDING infos, not deleting!)
- U - Update: Update a book by an inline form (by toggling from a VIEW state of a book to an EDIT state)
- D - Delete: Remove a book from the list
The good thing is: That are the basic data operations out there! There is not much more you could do with data...
So by getting intuitive in those four essential operations, you will also become much more proficient not just in React. But coding in general.
This app uses a simplified setup:
- Components, Events, State and Props
- LocalStorage and useEffect for Data Storage
- No React Router
- No Context
- And nothing even more complicated :)
Try to rebuild this thing on your own!
Never copy paste, young grasshopper!
Trust me, you do not get anything out of it...
(but "stealing" code by looking it up, memoizing a piece and trying to apply it on our own, building the app up step by step, is a good thing, of course :))