FE405
React Web
Faculty
Nikolai Lopin
Software Engineer at Stripe
Course length
Duration
Total hours
Credits
Language
Course type
Fee for single course
Fee for degree students
Skills you’ll learn
Overview
This course is about understanding React, not just using it. Students learn to think in components and then look under the hood to understand what happens beneath the surface: how rendering works in practice, why hooks have rules, and where state should live.
The course begins with building a Single Page Application (SPA), covering components, routing, data fetching, state management, error handling, and testing. Each problem is experienced before introducing the library that solves it. The course then moves into modern React, including Server Components, Server Actions, and the reasons the ecosystem has shifted back towards the server.
Along the way, students rebuild tools they would normally install, such as a virtualised list, a small data-fetching library, or a headless select component, as nothing kills magic like writing it yourself. The course concludes with a self-directed project, demonstrated live and defended orally.
Learning highlights
- Build web application with modern React
- Think in components
- Manage state and data deliberately
- Structure real applications
- Make applications correct and resilient
Course outline
15 classes
The rendering model
- Why React became industry standard.
- React as state → UI; render vs. commit phases.
- What triggers a re-render and what doesn't; referential identity.
- JSX compilation; keys and reconciliation under the hood.
- React-specific TypeScript: typing props, children, generics, discriminated unions.
- One-way data flow and the render-as-snapshot mental model.
- Practice: predict-the-render exercises, then verify in the Profiler.
State & hook mechanics
- UseState snapshots, batching, updater functions.
- The rules of hooks as a consequence of call-order.
- Derived vs. stored state; computing during render.
- UseReducer for complex transitions; typing actions.
- Custom hooks: extracting and composing stateful logic.
- Challenge: trigger a stale-closure bug on purpose, then hunt it down.
Effects, refs & escape hatches
- UseEffect as synchronisation, not "run on mount".
- The dependency array as a contract; cleanup and aborting.
- When you don't need an effect (the most common React mistake.)
- UseRef, useLayoutEffect and DOM access.
- UseImperativeHandle and when imperative is correct.
- Challenge: find a deliberately broken effect, diagnosed via lint + Profiler.
Data fetching: raw, then real
- Fetch in effects: the four request states, race conditions, abort.
- Why this doesn't scale — waterfalls, no caching, no dedup.
- TanStack Query, SWR: caching, background refetch, mutations.
- Server state vs. client state as the core distinction.
- Optimistic updates and cache invalidation.
- Practice: build raw, then refactor to Query and measure the code you delete.
Client-side routing & app structure
- React Router 7: nested routes, layouts, Outlet.
- Data loaders and actions — fetching tied to the route, not the component.
- ErrorElement: route-level error boundaries.
- URL as state: search params, navigation, redirects.
- Composition patterns and anti-patterns, read in a real routed codebase.
- Inspiration: a well-architected open-source app, walked through together (feature-slicing?)
- Final project brainstorm.
State management compared
- The decision tree: server, client, URL, and form state.
- Built-ins ceiling and the Context re-render trap.
- Redux Toolkit, Reatom, etc — trade-offs, not hype.
- Where each kind of state should actually live.
- Choosing deliberately for a given app.
- Activity: one feature built three ways, group debate on the trade-offs.
Error handling
- Error boundaries: what they catch and what they miss.
- Handling async errors (boundaries don't catch them).
- Query and mutation error states with retries.
- Designing honest loading, empty, and error UI states.
- Logging and error reporting in production.
- Challenge: make a feature fail in every possible way, then handle each gracefully.
Suspense & concurrent React
- Suspense as a declarative loading boundary.
- UseTransition and useDeferredValue for responsiveness.
- Streaming and how Suspense enables it.
- Combining Suspense with error boundaries.
- The use hook for reading promises and context.
- Practice: convert manual loading states into Suspense boundaries.
Testing React
- Testing behaviour, not implementation.
- React Testing Library: queries, user-event, async assertions.
- Mocking the network with MSW instead of mocking fetch.
- Testing hooks and async data flows.
- Component vs. integration vs. e2e — where each pays off.
- Practice: test a week-2 feature, including every error path.
Performance & correctness
- Reconciliation, keys, and wasted renders.
- Memo/useMemo/useCallback and the React Compiler that automates them.
- Profiling before optimising; reading flame graphs.
- Code-splitting, lazy loading, bundle discipline.
- Common production footguns.
- Challenge: virtualisation.
Why the server returned: Next.js
- SPA limits: bundle size, data waterfalls, SEO, first paint, auth.
- CSR / SSR / SSG / ISR / streaming — when each applies.
- App Router model, file routing, nested layouts.
- Route-level loading and error conventions.
- Porting a familiar SPA feature into the framework.
- Inspiration: the same routing ideas from week 1, now as framework conventions.
Server Components
- RSC vs. Client Components — the central 2026 shift.
- The "use client" boundary and what serialises across it.
- Async server components; fetching on the server.
- What RSC eliminates (most useEffect fetching) and what it doesn't.
- Composition across the server/client boundary.
- Practice: a server-fetched page with a hydrated client island.
Mutations & forms: Actions
- Server Actions: mutations without hand-built API routes.
- Progressive-enhancement forms.
- UseActionState, useFormStatus, useOptimistic.
- Validation and error handling inside Actions.
- Revalidation and keeping server/client state coherent.
- Practice: a full create / update / delete flow with validation.
Project studio
- Supervised build of a small full-stack React app.
- Architecture review: where every kind of state lives.
- One-on-one desk crits; mini-lectures on the group's real blockers.
- Tests and error states required, not optional.
- Feature freeze: finishing over adding.
- Creativity encourages: hide one genuinely delightful detail in your app.
Demo day & the road ahead
- Live demo of each project; it has to actually run.
- Oral defense: architecture, state decisions, and specific code.
- Walkthrough of error handling and test coverage.
- Peer and instructor feedback, agency-style.
- Where React is heading; what to learn next.
- Reflection: SPA vs. server-first, now that you've built both.
Course materials
Media
Prerequisites
Students should be comfortable with the fundamentals of web development, including:
- HTML and CSS, including basic layout and styling concepts.
- JavaScript fundamentals (variables, functions, arrays, objects, and control flow).
- TypeScript fundamentals (types, interfaces, etc.)
- Modern JavaScript syntax (ES6+), such as arrow functions, modules, and destructuring.
- Basic familiarity with developer tools, such as using a code editor, running commands in a terminal, and inspecting applications in the browser.
No prior experience with React is required, but prior exposure to JavaScript frameworks or libraries will be helpful.
Methodology
Each three-hour session combines theory and demonstration with extended hands-on practice. Students begin every assignment in class, where challenges can be addressed directly with the instructor rather than encountered alone later. Homework continues the work started in class.
Occasionally, group discussions are held to compare different approaches to the same problem. One rule governs the entire course: students do not submit code they cannot explain. Whether written independently or generated using a tool, if a student cannot walk through it line by line, it is not yet theirs.
The teaching draws on the studio model. The instructor circulates during practice, pausing with each student for a brief one-to-one review of work in progress. Mini-lectures during the project phase respond to the group’s real challenges rather than following a fixed plan.
From the end of the first week, students select their final project and begin developing it alongside the daily material. This allows the project to evolve over two weeks rather than being rushed at the end, and enables each new topic to be applied as it is taught.
A recurring theme is rebuilding tools that would normally be installed. By reimplementing a virtualised list or a small data-fetching library, students learn what production abstractions conceal, which is the most effective way to stop treating them as opaque.
A dedicated Slack channel is available for questions and communication with the instructor between sessions.
Grading
Apply for this course
React Web
by Nikolai Lopin
Total hours
45 Hours
Dates
Nov 30 - Dec 18, 2026
Fee for single course
€1500
Fee for degree students
€750
How to secure your spot
Complete the form below to kickstart your application
Schedule your Harbour.Space interview
If successful, get ready to join us on campus
FAQ