https://github.com/drakealia/react-and-typescript-examples
https://github.com/drakealia/react-and-typescript-examples
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/drakealia/react-and-typescript-examples
- Owner: DrakeAlia
- Created: 2022-06-20T19:49:31.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-26T06:39:56.000Z (about 4 years ago)
- Last Synced: 2025-02-22T04:26:25.065Z (over 1 year ago)
- Size: 373 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React and TypeScript Projects
Code examples and project starter kits for my [React and TypeScript][course].
## 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.
[course]: https://stevekinney.github.io/react-and-typescript
## Sandboxes
CodeSandbox environments are available for every example in this workshop.
- [01-nametag](https://codesandbox.io/s/name-tag-bts5l?file=/src/Application.tsx)
- [02-nametag-with-props](https://codesandbox.io/s/name-tag-solution-slwmk?file=/src/Application.tsx)
- [03-nametag-with-optional-props](https://codesandbox.io/s/name-tag-solution-optional-props-4c47p?file=/src/Application.tsx)
- [04-typing-children](https://codesandbox.io/s/typescript-children-3vu37?file=/src/Application.tsx)
- [05-typing-children-with-styling](https://codesandbox.io/s/typescript-children-completed-with-css-6bx23?file=/src/Application.tsx)
- [06-avengers-quiz](https://codesandbox.io/embed/avengers-quiz-oxm68?file=/src/Application.tsx)
- [07-avengers-quiz-with-use-state](https://codesandbox.io/s/avengers-quiz-use-state-z68vj?file=/src/Application.tsx)
- [08-character-card](https://codesandbox.io/s/character-sheet-base-uxlfu?file=/src/Application.tsx)
- [09-character-card-eventual-state](https://codesandbox.io/s/character-sheet-complete-jb8d4?file=/src/Application.tsx)
- [10-broken-counter](https://codesandbox.io/s/broken-counter-tiu6u?file=/src/App.tsx)
- [11-fixed-counter](https://codesandbox.io/s/fixed-counter-tct1f?file=/src/Application.tsx)
- [12-counter-class-based](https://codesandbox.io/s/incident-counter-class-based-4h4d5file=/src/Application.tsx)
- [13-counter-class-based-with-state](https://codesandbox.io/s/incident-counter-class-based-completed-p1fio?file=/src/Application.tsx)
- [14-counter-for-hooks](https://codesandbox.io/s/incident-counter-5rvp3?file=/src/Application.tsx)
- [15-counter-with-hooks-and-events](https://codesandbox.io/s/incident-counter-hooks-complete-or2pz?file=/src/Application.tsx)
- [16-dog-facts](https://codesandbox.io/s/dog-facts-24bqt?file=/src/Application.tsx)
- [17-dog-facts-complete](https://codesandbox.io/s/dog-facts-complete-80d61)
- [18-pizza-calculator](https://codesandbox.io/s/pizza-calculator-redux-2cd2b?file=/src/Application.tsx)
- [19-pizza-calculator-complete](https://codesandbox.io/s/pizza-calculator-reducer-complete-y6vjc?file=/src/Application.tsx)
- [20-incident-counter-reducer-exercise](https://codesandbox.io/s/incident-counter-reducer-base-cgsin?file=/src/Application.tsx)
- [21-incident-counter-reducer-solution](https://codesandbox.io/s/incident-counter-reducer-complete-yryxm?file=/src/Application.tsx)
- [22-color-swatch-base](https://codesandbox.io/s/red-green-blue-k6frm?file=/src/Application.tsx)
- [23-color-swatch-passing-dispatch](https://codesandbox.io/s/red-green-blue-with-dispatch-8ketd?file=/src/ColorSlider.tsx)
- [24-color-swatch-with-theme-context](https://codesandbox.io/s/red-green-blue-with-theme-context-bzykq?file=/src/Application.tsx)
- [25-color-swatch-with-state-context](https://codesandbox.io/s/red-green-blue-with-context-hoiiz?file=/src/Application.tsx)
- [26-color-swatch-refactored](https://codesandbox.io/s/red-green-blue-with-better-color-adjustment-nppsf?file=/src/ColorInput.tsx)
- [27-character-card-base-for-utility-types](https://codesandbox.io/s/character-sheet-utility-types-base-48cqu)
- [28-character-card-with-utility-types](https://codesandbox.io/s/character-sheet-utility-types-complete-jb8d4?file=/src/Table.tsx)
- [29-utility-types-exercise](https://codesandbox.io/s/fun-with-utility-types-2lmj2?file=/src/Application.tsx)
- [30-utility-types-solution](https://codesandbox.io/s/fun-with-utility-types-solution-x0i28?file=/src/Application.tsx)
- [31-color-swatch-with-template-literals](https://codesandbox.io/s/red-green-blue-with-template-literals-4yf86?file=/src/reducer.ts)
- [32-character-card-with-hoc](https://codesandbox.io/s/character-sheet-utility-with-hoc-3opyk?file=/src/Application.tsx)
- [33-nametag-hoc-exercise](https://codesandbox.io/s/greeting-hoc-fxqnl?file=/src/Application.tsx)
- [34-nametag-hoc-solution](https://codesandbox.io/s/greeting-hoc-completed-v1g48?file=/src/Application.tsx)
- [35-buttons-base](https://codesandbox.io/s/buttons-8yquq?from-embed?file=/src/Application.tsx)
- [36-buttons-with-limited-props](https://codesandbox.io/s/buttons-complete-732fx?file=/src/Application.tsx)
- [37-buttons-polymorphic](https://codesandbox.io/s/buttons-as-n4wnm?file=/src/Application.tsx)
- [38-as-props-exercise](https://codesandbox.io/s/as-prop-base-qmqnc?file=/src/Application.tsx)
- [39-as-props-solution](https://codesandbox.io/s/as-prop-complete-x4ifs?file=/src/Application.tsx)
- [40-truncated-text](https://codesandbox.io/s/truncated-text-incomplete-hrbi5?file=/src/Application.tsx)
- [41-truncated-text-complete](https://codesandbox.io/s/truncated-text-complete-kbl59?file=/src/Application.tsx)
- [42-better-context-and-inputs](https://codesandbox.io/s/red-green-blue-with-better-context-xmde9?file=/src/create-context.tsx)