README.md

React Sandboxes

Repository used to store all sandboxes that I used during workshops.

Sandboxes

context-api

	Description	Link
🔭	Create context: theme context with setters
🏈	Showcase creating a Custom Provider and Hook for Context

forms

	Description	Link
🔭	React Hook Form Basic example
🔭	React Hook Form Connected Components
🔭	React Hook Form Validation examples

hooks

	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

mobx-mst

	Description	Link
🔭	MobX-state-tree example with NFT Pricing

optimization

	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

patterns

	Description	Link
🔭	Compound Components Pattern
🔭	Flexible Compound Components Pattern
🔭	Recomposable Component Pattern

portals

	Description	Link
🔭	Show event bubbling through portals
🔭	Simple example of using portals

react-query

	Description	Link
🔭	React Query Basics
🔭	useInfiniteQuery example
🏈	Exercise: useQuery with nftlist (Solution)
🏈	Exercise: useQuery with nftlist

react-router

	Description	Link
🔭	Basics: Routes, Route & Outlet
🏈	Exercise: Lazy Loading and Suspense with React Router
🔭	Lazy loading and suspense
🔭	Testing with MemoryRouter

react

	Description	Link
🏈	Showcase all React JSX basics

reconciliation

	Description	Link
🔭	Children & reconciliation

references

	Description	Link
🔭	Callback Refs: focusing an input
🔭	forwardRef: custom input

testing

	Description	Link
🔭	React Testing Library & Jest: testing a component
🔭	React Testing Library: testing a hook