https://github.com/doemser/dead-simple-react
Dead simple, advanced examples to learn to love react and some of its libraries.
https://github.com/doemser/dead-simple-react
bloat-free examples games kiss mui prototypes react react-hooks styled-components zustand
Last synced: 3 months ago
JSON representation
Dead simple, advanced examples to learn to love react and some of its libraries.
- Host: GitHub
- URL: https://github.com/doemser/dead-simple-react
- Owner: doemser
- License: mit
- Created: 2022-11-22T12:44:20.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-12T10:10:48.000Z (over 2 years ago)
- Last Synced: 2025-04-12T00:15:59.894Z (3 months ago)
- Topics: bloat-free, examples, games, kiss, mui, prototypes, react, react-hooks, styled-components, zustand
- Homepage:
- Size: 530 KB
- Stars: 52
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 
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 leaving`fetchPlanets` out 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](https://mui.com/material-ui/react-button/)
- 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](https://mui.com/material-ui/react-typography/)
- 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
---