React

Component-based UI with a virtual DOM.

React is taught here in 13 lessons, running from Components and props through to Production builds, environment config and deployment. Each lesson takes one topic, shows the working code, and links onward to the next, so the course can be read straight through in order.

Lessons

1. Components and propsFunction components, JSX rules, prop passing with destructuring, children, and the keys rule for every list you render.
2. State with hooksuseState and useReducer, batched updates, immutable updates for objects and arrays, and deriving values instead of storing them.
3. Effects and data fetchinguseEffect dependencies and cleanup, why fetching in an effect has sharp edges, and what production code does instead.
4. Setting up a React project with ViteScaffold with create-vite, understand the folder layout, how Fast Refresh and the automatic JSX transform work, and the TypeScript and lint defaults.
5. Events, forms and controlled inputsSynthetic events and handler references, controlled versus uncontrolled inputs, file inputs that cannot be controlled, and server-side validation.
6. Component composition and reusable APIsChildren as an API, named slots, compound components that share state, render props, headless hooks, and when a component should be split.
7. Context, refs and escape hatchesProviders and consumers without prop drilling, memoising a context value, refs for values and DOM nodes, portals, and imperative handles.
8. Custom hooks and sharing logicNaming and the rules of hooks, extracting stateful logic, composing hooks, subscribing to external stores, and testing a hook directly.
9. Routing with React RouterRoute configuration and nested layouts, params and search params, loaders and actions, lazy routes, and showing pending navigation state.
10. Server components, actions and the use APIServer and client components, streaming, useActionState and useOptimistic, reading promises with use, Suspense and error boundaries.
11. Performance, memoisation and transitionsMeasure first with the Profiler, when memo, useMemo and useCallback pay for themselves, and keeping input responsive with transitions and deferred values.
12. Testing React componentsVitest with React Testing Library, queries a user would use, user-event for real interactions, mocking fetch, and accessibility assertions.
13. Production builds, environment config and deploymentWhat Vite emits, route-level code splitting, why VITE_ variables are public, SPA rewrites on static hosts, bundle analysis and error reporting.

More in Front-end Development

HTML CSS JavaScript TypeScript HTML DOM AJAX JSON Tailwind CSS Bootstrap 5 Foundation Vue.js Next.js Angular jQuery ECharts Chart.js SVG Font Awesome

FAQ