Complete React 19 course: JSX, components, props, state, effects, refs, forms and actions, context, reducers, custom hooks, React Router, TanStack Query, performance, Zustand and Redux, testing and deployment.
Each lecture has detailed notes, code examples, interview questions and practice exercises. Follow them in order, or jump to the topic you need.
A comprehensive masterclass lecture covering What is React, Why React, History, Vanilla JS vs React, Angular vs Vue comparison, Core Features, SPA, CSR vs SSR, Ecosystem, Component Architecture, Library vs Framework, and Practical Project Setup.
A comprehensive masterclass guide covering Node.js & npm, npm vs npx, Vite build tool, deep project folder structure breakdown (package.json, package-lock.json, node_modules, src, public, index.html), development vs production builds, and hands-on practical setup.
A masterclass tutorial covering What is JSX, Why JSX, Babel Compilation, Embedding JS Expressions ({}), Attributes & className, Inline Styles, Self-Closing Tags, Fragment Rules, Comments, JSX vs HTML comparison, Common Pitfalls, Interview Questions, and Hands-on Coding.
A masterclass tutorial on What is a Component, Functional Components, PascalCase Naming Conventions, Composition, Reusability, Parent-Child Hierarchy, Default vs Named Exports, Common Mistakes, Interview Questions, and Building a Full Multi-Component Layout Architecture.
A masterclass tutorial covering What are Props, Passing & Receiving Props, Destructuring, Default Values, Read-Only Immutability, Passing Objects, Arrays, Functions (Callbacks), Components, the Children Prop, and Full Code Practice.
A masterclass tutorial covering if/else statements, Ternary Operators, Logical AND (&&), Logical OR (||), Multiple conditions, Conditional Component Trees, Loading UI Spinners, Empty Data States, Error States, Pitfalls, and Interview Questions.
A masterclass tutorial covering Array Rendering, Array.prototype.map(), Keys in React, Reconciliation Diffing Algorithm, Unique Key strategies, Problems with Index as Key, Rendering Objects, Nested Lists, Pitfalls, and Interview Questions.
A masterclass tutorial covering Click Events, Change Events, Submit Events, Keyboard Events, Mouse Events, Event Handlers, Passing Arguments, Synthetic Events, preventDefault(), Event Bubbling & stopPropagation(), Pitfalls, and Interview Questions.
A masterclass tutorial covering What is State, State vs Props comparison matrix, useState hook syntax, Re-rendering trigger mechanics, State Initialization, Multiple state variables, Common Pitfalls, and Interview Questions.
A masterclass tutorial covering Direct State Updates vs Functional Updates (prev => prev + 1), Automatic Batching in React 18, Multiple State Updates, Immutability enforcement, Race Conditions, Common Pitfalls, and Interview Questions.
A masterclass tutorial covering Object State, Updating Object Properties, Spread Operator (...), Nested Object Updates, Immutability Patterns, Common Pitfalls, and Interview Questions.
A masterclass tutorial covering Adding items, Removing items, Updating items, Array.prototype.map(), Array.prototype.filter(), Spread operator for arrays, Immutable array update patterns, Pitfalls, and Interview Questions.
Learn what side effects are and where they belong in a React component. Covers the render and commit phases, useEffect syntax, the three forms of the dependency array, when effects run relative to paint, cleanup functions, Strict Mode's extra setup and cleanup in development, and syncing with external systems such as document.title, timers, event listeners and subscriptions.
Go beyond the basics of useEffect: the exhaustive-deps lint rule, stale closures, object and function dependencies, fetching data safely with AbortController and race-condition handling, loading and error states, useEffectEvent from React 19.2, the 'You Might Not Need an Effect' patterns (derived state, event handlers, resetting state with key), and useLayoutEffect.
Learn React's escape hatches for working outside the render cycle: useRef for mutable values that don't trigger re-renders, DOM refs for focusing, scrolling and measuring, ref as a regular prop in React 19 (no forwardRef), ref callback cleanup functions, useImperativeHandle, createPortal for modals and tooltips, and safely integrating non-React libraries like Chart.js.
Build forms the React way: controlled vs uncontrolled inputs, every input type (text, checkbox, radio, select, textarea, file), one change handler for many fields, hand-written client validation, React Hook Form with Zod, and React 19 form actions with useActionState and useFormStatus, plus accessible labels and error messages.
Learn how to share state between components by keeping a single source of truth and lifting state to the closest common parent, how child components talk back through callbacks, and how to build flexible components with children, slots, compound components, render props, custom hooks and the container/presentational split.
Learn how the Context API solves prop drilling. Covers createContext, rendering <Context> as a provider in React 19 (and the older .Provider), reading context with useContext and use(), default values, real theme/auth/language contexts, splitting and memoizing context values to avoid wasted re-renders, and when not to use context at all.
Learn when to move from useState to useReducer, how to write reducers as pure functions driven by typed actions, and how to combine useReducer with Context for app-wide state. Also covers Immer (use-immer) for simpler immutable updates, structuring state to avoid redundancy and duplication, and thinking about UI as a state machine.
Learn how to extract repeated stateful logic into your own hooks. Covers the rules of hooks, naming, building useToggle, useLocalStorage, useDebounce, useFetch, useMediaQuery and useOnClickOutside, composing hooks together, testing them with renderHook, and the key idea that custom hooks share logic, not state.
Turn a single-page React app into a multi-page experience with React Router v7. Covers client-side routing, declarative mode (BrowserRouter, Routes, Route, Link, NavLink), data mode (createBrowserRouter, RouterProvider, loaders and actions), nested routes with <Outlet>, useParams, useSearchParams, useNavigate, protected routes, 404 pages, lazy-loaded routes and a short look at framework mode.
Learn why server state needs its own tool and how TanStack Query v5 manages it. Covers QueryClient setup and Devtools, useQuery and query keys, loading and error UI, caching with staleTime vs gcTime, refetching, useMutation with invalidateQueries, optimistic updates, paginated and infinite queries, and Suspense mode with useSuspenseQuery.
Learn how React re-renders and how to measure it with the React DevTools Profiler before optimizing. Covers React.memo, useMemo, useCallback, when memoization is wasted, automatic memoization with React Compiler 1.0, code splitting with lazy() and Suspense, useTransition and useDeferredValue, list virtualization, avoiding layout thrash and keeping your bundle small.
A complete React 19 tutorial covering Actions and async transitions, useActionState, useFormStatus, useOptimistic, the use() hook for promises and context, ref as a prop, the <Context> provider shorthand, document metadata, stylesheets, <Activity>, useEffectEvent, React Server Components and the experimental ViewTransition.
Master global state management in React with Zustand v5 and Redux Toolkit 2. Covers when Context is not enough, Zustand stores, selectors, useShallow, persist middleware, configureStore, createSlice, useSelector, useDispatch, RTK Query, and choosing between Context, Zustand, Redux or TanStack Query.
A complete guide to testing React applications: the testing pyramid, Vitest setup with jsdom in a Vite project, React Testing Library queries (getByRole first), user-event, async tests with findBy and waitFor, renderHook, mocking APIs with MSW, snapshot caveats, accessibility tests and Playwright E2E.
Ship a production-ready React app: compare CSS Modules, Tailwind CSS v4 and CSS-in-JS, apply accessibility essentials (semantic HTML, ARIA, keyboard focus, color contrast), use Vite environment variables, build and preview, deploy to Vercel or Netlify with SPA fallback routing, add error boundaries and plan your capstone project.