Repository used to store all sandboxes that I used during workshops.
| Description | Link | |
|---|---|---|
| 🔭 | Create context: theme context with setters |  |
| 🏈 | Showcase creating a Custom Provider and Hook for Context | |
| Description | Link | |
|---|---|---|
| 🔭 | React Hook Form Basic example | |
| 🔭 | React Hook Form Connected Components | |
| 🔭 | React Hook Form Validation examples | |
| Description | Link | |
|---|---|---|
| 🔭 | Hooks: flow | |
| 🔭 | useDebugValue: useCounter example | |
| 🔭 | useImperativeHandle: inversion of control with input focus | |
| 🔭 | useLayoutEffect: Counter Example | |
| 🔭 | useLayoutEffect: scroll example | |
| 🔭 | useReducer example: Increment/Decrement | |
| 🔭 | useRef: long-live objects example | |
| 🔭 | useRef: select textarea content on mount | |
| 🔭 | useState: Batching | |
| 🔭 | useState: Example | |
| 🔭 | useState: illustrate pitfall with imperative programming | |
| Description | Link | |
|---|---|---|
| 🔭 | MobX-state-tree example with NFT Pricing | |
| Description | Link | |
|---|---|---|
| 🏈 | Exercise: code splitting Company Map (Solution) | |
| 🏈 | Exercise: code splitting Company Map | |
| 🔭 | Context API: Context Update and Children update/Memoization | |
| 🏈 | Exercise board for performance optimization | |
| 🔭 | pitfall: Creating a component from a component | |
| 🏈 | Exercise: context improvements | |
| 🔭 | React.memo: memoizing a component | |
| 🔭 | Separate context state and setters | |
| Description | Link | |
|---|---|---|
| 🔭 | Compound Components Pattern | |
| 🔭 | Flexible Compound Components Pattern | |
| 🔭 | Recomposable Component Pattern | |
| Description | Link | |
|---|---|---|
| 🔭 | Show event bubbling through portals | |
| 🔭 | Simple example of using portals | |
| Description | Link | |
|---|---|---|
| 🔭 | React Query Basics | |
| 🔭 | useInfiniteQuery example | |
| 🏈 | Exercise: useQuery with nftlist (Solution) | |
| 🏈 | Exercise: useQuery with nftlist | |
| Description | Link | |
|---|---|---|
| 🔭 | Basics: Routes, Route & Outlet | |
| 🏈 | Exercise: Lazy Loading and Suspense with React Router | |
| 🔭 | Lazy loading and suspense | |
| 🔭 | Testing with MemoryRouter | |
| Description | Link | |
|---|---|---|
| 🏈 | Showcase all React JSX basics | |
| Description | Link | |
|---|---|---|
| 🔭 | Children & reconciliation | |
| Description | Link | |
|---|---|---|
| 🔭 | Callback Refs: focusing an input | |
| 🔭 | forwardRef: custom input | |
| Description | Link | |
|---|---|---|
| 🔭 | React Testing Library & Jest: testing a component | |
| 🔭 | React Testing Library: testing a hook | |