React and TypeScript Projects
Code examples and project starter kits for my React and TypeScript.
Set Up
You probably only need to run npm install
in each of the projects.
Use npx recursive-install
to install all of the dependencies for all of the examples as well.
Sandboxes
CodeSandbox environments are available for every example in this workshop.
- 01-nametag
- 02-nametag-with-props
- 03-nametag-with-optional-props
- 04-typing-children
- 05-typing-children-with-styling
- 06-avengers-quiz
- 07-avengers-quiz-with-use-state
- 08-character-card
- 09-character-card-eventual-state
- 10-broken-counter
- 11-fixed-counter
- 12-counter-class-based
- 13-counter-class-based-with-state
- 14-counter-for-hooks
- 15-counter-with-hooks-and-events
- 16-dog-facts
- 17-dog-facts-complete
- 18-pizza-calculator
- 19-pizza-calculator-complete
- 20-incident-counter-reducer-exercise
- 21-incident-counter-reducer-solution
- 22-color-swatch-base
- 23-color-swatch-passing-dispatch
- 24-color-swatch-with-theme-context
- 25-color-swatch-with-state-context
- 26-color-swatch-refactored
- 27-character-card-base-for-utility-types
- 28-character-card-with-utility-types
- 29-utility-types-exercise
- 30-utility-types-solution
- 31-color-swatch-with-template-literals
- 32-character-card-with-hoc
- 33-nametag-hoc-exercise
- 34-nametag-hoc-solution
- 35-buttons-base
- 36-buttons-with-limited-props
- 37-buttons-polymorphic
- 38-as-props-exercise
- 39-as-props-solution
- 40-truncated-text
- 41-truncated-text-complete
- 42-better-context-and-inputs