We provide course about React 19 (including NextJS) (hands-on) in english. 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?
Course description:
Is data binding debugging and performance causing you headaches? Don't you remember how data find sits way to the user interface? 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.
Course outline:
Introduction:
• What is React
• Why React
Module 1 - Language constructs for React & Redux:
• EcmaScript 202X and later (JavaScript): The relevant features for React and Redux.
• JSX
• TypeScript
Module 2 - JSX:
• How it works (compiler)
• Differences with HTML
• Mix JavaScript and JSX
Module 3 - Basic:
• Root / Boostrap React App
• Render
• Fragments
• Properties
• Databinding incl. Conditional and List rendering
• Portals
Module 4 - Forms JSX vs HTML:
• Input
• TextArea
• Option
• useFormStatus (React 19+)
• useOptimistic (React 19+)
Module 5 - Interactivity:
• Events & Event Object
• State: Initialising
• State: Change sync vs async
• Hooks: useState, useCallback
• Automatic batching
• XSS attacks / protection
Module 6 - Setting Up a Project:
• NextJS (incl. deployment)
• Vite
Module 7 - Multiple Components:
• Parent to Child communication
• Child to Parent communication
• Children
• Key
• Handling form submit
Module 8 - Building Apps:
• Single responsibility
• Error Boundaries
• Reusable components (prop-types / typescript)
• Default property values
Module 9 - Developer Experience:
• Debugging
• Developer tools
• Updating to new React versions
• Optional: Storybook (Component development)
Module 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
Module 11 - Hooks Miscellaneous:
• Custom Hooks
• useDebugValue
• Rules for using Hooks
Module 12 - Concurrent Rendering:
• Lazy Loading
• Suspense
• Suspense List
• Transitions
Module 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
Module 14 - Patterns and Best Practices:
• Context (Pattern: Implicit state)
• Pattern: Destructuring props and state
• Optional: Transclusion
• Optional: Render Props
• Optional: Higher Order Components
Module 15 - Server Components:
• Server Components
• Server Actions
• NextJS specifics
Module 16 - Redux Basics:
• Redux Basics
• Redux Dev Tools
• useReducer hook (React)
Module 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)
Instructor: Rick Beerendonk
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.
Target audience:
This course is intended for professional developers who are familiar with HTML and JavaScript 5 programming
Language:
• English course material, english speaking instructor
Uttalelse fra fornøyd kursdeltaker:
«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