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

---

To-do App - Principles

Adding to-do

A form that submits to-dos to a list.

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

Completing to-do

A completable to-dos list.

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

Deleting to-do

A deletable to-do list.

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

Editing to-do

An editable to-do list.

• 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

Adding to-do - multiple inputs

A form that submits to-dos with multiple values to a list.

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

Deleting to-do - confirm message

A deletable todo list that asks for confirmation before deleting.

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

Deleting to-do - move to trash

A deletable todo list that moves item to trash list.

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

Editing to-do - keeping data clean

An editable to-do list with nested edit mode toggle.

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

Saving to-do - using localStorage

A todo-list that is saved in your localStorage.

• 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.

Sorting to-do - swapping neighbors

Todo-list which allows you to swap neighboring to-dos.

• 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

Color Palette Creator

A form that submits colors to a list from where you can copy the hex codes.

• 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.

Budget Planner

A form that submits expenses and calculates a budget.

• 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

Speech Synthesizer

A form that says what you submit to a list from which you can say it again.

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

Review Writer

A form that submits 5-star reviews.

• uses Array.from()

---

Fetching

Fetching - nested fetching

Fetch that receives data including another url you need to fetch.

• uses async/await
• uses a loading state

Fetching - handling race conditions

Fetch with pagination that handles race conditions.

• 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

useMousePosition

Custom hook that returns the position of the mouse.

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

usePagination

Custom hook you can use to implement pagination.

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

useFetch

Custom hook you can use to fetch.

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

---

Games

Memory Cards

This is a super minimal version of a memory cards game.

• uses zustand.js

Arcade Survival Game

This is a super minimal version of an arcade game.

• uses zustand.js
• uses use-wasd

Conway´s Game of Life

This is a super minimal version of the most famous zero player game.

• uses zustand.js

Tic-Tac-Toe

As a local multiplayer version.

• uses zustand.js

---

zustand.js

To-do App

To-do App that uses global state with 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.

Fetching

Fetch that uses global state with zustand.js.

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

API imitation

Mimics the zustand.js library.

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

---

styled-components

Button-Link-Component

Custom component that either returns a button or an anchor.

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

Typography-Component

Custom component that returns styled text components depending on the props you pass.

• 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.

API imitation

Imitates the most basic feature of styled-components.

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

---

use-wasd

Basic example

Returns an object containing the keys you pressed and whether you are currently pressing them.

Combos example

Lets you declare custom keyboard combos/shortcuts.

Initial value example

Lets you initialize the hook.

Prevent default example

Lets you prevent default browser behavior for keys.

ref example

Lets you attach the event listener to a different element than the window.

Vanilla Source Code

This is the no typescript version of useWASD npm package.

• highly complicated

---