5 days course
React, Redux & Router med Hooks
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
Introduction
- What is React?
- Why React?
Module 1: Language constructs for React & Redux
- EcmaScript 2018 and later (JavaScript): The relevant features for React and Redux.
- JSX
- Babel transpiler
- Optional: TypeScript
Module 2: JSX
- How it works (compiler)
- Differences with HTML
- Mix JavaScript and JSX
Module 3: Basic
- Root
- Render
- Fragments
- Properties
- Databinding
Module 4: Forms JSX vs HTML
- Input
- TextArea
- Option
Module 5: Interactivity
- Events
- Event Pool
- State: Initialising
- State: Change sync vs async
- Hooks: useState, useCallback
- XSS attacks / protection
Module 6: Setting up a project
- Webpack
- ESLint
- Hot Module Replacement
- Create-react-app
- Optional: Zeit Next
Module 7: Multiple Components
- Parent to Child communication
- Child to Parent communication
- Children
- Key
- Handling form submit
Module 8: Building Apps
- Function vs Class components, single responsibility
- React, Redux and Router (with Hooks)
- Error Boundaries
- Reusable components (prop-types / typescript)
- Default property values
Module 9: Developer experience
- Debugging
- Developertools
- Updating to new React versions
- Optional: Storybook (Component development)
Module 10: Side Effects
- useEffect hook
- Component lifecycle
- DOM Interaction
- Fetch server data
- Suspense
- Suspense Lists
- Lazy Loading
- Portals
Module 11: Hooks miscellaneous
- Custom Hooks
- Rules for using Hooks
Module 12: Patterns and Best Practices
- Context (Pattern: Implicit state)
- Pattern: Destructuring props and state
- Pattern: Render Props
- Optional: Pattern: Transclusion
- Optional: Higher Order Components
Module 13: React Router
- Static routing
- No match (like a 404)
- Dynamic routing
- Redirection
- Prompt
- Nested routes
- Code Splitting
Module 14: Redux Basics
- Redux Basics
- Redux Dev Tools
- useReducer hook (React)
- React, Redux and Router (with Hooks)
Module 15: Advanced Redux
- Pattern: Presentational vs Container Components
- React-Redux
- Optional: Redux Middleware
- Optional: Async actions
- Optional: Redux Undo
Appendix 1: EcmaScript 5
- JavaScript basics: Types, objects, arrays, loops, conditional statements, errors, etc.
Appendix 2: Performance
- useMemo hook
- shouldComponentUpdate() lifecycle method
- MemoComponent (f.k.a. PureComponent)
- memo() Higher-Order Component (React 17+)
- Event Handlers: inline vs method
- React Profiler
Appendix 3: Testing
- Unit testing
- Snapshot testing
Appendix 4: Good to know
- Wrapping existing JavaScript components
- Appendix 5: Immutable Data
- Immutable JavaScript: List; Map; Set; Convert from and to raw JavaScript objects; Nested structures;
- Lazy sequences; Equality; Batch mutations
Appendix 6: Styling
- Animations
- CSS, Inline styles
- Optional: Styled Components
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