React, Redux & Router with hooks

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 finds its way to the user interface?

«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

 

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. Redux and React Router are covered extensively. EcmaScript 202X (or TypeScript), npm, Babel and Webpack will be used throughout the course.

Students, depending on their own project requirements, can choose to do exercises with a focus on function or class components 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.

Audience:

This course is intended for professional developers who are familiar with HTML and JavaScript 5 programming.

Content:

Introduction:

• What is React?
• Why React?

Part 1: Language constructs for React & Redux

• EcmaScript 20XX and later (JavaScript): The relevant features for React and Redux.
• JSX
• Babel transpiler
• Optional: 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
• FormData

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

• Webpack
• ESLint
• Hot Module Replacement
• Create-react-app
• Optional: Zeit Next

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: Side Effects

• useEffect, useLayoutEffect
• DOM Interaction: useRef
• Connect with REST service

Part 11: Hooks miscellaneous

• Custom Hooks
• useDebugValue
• Rules for using Hooks

Part 12: Concurrent Rendering

• Lazy Loading
• Suspense
• Suspense List
• Transitions

Part 13: React Router

• Static routing
• No match (like a 404)
• Dynamic routing
• Redirection
• Prompt
• Nested routes
• Code Splitting

Part 14: Redux Basics

• Redux Basics
• Redux Dev Tools
• useReducer hook (React)

Part 15: Advanced Redux

• Pattern: Presentational vs Container Components
• React-Redux
• Optional: Redux Middleware
• Optional: Async actions
• Optional: Redux Undo

Part 16: Patterns and Best Practices

• Context (Pattern: Implicit state)
• Pattern: Destructuring props and state
• Optional: Transclusion
• Optional: Render Props
• Optional: Higher Order Components

Part 17: Performance

• useMemo, useCallback hooks
• MemoComponent (f.k.a. PureComponent)
• memo() Higher-Order Component (React 17+)
• Event Handlers: inline vs method
• React Profiler

## Appendix

Appendix 1: EcmaScript 5

• JavaScript basics: Types, objects, arrays, loops, conditional statements, errors, etc.

Appendix 2: Testing

• Unit testing
• Snapshot testing

Appendix 3: Good to know

• Wrapping existing JavaScript components

Appendix 4: Immutable Data

• Immutable JavaScript: List; Map; Set; Convert from and to raw JavaScript objects; Nested structures; Lazy sequences; Equality; Batch mutations

Appendix 5: Styling

• Animations
• CSS, Inline styles
• Optional: Styled Components

Appendix 6: Specialised Hooks

• useId
• useTransition
• useDeferredValue
• useSyncExternalStore
• useInsertionEffect

Andre relevante kurs