Courses and Conferences

DTI Main Reception

Do you need help?

  • Gregersensvej 8
  • 2630 Taastrup
Google MapsApple MapsRejseplanen
  • Forskerparken Fyn, Forskerparken 10F
  • 5230 Odense M
Google MapsApple MapsRejseplanen
  • Teknologiparken Kongsvang Allé 29
  • 8000 Aarhus C
Google MapsApple MapsRejseplanen
  • NordsøcentretPostboks 104
  • 9850Hirtshals
Google MapsApple MapsRejseplanen
  • Gammel Ålbovej 1
  • 6092Sønder Stenderup
Google MapsApple MapsRejseplanen

React (+NextJS)

Unlock the Power of Modern Web Development with React, Redux & Router with Hooks!

Evaluation

4stars

All course activities vil be evaluated by the participants

The evaluation is based on: 8 participants

Are you ready to take your web development skills to the next level?

Dive into the world of dynamic, responsive, and state-of-the-art web applications with our comprehensive course on React, Redux, and Router with Hooks!

Facebook has created a functional approach to tackle traditional complexities in JavaScript: React (open source). Criticized in 2013 but used since 2015 by the dominant websites in the world.
 
In this course you will learn about React, hooks and its ecosystem. Redux and React Router are covered in depth. EcmaScript 202X (or TypeScript), npm, Babel and Webpack are used in the course.
 
Depending on their own project requirements, participants can choose to do exercises that focus on function or class components as well as on JavaScript or TypeScript. There are solutions for every situation.
 
New features in React are added to the course as soon as they are released. Then you can instantly add React parts to both new and existing websites.
 

Audience

This course is intended for professional developers who have experience with HTML and JavaScript 5 programming

Course content

  • What is React?
  • Why React?
  • EcmaScript 202X and later (JavaScript): The relevant features for React and Redux.
  • JSX
  • TypeScript
  • How it works (compiler)
  • Differences with HTML
  • Mix JavaScript and JSX
  • Root / Boostrap React App
  • Render
  • Fragments
  • Properties
  • Head parts, like title, meta, style, script (React 19+)
  • Databinding incl. Conditional and List rendering
  • Portals
  • Input
  • TextArea
  • Option
  • useFormStatus (React 19+)
  • useOptimistic (React 19+)
  • Events & Event Object
  • State: Initialising
  • State: Change sync vs async
  • Hooks: useState, useCallback
  • Automatic batching
  • XSS attacks / protection
  • NextJS (incl. deployment)
  • Vite
  • Parent to Child communication
  • Child to Parent communication
  • Children
  • Key
  • Handling form submit
  • Single responsibility
  • Error Boundaries
  • Reusable components (prop-types / typescript)
  • Default property values
  • Debugging
  • Developer tools
  • Updating to new React versions
  • Optional: Storybook (Component development)
  • React Actions (React 19+)
  • Form Actions (React 19+)
  • useEffect, useLayoutEffect
  • DOM Interaction: useRef
  • Connect with REST service
  • NextJS data fetching
  • Custom Hooks
  • useDebugValue
  • Rules for using Hook
  • Lazy Loading
  • Suspense
  • Suspense List
  • Transitions
  • use (React 19+)
NextJS Routing
  • Pages
  • Layout
  • Head
  • Code Splitting
React Router
  • Static routing
  • No match (like a 404)
  • Dynamic routing
  • Redirection
  • Prompt
  • Nested routes
  • Code Splitting
  • Context (Pattern: Implicit state)
  • Pattern: Destructuring props and state
  • Optional: Transclusion
  • Optional: Render Props
  • Optional: Higher Order Components
  • Server Components
  • Server Actions
  • NextJS specifics
  • Redux Basics
  • Redux Dev Tools
  • useReducer hook (React)
(partly covered elsewhere in the course)
 
  • useMemo, useCallback hooks
  • memo() Higher-Order Component
  • Event Handlers: inline vs method
  • NextJS Optimisations
  • React Profiler
  • useId
  • useTransition
  • useDeferredValue
  • useSyncExternalStore
  • useInsertionEffect
 
  • Immutable JavaScript: List; Map; Set; Convert from and to raw JavaScript objects; Nested structures; Lazy sequences; Equality; Batch mutations
     
  • Pattern: Presentational vs Container Components
  • React-Redux
  • Optional: Redux Middleware
  • Optional: Async actions
  • Optional: Redux Undo
 

Instructor

Underviser 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.

Do you have any course related questions, please contact