https://github.com/frontendmasters/pure-react-state-management
Pure React State Management course documentation
https://github.com/frontendmasters/pure-react-state-management
Last synced: 5 months ago
JSON representation
Pure React State Management course documentation
- Host: GitHub
- URL: https://github.com/frontendmasters/pure-react-state-management
- Owner: FrontendMasters
- Created: 2020-01-07T21:39:49.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-07-08T11:17:29.000Z (over 5 years ago)
- Last Synced: 2025-01-10T10:58:15.835Z (about 1 year ago)
- Homepage:
- Size: 5.86 KB
- Stars: 134
- Watchers: 5
- Forks: 66
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pure React State Management
Here is everything you need to get rocking and rolling for the Pure React State Management course.
## Install
Install these tools in your browser of choice. I'll be using Chrome during the workshop.
- [React Developer Tools](https://github.com/facebook/react-devtools)
## Slides
You can find the slides [here](https://speakerdeck.com/stevekinney/react-state).
## Respositories
Make sure to run `npm install` in each repository.
- [Simple Counter](https://github.com/stevekinney/simple-counter-react-state)
- [Grudge List](https://github.com/stevekinney/grudges-react-state)
- [Star Wars Characters](https://github.com/stevekinney/star-wars-characters-react-state)
- [Awesome Unicorn Startup Sign Up](https://github.com/stevekinney/user-signup-react-state)
### Just for Reference
- [Kanbananza](https://github.com/stevekinney/kanbananza-react-state)
## APIs
We'll be using the following APIs in this workshop:
- [Star Wars Characters](https://star-was-character-search.glitch.me/) ([Source](https://glitch.com/~star-was-character-search))
- [Tweet Stream](https://tweet-stream.glitch.me/)
## Code Sandbox Example Implementations
### Simple Counter: Class-Based State
- [Simple Counter (boilerplate)](https://codesandbox.io/s/github/stevekinney/simple-counter-react-state/blob/master?module=%2Fsrc%2FCounter.js)
- [Simple Counter (adds increment, decrement, and reset)](https://codesandbox.io/s/simple-counter-adds-increment-decrement-reset-rlrc3?module=%2Fsrc%2FCounter.js)
- [Simple Counter (setState function and callback)](https://codesandbox.io/s/simple-counter-setstate-function-and-callback-irm1x?module=%2Fsrc%2FCounter.js)
- [Simple Counter (adds localStorage support, exercise starter for syncing document.title)](https://codesandbox.io/s/simple-counter-adds-localstorage-support-exercise-starter-for-syncing-documenttitle-wxubb?module=%2Fsrc%2FCounter.js)
- [Simple Counter (syncing document.title solution)](https://codesandbox.io/s/simple-counter-syncing-documenttitle-solution-in6r9?module=%2Fsrc%2FCounter.js)
### Simple Counter: Hooks State
- [Simple Counter (refactor to use hooks)](https://codesandbox.io/s/simple-counter-refactored-to-use-hooks-ndwcr?module=%2Fsrc%2FCounter.js)
- [Simple Countner (set value with a function)](https://codesandbox.io/s/simple-counter-set-value-with-a-function-gxshy?module=%2Fsrc%2FCounter.js)
- [Simple Countner (update document.title with useEffect)](https://codesandbox.io/s/simple-counter-update-documenttitle-with-useeffect-hjedr?module=%2Fsrc%2FCounter.js)
- [Simple Counter (useEffect local storage exercise)](https://codesandbox.io/s/simple-counter-useeffect-local-storage-exercise-64x3e?module=%2Fsrc%2FCounter.js)
- [Simple Counter (useEffect local storage solution)](https://codesandbox.io/s/simple-counter-useeffect-local-storage-solution-m854x?module=%2Fsrc%2FCounter.js)
- [Simple Counter (useLocalStorage custom hook)](https://codesandbox.io/s/simple-counter-uselocalstorage-custom-hook-hxvnm?module=%2Fsrc%2FCounter.js)
- [Simple Counter (useRef)](https://codesandbox.io/s/simple-counter-useref-x7x8p?module=%2Fsrc%2FCounter.js)
### Other Projects
- [Grudge List](https://codesandbox.io/s/github/stevekinney/grudges-react-state)
- [Star Wars Characters](https://codesandbox.io/s/github/stevekinney/star-wars-characters-react-state)
- [useAjax Hook](https://codesandbox.io/s/29vhg)
- [Asynchronous State](https://codesandbox.io/s/6z2rkmx6k)
- [Asynchronous State (with Hooks)](https://codesandbox.io/s/zx54l1kzpl)