The Complete Guide to Advanced React Patterns (2020)

6h 1m 51s
English
Paid

Build reusable React components without relying on if statements or excessive props! Learn to use hooks and trusted advanced patterns to enhance your React skills.

Why Choose This Course?

Welcome! You've discovered a unique resource designed to teach advanced React patterns in plain, approachable language. Our goal is to equip you with the knowledge to build truly reusable components.

Many have learned React basics, but mastering the creation of reusable components using trusted, proven, and battle-tested patterns is what will set you apart. This course is tailored to help you achieve that level of expertise.

Overcoming Learning Challenges

Have you found learning advanced React patterns challenging in the past? Look no further! This course breaks down complex topics into simple, step-by-step lessons, making advanced React concepts accessible and easy to understand.

Course Outcomes

By the end of this course, you'll have acquired patterns that set you apart. You'll be prepared to impress in your next React interview, earn respect from colleagues, and gain personal pride from your achievements.

Hands-On Experience

From scratch, we'll cover every crucial aspect of advanced React patterns through real-world examples. Say goodbye to dull "Hello World" apps—get ready to replicate the popular Medium clap component, applying advanced patterns lesson by lesson.

Unique Course Features

  1. Unmatched Focus: No other Udemy course extensively covers advanced React component patterns geared towards reusability.
  2. Time-Efficient: Complete this focused course over a weekend and arm yourself with lifelong knowledge.
  3. Simple and Approachable: Learn advanced React patterns with ease, unlike any other resource available online.
  4. Expert Instruction: Taught by a Senior Frontend Engineer experienced with these patterns, with contributions in published works.
  5. Comprehensive Resources: Access an accompanying website for quick references long after completing the course.

Additional Knowledge Gained

Beyond advanced patterns, this course includes snippets of knowledge about favorite React hooks, best practices, custom hooks handling, and advanced animations in React.

See you later in the course!

Important Course Insights

During the course, we will build a real-world component, The Medium Clap, to study advanced patterns. Check the course curriculum to ensure this study project aligns with your interests.

Prerequisites:

  • Basic React component construction knowledge
  • Familiarity with React hooks, specifically useState and useEffect, or a willingness to learn them quickly
  • Note: Not suited for absolute React beginners.

Who This Course Is For:

  • React developers aiming to create genuinely reusable components
  • React developers preparing to make a strong impression at their (first) jobs
  • React developers seeking a simplified approach to advanced React patterns
  • Intermediate developers preparing for React job interviews
  • Developers aspiring to advance to Senior React Engineer roles

Learning Goals

  • Transition beyond Junior/Intermediate React Developer levels
  • Engage with real-world examples, including the Medium clap project
  • Deepen understanding of custom hooks and their invocation order
  • Avoid pitfalls associated with custom hooks and refs
  • Utilize compound component patterns for centralized logic
  • Gain pattern understanding akin to explaining to a 5-year-old with detailed illustrations
  • Learn to extend CSS/styles of components freely
  • Implement inversion of control using control props patterns
  • Create reusable custom hooks for daily work applications
  • Explore multiple export strategies for your reusable components
  • Ease component usage with prop getters and collections
  • Apply state initializers for setting/resetting component states
  • Master inversion of control via the state reducer pattern
  • Evaluate and choose the optimal React pattern for component APIs

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 58 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 58 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Getting Started with Advanced Patterns
All Course Lessons (58)
#Lesson TitleDurationAccess
1
Getting Started with Advanced Patterns Demo
01:38
2
Why Advanced React Patterns
02:34
3
Design Patterns and React
02:23
4
The Medium Clap
03:06
5
Setting up your local environment
04:15
6
How the demo showcase works
06:52
7
Building and styling the medium clap
10:50
8
Handling user interactivity
13:21
9
Higher order components recap
08:26
10
Beginning to animate the clap
06:09
11
Creating and updating the animation timeline
09:18
12
Resolving wrong animated scale
02:41
13
Animating the clap count
06:51
14
Animating the total count
05:35
15
Creating animated bursts!
12:50
16
Introduction to Custom Hooks
03:08
17
Building an animation custom hook
10:21
18
Why reusability fails - important!
03:03
19
Custom hooks and refs
12:59
20
When is my hook invoked?
09:52
21
Compound components in plain approachable language
06:01
22
Why compound components?
03:44
23
How to implement the pattern
02:58
24
Refactor to Compound components
09:12
25
Alternative export strategy
03:47
26
Exposing state via a callback
05:56
27
Invoking the useEffect callback only after mount!
05:45
28
Introduction to reusable styles
03:11
29
Extending styles via a style prop
06:45
30
Extending styles via a className prop
11:10
31
The Problem to be solved
01:39
32
What is control props?
03:33
33
Implementing the pattern
08:09
34
Practical usage of control props
05:58
35
Introduction
01:56
36
useDOMRef
06:02
37
useClapState
09:03
38
useEffectAfterMount
10:44
39
A practical and fun usage
02:56
40
An alternative export strategy
08:16
41
What are props collections?
03:09
42
Implementing props collections
07:24
43
Accessibility and props collections
03:36
44
What are props getters
01:36
45
From collections to getters
02:02
46
Use cases for prop getters
10:04
47
What are state initializers?
02:25
48
First pattern requirement
04:16
49
Handling resets
09:02
50
Handling reset side effects
12:02
51
How usePrevious works
05:02
52
The state reducer pattern
02:30
53
02 From useState to useReducer
14:20
54
Passing a user custom reducer
08:21
55
Exposing the internal reducer and types
10:00
56
How the classification works
02:42
57
Making the right API choice
09:59
58
Thank you!
00:24
Unlock unlimited learning

Get instant access to all 57 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription