English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 6 Hours | 2.99 GB
Build reusable React components without relying on if statements or more props! Use hooks & trusted advanced patterns!
Hey! hey! You’ve found a one-of-a-kind resource that teaches advanced React patterns in plain, approachable language with patterns geared towards building truly reusable components.
Make no mistake, thousands of engineers have learned React, but much fewer have mastered the art of building truly reusable components. Components that leverage trusted, proven and battle-tested patterns to make sure you’re building production-ready, reusable components. This is the goal of this course. To set you apart as one of the few engineers who’ve mastered this!
Did you previously attempt learning advanced React patterns? Did they seem too difficult? Were they poorly taught in your opinion? Well, look no more. In this course, I’ll walk you step-by-step and you’ll be taught the ins and outs of advanced React patterns in such simple terms and methodology, you’ll be surprised how the course makes such a difficult subject easy to grasp.
By the end of this course, you’ll have learned patterns that’ll set you apart and understand them enough to teach them yourself! You’ll be impressive on your next React interview, gain the respect of your colleagues, impress your boss, but more importantly, you’ll be proud of what you’d have accomplished afterwards.
We’ll start from the ground-up, touch every important aspect of advanced react patterns and do so with real-world examples. No boring hello world apps here! We’ll build a replica of the popular Medium clap component and lesson by lesson cover use cases (and edge cases) by implementing these advanced React patterns.
Besides just advanced patterns, you’ll pick up a ton of other snippets of knowledge, including the use of my favourite React hook, certain best practices, handling refs in custom hooks, and even advanced animations in React.
This is the course I wished I took when I first learned advanced React patterns: complete, simple, approachable, with real-world examples.
What you’ll learn
- Understand why design patterns are important and not just relying on if statements and more props
- You will no longer be or feel like a Junior/Intermediate React Developer
- Learn by mimicking real world examples by leveraging the popular Medium clap
- Understand custom hooks deeply. How they work and their invocation order
- Understand and avoid pitfalls with custom hooks and refs
- Leverage the compound component pattern to centralise logic within a single parent
- Understand these patterns explained as to a 5-year old – with detailed illustrations and guides
- Hate or love CSS, you’ll learn to build components whose CSS/styles may be extended as willed
- Rely on the inversion of control to users of your component via the control props pattern
- Build relevant custom hooks you could re-use in your day-to-day work
- Evaluate multiple export strategies/API for your reusable components
- Bless your component users with ease via prop getters and prop collections
- Embrace state initializers for setting and resetting internal state within your components
- Master inversion of control via the state reducer pattern
- Compare and choose what React pattern is best for your component API
Table of Contents
Introduction
1 Getting Started with Advanced Patterns
2 (Bonus) PDFAdvanced React Patterns in the Real World Lessons from OS Libraries-8W1-original
3 Why Advanced React Patterns
4 Design Patterns and React
5 The Medium Clap
The Medium Clap Real-world Component for Studying Advanced React Patterns
7 Setting up your local environment
8 How the demo showcase works
9 Building and styling the medium clap
10 Handling user interactivity
11 Higher order components recap
12 Beginning to animate the clap
13 Creating and updating the animation timeline
14 Resolving wrong animated scale
15 Animating the clap count
16 Animating the total count
17 Creating animated bursts
Custom Hooks The first Foundational Pattern
19 Introduction to Custom Hooks
20 Building an animation custom hook
21 Why reusability fails – important
22 Custom hooks and refs
23 When is my hook invoked
The Compound Components Pattern
24 Compound components in plain approachable language
25 Why compound components
26 How to implement the pattern
27 Refactor to Compound components
28 Alternative export strategy
29 Exposing state via a callback
30 Invoking the useEffect callback only after mount
Patterns for Crafting Reusable Styles
31 Introduction to reusable styles
32 Extending styles via a style prop
33 Extending styles via a className prop
The Control Props Pattern
34 The Problem to be solved
35 What is control props
36 Implementing the pattern
37 Practical usage of control props
Custom Hooks A Deeper Look at the Foundational Pattern
38 Introduction
39 useDOMRef
40 useClapState
41 useEffectAfterMount
42 A practical and fun usage
The Props Collection Pattern
43 An alternative export strategy
44 What are props collections
45 Implementing props collections
46 Accessibility and props collections
The Props Getters Pattern
47 What are props getters
48 From collections to getters
49 Use cases for prop getters
The State Initialiser Pattern
50 What are state initializers
51 First pattern requirement
52 Handling resets
53 Handling reset side effects
54 How usePrevious works
The State Reducer Pattern
55 The state reducer pattern
56 02 From useState to useReducer
57 Passing a user custom reducer
58 Exposing the internal reducer and types
(Bonus) Classifying the Patterns How to choose the best API
59 How the classification works
60 Making the right API choice
60 Making the right API choice-VEN-original.png
Conclusion
61 Thank you
Resolve the captcha to access the links!