Dead simple, advanced examples to learn to love react and some of its libraries.

---

To-do App - Principles

• uses a controlled input
• input field is required
• input field clears after form submit

• uses a controlled input of type checkbox
• uses map() to toggle each todo's completed state
• uses inline-styling to show if completed

• uses filter() method to delete item
• has no confirm message

• uses map() method to toggle if todo is in edit mode
• edit mode swaps span with input
• input controlled by todo name
• changes are directly written into the state

this is dead simple - but edit mode should not be in the data we mock as a database, better keep your data structure clean from states that are only needed to render on the frontend.

---

To-do App - Advanced

• uses new FormData() and Object.fromEntries() instead of controlled inputs

• uses custom component
• uses "Lifting up State"
• uses nested useState for delete mode

• marks a to-do for trash
• uses filter() chained with map()

• uses custom component
• uses "Lifting up State"
• keeps data structure clean from an items edit state
• uses formData and controlled input

• uses localStorage.setItem()
• uses localStorage.getItem()

Note that this solution will not work in a ssr environment. For ssr use useSyncExternalStore or a dedicated library.

• clones the state array to make it mutable

If you are looking for a better solution, you probably want to take a look at splice()method.

---

To-do App - Disguised

• text and color input are using the same useState
• uses async function navigator.clipboard.writeText()

Depending on the browser, this will throw an error in Codesandbox's editor-mode, but will most likely work if you open the app in a new window.

• uses a loading bar to display rest budget
• uses controlled inputs
• uses Number.parseFloat()
• uses Math.round()
• size at where you should split up custom components

• uses Web Speech API
• uses your browsers default language/voice

• uses Array.from()

---

Fetching

• uses async/await
• uses a loading state

• uses async/await
• uses pagination to fetch
• uses a cleanup function in useEffect to set an ignore flag

While fetching with pagination it is not guaranteed, that responses arrive in the same order we request them, so we manually take care, that the last request will always be the last no matter if it responded faster than an earlier request.

---

Custom Hooks

• uses window.addEventListener() and window.removeEventListener()
• uses a cleanup function in a useEffect
• one of the most easiest self written hooks

• returns an object with 4 values
• returns current page
• returns function for next and previous page
• returns function to set a specific page

• returns an object with 3 values
• returns data
• returns returns loading state
• returns returns error state

---

Games

• uses zustand.js

• uses zustand.js
• uses use-wasd

• uses zustand.js

• uses zustand.js

---

zustand.js

• can add using spreading
• can delete using filter()
• can complete using map()

Note that zustand.js as a global state management system can be imported directly into components, no matter how deep they are nested in the tree.

• can be accessed by every component
• useStore.getState().fetchPlanets() syntax allows us leavingfetchPlanets out of useEffect dependency array

Doesn't have everything, but enough to gain a much deeper understanding.

---

styled-components

• similar to mui's Button Component
• can be used for every button and link in your app

• similar to mui's Typography Component
• can be used for every piece of text in your app
• accepts children, variant, component and every other prop you want to use

Setting component (semantic) independently from variant (styling) separates concerns.

Does not have all the features by far, but the most basic functionality becomes more accessible and comprehensible.

---

use-wasd

• highly complicated

---