Skip to content

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

License

Notifications You must be signed in to change notification settings

doemser/dead-simple-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

dead-simple-react

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

Edit in Codesandbox Edit in Codesandbox

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

Edit in Codesandbox Edit in Codesandbox

Deleting to-do A deletable to-do list.
  • uses filter() method to delete item
  • has no confirm message

Edit in Codesandbox Edit in Codesandbox

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.

Edit in Codesandbox Edit in Codesandbox


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

Edit in Codesandbox Edit in Codesandbox

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

Edit in Codesandbox Edit in Codesandbox

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()

Edit in Codesandbox Edit in Codesandbox

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

Edit in Codesandbox Edit in Codesandbox

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.

Edit in Codesandbox Edit in Codesandbox

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.

Edit in Codesandbox Edit in Codesandbox


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()

Edit in CodesandboxEdit in Codesandbox

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

Edit in Codesandbox Edit in Codesandbox

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

Edit in Codesandbox Edit in Codesandbox

Review Writer A form that submits 5-star reviews.
  • uses Array.from()

Edit in Codesandbox Edit in Codesandbox


Fetching

Fetching - nested fetching Fetch that receives data including another url you need to fetch.
  • uses async/await
  • uses a loading state

Edit in Codesandbox Edit in Codesandbox

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.

Edit in Codesandbox Edit in Codesandbox


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

Edit in Codesandbox Edit in Codesandbox

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

Edit in Codesandbox Edit in Codesandbox

useFetch Custom hook you can use to fetch.
  • returns an object with 3 values
  • returns data
  • returns returns loading state
  • returns returns error state

Edit in Codesandbox Edit in Codesandbox


Games

Memory Cards This is a super minimal version of a memory cards game.
  • uses zustand.js

Edit in Codesandbox Edit in Codesandbox

Arcade Survival Game This is a super minimal version of an arcade game.
  • uses zustand.js
  • uses use-wasd

Edit in Codesandbox Edit in Codesandbox

Conway´s Game of Life This is a super minimal version of the most famous zero player game.
  • uses zustand.js

Edit in Codesandbox Edit in Codesandbox

Tic-Tac-Toe As a local multiplayer version.
  • uses zustand.js

Edit in Codesandbox Edit in Codesandbox


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.

Edit in Codesandbox Edit in Codesandbox

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

Edit in Codesandbox Edit in Codesandbox

API imitation Mimics the zustand.js library.

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

Edit in Codesandbox


Button-Link-Component Custom component that either returns a button or an anchor.

Edit in Codesandbox

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.

Edit in Codesandbox

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.

Edit in Codesandbox


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

Edit in Codesandbox

Combos example Lets you declare custom keyboard combos/shortcuts.

Edit in Codesandbox

Initial value example Lets you initialize the hook.

Edit in Codesandbox

Prevent default example Lets you prevent default browser behavior for keys.

Edit in Codesandbox

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

Edit in Codesandbox

Vanilla Source Code This is the no typescript version of useWASD npm package.
  • highly complicated

Edit in Codesandbox