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?
![C2C-kursbanner.png](/contentassets/3abfc209b69a4f889dde6bb2f304c1eb/c2c-kursbanner.png)
«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.»
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.
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)
Rick Beerendonk - instructor of the course
Rick is a senior consultant and trainer from The Netherlands.
He has over 25 years of professional experience while working in small, large and fast growing organisations.
His passion is simplicity, wellwritten code and team dynamics.
He is specialised in front-end technologies and speaks regularly about these topics at international events.