React Tutorial

What is React? React is a JavaScript library by Meta for building user interfaces from small reusable pieces called components . Instead of manipulating the DOM by hand, you ...

The Modern Setup (Vite) Vite replaced Create React App: instant start, fast refresh, tiny config. Your First Component JSX Rules in 60 Seconds Return one root element (or a ...

Props: Data Flowing Down Props are read-only inputs. Never mutate them - lift changes up via callbacks. State with useState Events Controlled Inputs Pattern Input value always ...

Show, Hide, Swap Rendering Lists (Keys Matter) Keys must be stable unique ids - never array indexes for changing lists, or React reuses the wrong DOM nodes. Empty States Every ...

The Effect Pattern Fetching on Mount The Three Dependency Shapes No array - runs after every render (rarely what you want). [] empty - runs once on mount. [a, b] - runs when ...

useMemo: Expensive Derivations Recalculates only when books changes. Do not memoise cheap work - the comparison itself costs. useCallback: Stable Function Identity Pass to ...

Extract a Hook useFetch in 20 Lines Hook Rules (Never Break) Call hooks at the top level only - never in loops, conditions or nested functions. Only call hooks from React ...

Setup Links and Params Nested Layout Routes Protected Routes Pattern Key Points Routes are components - compose them like UI. useParams for ids, useNavigate for redirects. Layouts ...

Controlled Form Pattern Inline Validation React Hook Form + Zod (Production Way) Key Points Small forms: controlled state is enough. Real forms: Hook Form plus Zod (less code, ...

Level 1: Lift State (Most Cases) Shared between siblings? Move useState to their common parent and pass props. No library needed for most apps. Level 2: Context for Truly Global ...

Plain fetch (Know It Cold) Axios for Ergonomics React Query (Server State Done Right) Caching, retries, background refetch and loading states come free - stop hand-rolling them ...

Setup (Vite Projects) Test What Users Do Mocking Fetch What NOT to Test Implementation details (internal state names), third-party components, or CSS. Test behaviour: type, click, ...

Why Next.js After React SEO, first-load speed, API routes and image optimisation out of the box. Most React jobs are actually Next.js jobs now. Setup and Structure Server vs ...

Token Flow (Any Backend) Store JWT in memory or httpOnly cookies (XSS-safe); localStorage is convenient but XSS-readable - know the trade-off. NextAuth.js (Next.js Apps) Route ...

Tailwind (Recommended Default) Utility classes colocated with markup; design system via config tokens. This very site uses it. CSS Modules (Scoped Styles) Dark Mode Pattern ...

Find the Bottleneck First React DevTools Profiler - record an interaction, sort by render time. Optimise the top offender, not random components. Code Splitting Routes Each route ...

Project 1: Book Catalog SPA Search, filters, detail pages, favourites in localStorage. Proves: components, hooks, router, forms. Project 2: Quiz App with Timer Timed questions, ...

Core React (20) Virtual DOM vs real DOM - how reconciliation works? Functional vs class components - why hooks won? Props vs state? One-way data flow benefits? What are keys and ...