The Complete Guide to Advanced React Component Patterns
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
You are NOT an absolute React beginner
You already know how to build simple React component
You have a basic understanding of how hooks work at least useState & useEffect
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. Here’s what sets this course apart: You will not find another Udemy course focused extensively on advanced react component patterns! Go, do a search, you’ll find none! Patterns geared towards component reusability.This course doesn’t waste your time. While it is well explained, you won’t get a course of 24hours you struggle to complete. It’s a focused course you can finish in a weekend and arm yourself for life with knowledge. If you search the web, you’d find resources that promise to teach Advanced React Patterns, but none does it in the simple, approachable fashion this course employs. None. This course is taught by a Senior Frontend Engineer who’s actually worked with these patterns. I’ve spent hours toying with these patterns. In fact, chapters were dedicated to the subject in my last published book! Searching videos can be hard. So, this course provides resources you can always refer to. An actual accompanying website has been built for this course so you can find whatever information you need after completing the course as fast as possible. 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.See you later in the course! Important: In the course, we spend some time building a real-world component, The Medium Clap, for the sake of studying advanced patterns. See course curriculum – to be sure this isn’t something that bothers you. Prerequisites:- You already know how the basics of building React components- You know the basics of React hooks, at least, useState and useEffect OR are willing to learn it at a fast pace in the course. NB: Not for absolute React beginners.
Section 1: Introduction
Lecture 1 Getting Started with Advanced Patterns
Lecture 2 (Bonus) PDF:Advanced React Patterns in the Real World: Lessons from OS Libraries
Lecture 3 Why Advanced React Patterns
Lecture 4 Design Patterns and React
Lecture 5 The Medium Clap
Section 2: The Medium Clap: Real-world Component for Studying Advanced React Patterns
Lecture 6 Why build the medium clap?
Lecture 7 Setting up your local environment
Lecture 8 How the demo showcase works
Lecture 9 Building and styling the medium clap
Lecture 10 Handling user interactivity
Lecture 11 Higher order components recap
Lecture 12 Beginning to animate the clap
Lecture 13 Creating and updating the animation timeline
Lecture 14 Resolving wrong animated scale
Lecture 15 Animating the clap count
Lecture 16 Animating the total count
Lecture 17 Creating animated bursts!
Section 3: Custom Hooks: The first Foundational Pattern
Lecture 18 (Bonus) New to hooks?
Lecture 19 Introduction to Custom Hooks
Lecture 20 Building an animation custom hook
Lecture 21 Why reusability fails – important!
Lecture 22 Custom hooks and refs
Lecture 23 When is my hook invoked?
Section 4: The Compound Components Pattern
Lecture 24 Compound components in plain approachable language
Lecture 25 Why compound components?
Lecture 26 How to implement the pattern
Lecture 27 Refactor to Compound components
Lecture 28 Alternative export strategy
Lecture 29 Exposing state via a callback
Lecture 30 Invoking the useEffect callback only after mount!
Section 5: Patterns for Crafting Reusable Styles
Lecture 31 Introduction to reusable styles
Lecture 32 Extending styles via a style prop
Lecture 33 Extending styles via a className prop
Section 6: The Control Props Pattern
Lecture 34 The Problem to be solved
Lecture 35 What is control props?
Lecture 36 Implementing the pattern
Lecture 37 Practical usage of control props
Section 7: Custom Hooks: A Deeper Look at the Foundational Pattern
Lecture 38 Introduction
Lecture 39 useDOMRef
Lecture 40 useClapState
Lecture 41 useEffectAfterMount
Lecture 42 A practical and fun usage
Section 8: The Props Collection Pattern
Lecture 43 An alternative export strategy
Lecture 44 What are props collections?
Lecture 45 Implementing props collections
Lecture 46 Accessibility and props collections
Section 9: The Props Getters Pattern
Lecture 47 What are props getters
Lecture 48 From collections to getters
Lecture 49 Use cases for prop getters
Section 10: The State Initialiser Pattern
Lecture 50 What are state initializers?
Lecture 51 First pattern requirement
Lecture 52 Handling resets
Lecture 53 Handling reset side effects
Lecture 54 How usePrevious works
Section 11: The State Reducer Pattern
Lecture 55 The state reducer pattern
Lecture 56 02 From useState to useReducer
Lecture 57 Passing a user custom reducer
Lecture 58 Exposing the internal reducer and types
Section 12: (Bonus) Classifying the Patterns: How to choose the best API
Lecture 59 How the classification works
Lecture 60 Making the right API choice
Section 13: Conclusion
Lecture 61 Thank you!
React developers looking to build truly reusable components,React developers looking to make a good impression on their (first) jobs,React developers looking for a simplified approach to teaching advanced React patterns,Intermediate React developers preparing for React job interviews,React developers looking to level-up into Senior React engineers
Udemy | English | 6h 9m | 3.19 GB
Created by: Ohans Emmanuel