Dead simple, advanced examples to learn to love react and some of its libraries.
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.
Adding to-do - multiple inputs
A form that submits to-dos with multiple values to a list.- uses
new FormData()andObject.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 withmap()
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
useSyncExternalStoreor 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.
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 - 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.
useMousePosition
Custom hook that returns the position of the mouse.- uses
window.addEventListener()andwindow.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
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
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 leavingfetchPlanetsout of useEffect dependency array
API imitation
Mimics the zustand.js library.Doesn't have everything, but enough to gain a much deeper understanding.
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,componentand 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.
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent