React 19 (Including NextJS) (Hands-on)

Do you want to write interactive applications in HTML and JavaScript? Or are you already writing Single Page Applications, but is the HTML filled with unmaintainable semi code? Is data binding debugging and performance causing you headaches? Don't you remember how data findsits way to the user interface?

Lets react!

Facebook created a functional approach to tackle traditional complexities in JavaScript: React (open
source). Maligned in 2013, embraced since 2015 by the dominant websites in the world. Lets build fast
components in a lasting and meaningful way.

In this course you will learn all about React, hooks and its ecosystem. For example, TypeScript, NextJS and
Redux are covered and used.

Students, depending on their own project requirements, can choose to do exercises with a focus on React
(Vite) or NextJS and a focus on JavaScript or TypeScript. Solutions for all situations are provided.

New React functionality will be added to the course as soon as they are published.

Afterwards you are able to add React parts immediately to both existing and new websites.

Prerequisites:

This course is intended for professional developers who are familiar with HTML and JavaScript 5
programming.

Length:

5 days, workshop format, instructor-led course using slides, lots of exercises and more than 200 examples.

«The instructor, Rick, was incredible. He had a wealth of subject matter knowledge, an amazing set of course material developed over several years, going far beyond the minimum required to teach the course, with all sorts of examples, bonus material and exercises. Rick managed to adapt his course to the varied level of web and general software industry experience between the different participants, keeping everyone involved and engaged. He had a pleasant and well spoken manner. This React, Redux and Router course is easily one of the very best I've attended.» Salve Spinnangr, Skatteetaten

Contents:

Introduction:

• What is React?
• Why React?

Part 1: Language constructs for React & Redux

• EcmaScript 202X and later (JavaScript): The relevant features for React and Redux.
• JSX
• TypeScript

Part 2: JSX

• How it works (compiler)
• Differences with HTML
• Mix JavaScript and JSX

Part 3: Basic

• Root / Boostrap React App
• Render
• Fragments
• Properties
• Databinding incl. Conditional and List rendering
• Portals

Part 4: Forms JSX vs HTML

• Input
• TextArea
• Option
• useFormStatus (React 19+)
• useOptimistic (React 19+)

Part 5: Interactivity

• Events & Event Object
• State: Initialising
• State: Change sync vs async
• Hooks: useState, useCallback
• Automatic batching
• XSS attacks / protection

Part 6: Setting Up a Project

• NextJS (incl. deployment)
• Vite

Part 7: Multiple Components

• Parent to Child communication
• Child to Parent communication
• Children
• Key
• Handling form submit

Part 8: Building Apps

• Single responsibility
• Error Boundaries
• Reusable components (prop-types / typescript)
• Default property values

Part 9: Developer Experience

• Debugging
• Developer tools
• Updating to new React versions
• Optional: Storybook (Component development)

Part 10: Data Fetching & Side Effects

• React Actions (React 19+)
• Form Actions (React 19+)
• useEffect, useLayoutEffect
• DOM Interaction: useRef
• Connect with REST service
• NextJS data fetching

Part 11: Hooks Miscellaneous

• Custom Hooks
• useDebugValue
• Rules for using Hooks

Part 12: Concurrent Rendering

• Lazy Loading
• Suspense
• Suspense List
• Transitions

Part 13: Routing

• NextJS Routing
  
  • Pages
  • Layout
  • Head
  • Code Splitting
    
    
• React Router
  • Static routing
  • No match (like a 404)
  • Dynamic routing
  • Redirection
  • Prompt
  • Nested routes
  • Code Splitting

Part 14: Patterns and Best Practices

• Context (Pattern: Implicit state)
• Pattern: Destructuring props and state
• Optional: Transclusion
• Optional: Render Props
• Optional: Higher Order Components

Part 15: Server Components

• Server Components
• Server Actions
• NextJS specifics

Part 16: Redux Basics

• Redux Basics
• Redux Dev Tools
• useReducer hook (React)

Part 17: Advanced Redux

• Pattern: Presentational vs Container Components
• React-Redux
• Optional: Redux Middleware
• Optional: Async actions
• Optional: Redux Undo

## Appendix

Appendix 1: Performance
(Partly covered elsewhere in the course)

• useMemo, useCallback hooks
• memo() Higher-Order Component
• Event Handlers: inline vs method
• NextJS Optimisations
• React Profiler.

Appendix 2: Specialised Hooks

• useId
• useTransition
• useDeferredValue
• useSyncExternalStore
• useInsertionEffect

Appendix 3: Immutable Data

• Immutable JavaScript: List; Map; Set; Convert from and to raw JavaScript objects; Nested structures;
  Lazy sequences; Equality; Batch mutations

Appendix 4: React Compiler (future)

Other relevant courses