React.js: Complete Course

What is React and why use it over plain JavaScript

React definition, virtual DOM, declarative UI, component-based architecture, React vs vanilla JS, when to use React

How to set up a React project with Vite

Node.js requirement, Vite vs Create React App, scaffolding project, folder structure, npm run dev, hot module replacement

JSX syntax rules every React developer must know

JSX vs HTML differences, className, self-closing tags, JavaScript expressions in JSX, single root element, JSX compilation to React.createElement

React components explained: functions vs classes

functional components, class components, component naming conventions, rendering components, component composition, why functional components are preferred

How props work in React components

passing props, receiving props, props destructuring, default props, prop types validation, props are read-only, children prop

useState hook explained with practical examples

useState syntax, state initialization, state variable, setter function, re-render on state change, functional updates, state with different data types

How React event handling works

synthetic events, onClick, onChange, onSubmit, event object, preventDefault, event delegation, passing arguments to handlers

Controlled vs uncontrolled components in React forms

controlled inputs, uncontrolled inputs, useRef for uncontrolled, two-way binding pattern, form state management, when to use each approach

Lifting state up in React component trees

shared state problem, lifting state pattern, passing callbacks as props, sibling communication, single source of truth, when to lift state

How to render lists and use keys correctly in React

Array.map for rendering, key prop purpose, key uniqueness requirements, index as key pitfalls, conditional rendering, short-circuit evaluation

useEffect hook: side effects and lifecycle in functional components

useEffect syntax, dependency array, cleanup function, component mount/unmount, common side effects, stale closure with deps, effect on every render

useRef hook: DOM access and mutable values in React

useRef syntax, DOM element access, mutable ref container, ref vs state, focus management, previous value tracking, avoiding re-renders with refs

useReducer hook: managing complex state logic

useReducer syntax, reducer function, action object, dispatch, when to prefer over useState, reducer vs Redux, initializer function

useMemo and useCallback: when and how to use memoization

useMemo syntax, useCallback syntax, referential equality, memoization cost, when NOT to memoize, dependency arrays, preventing unnecessary child re-renders

How to build custom hooks in React

custom hook definition, naming convention, composing built-in hooks, useLocalStorage example, useFetch example, sharing logic without HOC, rules of hooks

React Context API: solving prop drilling

createContext, Context.Provider, useContext hook, prop drilling problem, context value updates, context with useState, when not to use context

Compound component pattern in React

compound components definition, shared implicit state, Context for compound components, dot notation API, Tabs example, Select example, composability benefits

Higher-order components (HOC) pattern explained

HOC definition, wrapping pattern, withAuth example, displayName, prop forwarding, HOC vs hooks comparison, when HOCs still make sense

React.memo and performance optimization for components

React.memo, shallow comparison, when to use memo, memo with custom comparator, memo vs useMemo, unnecessary re-renders, profiling with React DevTools

Render props pattern in React

render props definition, children as function, sharing stateful logic, render props vs hooks, mouse tracker example, data provider pattern, pitfalls

React Router v6 setup and basic routing

BrowserRouter, Routes, Route, Link, NavLink, useNavigate, SPA routing concept, hash vs history routing, Outlet

Dynamic routes and URL parameters in React Router

route params with :id, useParams hook, query strings, useSearchParams, nested routes, Outlet component, index routes

Protected routes and authentication in React Router

protected route pattern, Navigate component, useLocation for redirect, auth context integration, role-based access, lazy loading routes

Code splitting and lazy loading routes in React

React.lazy, Suspense fallback, dynamic import, route-based code splitting, bundle size benefits, Suspense boundaries, loading states

React Router data APIs: loaders and actions

createBrowserRouter, loader function, useLoaderData, action function, Form component, defer and Await, error boundaries with errorElement

Client state vs server state: understanding the difference

client state definition, server state definition, why they need different tools, synchronization problem, stale data, local vs remote ownership, state categories

Zustand: global state management without boilerplate

Zustand create function, store definition, state and actions together, useStore hook, selectors, shallow equality, devtools middleware, persist middleware

React Query: fetching and caching server data

TanStack Query setup, QueryClient, QueryClientProvider, useQuery hook, queryKey, queryFn, loading and error states, automatic refetching, staleTime, cacheTime

React Query mutations: creating, updating, and deleting data

useMutation hook, mutate function, onSuccess callback, onError callback, optimistic updates, invalidateQueries, mutation state, mutateAsync

Combining Zustand and React Query in a real app

separation of concerns, server state in React Query, UI state in Zustand, derived state, avoiding duplication, real app architecture, devtools setup