JSX

All videos (75)

• FreeVideo 1What is JavaScript, and setupBrowser vs Node, VS Code, console, Node/npm install, course roadmap.+
• Video 2Variables and data typesLet/const/var, primitives vs objects, typeof, copy by value vs reference.+
• Video 3Operators, equality and truthy/falsy== vs ===, coercion, ?? vs OR, ?., ternary.+
• Video 4if, switch and loopsConditionals, for/while, for...of vs for...in, break/continue.+
• Video 5FunctionsDeclaration/expression/arrow, default and rest params, arrow vs normal.+
• Video 6Strings and numbersTemplate literals, string methods, Number/Math, regex basics.+
• Video 7Arrays: map, filter, reduceArray methods, mutating vs non-mutating, sort pitfalls, toSorted/with.+
• Video 8Objects, destructuring and spreadObject methods, destructuring, spread/rest, shallow vs deep copy, structuredClone.+
• Video 9Scope, hoisting and execution contextBlock vs function scope, TDZ, call stack.+
• Video 10ClosuresCounter, private state, var-in-loop bug, stale closure (React link).+
• Video 11this, call/apply/bind4 binding rules, arrow functions and this.+
• Video 12Prototypes and classesPrototype chain, class/extends/super, private fields.+
• Video 13From Callbacks to PromisesCallback hell, Promise states, then/catch, Promise.all/allSettled/race/any.+
• Video 14async/await and fetchAsync/await, try/catch, parallel vs sequential, fetch, `res.ok`, AbortController.+
• Video 15Event loopCall stack, Web APIs, microtask vs macrotask, output puzzles.+
• Video 16Modules and error handlingES modules vs CommonJS, dynamic import, custom errors.+
• Video 17Map, Set, JSON and storageMap/Set/WeakMap, JSON, localStorage/sessionStorage.+
• Video 18DOM and eventsSelect/create/update elements, bubbling/capturing, delegation, async/defer.+
• Video 19Debounce, throttle and DevTools debuggingImplement both, breakpoints, Sources/Console, memory leaks.+
• Video 20Mini project: a vanilla JS appA small to-do/search app without React (ties J01–J19 together).+
• Video 21TypeScript basicsWhy TS, basic types, any vs unknown, interface vs type, unions.+
• Video 22TypeScript: the next levelNarrowing, generics, utility types, `as const`, `satisfies`.+
• Video 23What is React and Vite setupUI = f(state), declarative, SPA, Vite project, main.tsx, StrictMode.+
• Video 24JSXJSX rules, expressions, className/style, Fragment, how JSX compiles.+
• Video 25Components and propsFunction components, props, children, composition, typing props.+
• Video 26useState: state in ReactState vs props, snapshot, updater function, batching.+
• Video 27Objects and arrays in stateImmutable updates, derived state, lifting state up.+
• Video 28Events and conditional renderingHandlers, passing args, `&&`/ternary, the `0 &&` gotcha.+
• Video 29Lists and keysMap, key rules, the index-as-key bug.+
• Video 30Forms in ReactControlled vs uncontrolled, many inputs one handler, validation, FormData.+
• Video 31How React rendersTrigger/render/commit, Virtual DOM, reconciliation, when a component re-renders.+
• Video 32useEffect part 1Side effects, dependency array, cleanup, StrictMode double run.+
• Video 33useEffect part 2Fetching with loading/error, race conditions, "you might not need an effect".+
• Video 34useRefDOM access, values without re-render, ref vs state, ref as prop (React 19).+
• Video 35ContextCreateContext, provider pattern (theme/auth), re-render cost.+
• Video 36useReducerReducer, actions, useState vs useReducer, reducer + context store.+
• Video 37memo, useMemo, useCallback and the React CompilerWhen memo helps, when not, the compiler.+
• Video 38Custom hooksExtracting logic: useFetch, useLocalStorage, useDebounce.+
• Video 39React 19 hooksUse(), useActionState, useFormStatus, useOptimistic, useTransition/useDeferredValue.+
• Video 40Portals, error boundaries, Suspense and lazyModals via portal, error boundaries, code splitting.+
• Video 41React patternsComposition, compound components, render props, HOC, custom-hook pattern.+
• Video 42React + TypeScript in practiceTyping state/refs/events/context, generic components.+
• Video 43React Router basicsRoutes, nested layouts, params, Link/NavLink, navigation.+
• Video 44React Router advancedProtected routes, search params, loaders/actions (data mode).+
• Video 45State management: what goes whereLocal vs context vs store vs server vs URL state.+
• Video 46Redux ToolkitSlices, store, async thunks, typed hooks.+
• Video 47ZustandStore, selectors, persist middleware.+
• Video 48TanStack Query part 1UseQuery, query keys, staleTime/caching, loading/error.+
• Video 49TanStack Query part 2UseMutation, invalidation, optimistic updates, infinite queries.+
• Video 50Axios and the API layerInstance, interceptors, token refresh, error handling.+
• Video 51Styling options and Tailwind v4CSS Modules vs Tailwind vs CSS-in-JS, Tailwind setup, variants, `cn()`.+
• Video 52UI libraries and animationsShadcn/ui, Radix, Motion basics.+
• Video 53React Hook Form + ZodRegister, errors, Controller, field arrays, Zod schemas.+
• Video 54Testing ReactVitest, Testing Library queries, user-event, MSW, Playwright intro.+
• Video 55AccessibilitySemantic HTML, ARIA, keyboard, focus management.+
• Video 56Web performanceCore Web Vitals, re-render fixes, virtualization, image/bundle tips.+
• Video 57Build tools and deploy (SPA)What bundlers do, Vite config, env vars, Vercel/Netlify/Nginx.+
• Video 58Why Next.js and setupReact vs Next, create-next-app, project structure.+
• Video 59App Router and file conventionsPage/layout/template/loading/error/not-found.+
• Video 60Advanced routingDynamic, catch-all, route groups, parallel and intercepting routes.+
• Video 61Server Components vs Client Components'use client', boundaries, serialisable props, hydration errors.+
• Video 62Rendering: SSR, SSG, ISR, streamingWhen to use which, PPR.+
• Video 63Data fetching in Next.jsAsync server components, parallel fetch, Suspense.+
• Video 64Caching and revalidationNext 16 caching model, `'use cache'`, revalidatePath/revalidateTag.+
• Video 65Server ActionsForms, useActionState, validation with Zod, auth checks.+
• Video 66Route Handlers and proxy (middleware)API routes, NextRequest/Response, proxy.ts, Server Action vs Route Handler.+
• Video 67Database in Next.jsPrisma/Drizzle basics, queries from server components (gap fill).+
• Video 68Authentication in Next.jsAuth.js / Better Auth, protecting pages, actions and routes.+
• Video 69Metadata, SEO and optimisationMetadata API, OG images, next/image, next/font, next/script.+
• Video 70Env vars, config and deploymentNEXT_PUBLIC_, next.config, Vercel, Docker standalone.+
• Video 71Project: plan and setupFull-stack app (e.g. course or shop app): requirements, structure.+
• Video 72Project: featuresAuth, database, server actions, UI.+
• Video 73Project: polish and deployTesting, performance, deploy.+
• Video 74Frontend system designRADIO framework, autocomplete, news feed, polling vs SSE vs WebSocket.+
• Video 75Interview prepJS output puzzles, React/Next most-asked questions, machine-coding tips.+