5 days course
React (+NextJS)
Unlock the Power of Modern Web Development with React, Redux & Router with Hooks!
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
Introduktion
- 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
- Head parts, like title, meta, style, script (React 19+)
- 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 Hook
Module 12: Concurrent Rendering
- Lazy Loading
- Suspense
- Suspense List
- Transitions
- use (React 19+)
Module 13: 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
Module16: Redux Basics
- Redux Basics
- Redux Dev Tools
- useReducer hook (React)
- 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
- Immutable JavaScript: List; Map; Set; Convert from and to raw JavaScript objects; Nested structures; Lazy sequences; Equality; Batch mutations
Appendix 5: Advanced Redux
- Pattern: Presentational vs Container Components
- React-Redux
- Optional: Redux Middleware
- Optional: Async actions
- Optional: Redux Undo
Instructor
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
- Mette Rosenløv Vad
- Konsulent
- +45 72202432