React

Style layouts with selectors, the box model, Flexbox, Grid, responsive rules, and custom properties. Practice turning a simple HTML page into a usable interface across screen sizes.

Use values, variables, functions, arrays, objects, conditions, loops, and scope to express interface behavior. Short exercises build the JavaScript fluency required by React.

Work with destructuring, spread syntax, array methods, closures, modules, and immutable updates. These language features appear throughout modern React code.

Handle events, promises, async functions, HTTP requests, browser storage, and common runtime errors. Build a small JavaScript interface that loads and updates remote data.

Use the terminal, Git, package managers, modules, development servers, and production builds. Create a project with Vite and trace how source files become browser assets.

Follow React’s evolution from reusable components and the virtual DOM through Fiber, Hooks, concurrent rendering, Server Components, and React 19. Connect each shift to the problems it addressed and the code still found in existing applications.

Create a React application, inspect its file structure, mount the root component, and use React Developer Tools. Make edits while following the development server, console, and component tree.

Write JSX expressions, attributes, fragments, and nested elements, and see how JSX becomes JavaScript. Practice translating small HTML interfaces into valid JSX.

Define function components, pass props, accept children, and compose small pieces into larger interfaces. Build reusable cards, panels, and page sections without duplicating markup.

Render conditional content and transform arrays into lists of components. Choose stable keys and handle empty, loading, and alternate interface states.

Respond to clicks, keyboard input, form changes, and pointer events using React’s event system. Pass event handlers through components while keeping behavior explicit.

Add component memory with useState, calculate derived values during rendering, and update objects and arrays without mutation. Build an interactive filterable task list.

Trace the render and commit phases, state snapshots, batching, reconciliation, and component identity. Use this model to predict rerenders and avoid accidental state resets.

Design controlled and uncontrolled inputs, validation messages, submission flows, and accessible error handling. Build a multi-field form that handles pending, success, and failure states.

Use useEffect to synchronize components with timers, subscriptions, network connections, and non-React systems. Separate event-driven work from synchronization and remove effects that only duplicate rendering logic.

Access DOM nodes, store mutable values with useRef, forward refs when necessary, and expose limited imperative handles. Practice focus management and integration with a browser library.

Share values through a component tree with context while controlling unnecessary coupling and rerenders. Apply context to themes, authenticated users, and scoped application services.

Model related state transitions with useReducer and explicit actions. Combine reducers with context when a feature needs predictable shared state without an external store.

Extract reusable stateful behavior into custom Hooks while following the Rules of Hooks. Design stable Hook APIs and test them through realistic consuming components.

Apply plain CSS, CSS Modules, utility classes, and CSS-in-JS while accounting for scoping, theming, and build costs. Choose an approach based on the application rather than fashion.

Build keyboard-operable interfaces with semantic elements, labels, focus control, announcements, and appropriate ARIA. Audit a React screen with browser accessibility tools and fix common failures.

Type component props, events, children, refs, reducers, and custom Hooks with TypeScript. Use unions and generics to make invalid component states harder to represent.

Map URLs to layouts and screens, navigate without full-page reloads, read route parameters, and protect restricted areas. Build nested routes with loading, error, and not-found behavior.

Load data from HTTP APIs, cancel obsolete requests, represent request states, and update server resources. Compare direct fetching in components with route-level and framework-level loading.

Use a server-state library to cache responses, deduplicate requests, revalidate stale data, paginate results, and perform optimistic mutations. Decide which data belongs in remote caches rather than component state.

Choose among local state, lifted state, context, URL state, external stores, and state machines. Implement shared application state while preserving selectors, predictable updates, and developer tooling.

Represent failures with local messages, rejected requests, route errors, and Error Boundaries. Add retry and recovery paths instead of leaving users on blank or broken screens.

Render content outside its visual parent with portals and build accessible dialogs, popovers, tooltips, and menus. Handle focus, dismissal, layering, and event propagation correctly.

Create reusable component contracts with controlled APIs, compound components, render props, and headless behavior. Know when composition is clearer than configuration or inheritance.

Use transitions and deferred values to keep urgent interactions responsive while React prepares slower updates. Distinguish concurrent scheduling from background threads and avoid assumptions about uninterrupted rendering.

Coordinate asynchronous boundaries with Suspense, fallbacks, nested reveals, and streaming-compatible data sources. Design loading experiences that avoid page-wide spinners and disruptive layout changes.

Measure renders with React DevTools Profiler and browser performance tools before changing code. Locate expensive components, repeated work, slow interactions, and large bundles.

Apply memo, useMemo, useCallback, lazy loading, code splitting, virtualization, and stable component boundaries where measurements justify them. Recognize optimizations that add complexity without improving user experience.

Write component tests around visible behavior using a modern test runner and Testing Library. Cover user events, asynchronous updates, network mocks, accessibility queries, and regression cases without testing implementation details.

Test complete browser journeys with tools such as Playwright or Cypress. Create reliable fixtures, intercept network traffic, capture traces, and run critical flows in continuous integration.

Prevent cross-site scripting, unsafe HTML injection, exposed secrets, insecure token storage, dependency attacks, and authorization mistakes. Treat client-side checks as user experience features rather than security boundaries.

Read and maintain class components, lifecycle methods, higher-order components, and legacy context patterns. Convert suitable code to Hooks while preserving behavior and recognizing cases where migration risk outweighs the benefit.

Render React on a server, hydrate it in the browser, and stream HTML in stages. Diagnose hydration mismatches and weigh server rendering against static generation and client-only rendering.

Use Server Components to keep selected rendering and data access on the server while sending less JavaScript to the browser. Design clear boundaries between server and client components and respect serialization constraints.

Process forms and mutations with Actions, useActionState, useFormStatus, and optimistic state. Build pending, validation, rollback, and progressive-enhancement behavior across client and server boundaries.

Use React frameworks to combine routing, layouts, data loading, server rendering, caching, Server Components, and deployment conventions. Compare framework architectures and choose one according to rendering, hosting, and team needs.

Use the React Compiler’s automatic memoization model and write components that remain compatible with static analysis. Evaluate compiler adoption, lint diagnostics, escape hatches, and its relationship to manual memoization.

Design tokens, reusable primitives, themes, documentation, and accessibility standards for a shared component library. Package and version components while protecting consumers from accidental breaking changes.

Format translated text, dates, numbers, currencies, plural forms, and right-to-left layouts. Structure components so language expansion and locale changes do not break the interface.

Create motion with CSS and React animation libraries while respecting reduced-motion preferences. Handle entering, leaving, layout changes, gestures, and animation cleanup without harming responsiveness.

Apply React’s component, state, context, and Hook models to native mobile interfaces. Account for native components, platform APIs, navigation, performance, builds, and the differences from browser React.

Configure production builds, environment variables, source maps, caching, and continuous delivery. Add logs, error reporting, performance monitoring, and release checks that make failures diagnosable after deployment.

Take a feature from user request through interface sketch, component design, state placement, API integration, accessibility, testing, review, deployment, and monitoring. Deliver a production-style React feature with documented decisions and measurable acceptance criteria.

Organize large applications by features and ownership boundaries, manage dependencies, enforce conventions, and plan incremental migrations. Evaluate tradeoffs among monoliths, monorepos, shared packages, and independently delivered frontends.

Map React skills to frontend, full-stack, mobile, design-system, testing, and platform roles. Build proof-of-skill projects, prepare for technical interviews and code reviews, assess optional certifications, and stay current through official releases, proposals, and ecosystem documentation.