Skip to main content
ANVISoftware Solutions

React & Next.js

Intermediate22-28 hours5 modules18 lessons

Build component-driven interfaces with React, then add routing, rendering strategies and data fetching with Next.js.

Start the first lesson

Prerequisites

  • HTML, CSS and JavaScript fundamentals
  • Basic TypeScript

Technologies

About this course

React asks you to describe what the interface should look like for a given state, and then keeps the screen in step with that description. This course builds that mental model first, because most React difficulties are really state-modelling difficulties.

Hooks are introduced once there is a problem that needs them, not as a list of APIs to memorise. Effects in particular are taught with emphasis on when you do not need one, since unnecessary effects cause a large share of React bugs.

Next.js then adds the surrounding structure: file-based routing, the server and client component split, data fetching, and metadata for search visibility.

Course roadmap

All 18 lessons are written and available.

Module 01

React Core

Components, JSX and props — the whole model in three ideas.

4/4 ready
  1. 01Thinking in ComponentsDescribe what a component is and split an interface into sensible ones.13 min
  2. 02JSXWrite markup in JavaScript and understand what it compiles to.14 min
  3. 03PropsPass data into components with typed, well-named props.15 min
  4. 04Lists and KeysRender collections correctly with stable keys.14 min

Module 02

State and Hooks

Model what changes, and use hooks when there is a reason to.

4/4 ready
  1. 01StateModel changing values so the UI follows from them.16 min
  2. 02HooksUse the common hooks and respect the rules that govern them.15 min
  3. 03Effects, and When You Do Not Need OneSynchronise with the outside world without misusing effects for derived values.18 min
  4. 04FormsBuild accessible controlled forms with validation.17 min

Module 03

Data Fetching

Load data, cache it sensibly, and show the states in between.

3/3 ready
  1. 01Fetching DataLoad data and keep it in step with what the user is viewing.17 min
  2. 02Loading and Error StatesDesign for slow and failed requests as first-class states.15 min
  3. 03Composition PatternsShare behaviour without prop drilling or premature abstraction.16 min

Module 04

Next.js

Routing, layouts, and the server-versus-client decision.

4/4 ready
  1. 01Routing and LayoutsUse file-based routing and share layout across pages.16 min
  2. 02Server and Client ComponentsDecide where a component should run, and why it matters.17 min
  3. 03Data Fetching and CachingFetch on the server and control how results are cached.18 min
  4. 04Metadata and SEOSet titles, descriptions and social metadata per route.14 min

Module 05

Performance and Accessibility

Make it fast and make it usable by everyone — both are engineering work.

3/3 ready
  1. 01PerformanceMeasure and reduce unnecessary rendering and bundle weight.18 min
  2. 02Accessibility in ReactBuild interactive components that work with keyboard and screen readers.18 min
  3. 03Building and DeployingProduce a production build and deploy it.17 min

Projects for this course

Beginner

Expense Tracker

A web interface that records expenses and summarises them. Your first project with real UI state and accessibility requirements.

10-15 hours
Advanced

Analytics Dashboard

A data-heavy interface that stays fast and accessible: filters, charts, large tables and honest loading states.

25-35 hours

On completion

What you should take away

  • The interface is a function of state, so getting the state shape right solves most problems
  • Effects are for synchronising with things outside React, not for deriving values
  • Server components keep data access off the browser
  • Loading and error states are part of the design, not an afterthought

Recommended next course

Automated Testing

Write tests that let you change code with confidence: unit, integration and API tests, test doubles, and what coverage really tells you.

Continue to Testing

Have a project worth talking through?

Tell us what you're building or what's slowing your current system down. We'll give you a direct read on scope and approach.

Start a ConversationExplore Our Services