CF

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

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

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

Related courses

Frequently asked questions

What are the prerequisites for this course?
This course assumes you have a solid understanding of React basics, including components, state, and props. Familiarity with JavaScript ES6 features is also essential, as the course focuses on advanced patterns that build upon these foundational concepts. If you are comfortable with React and looking to deepen your skills by learning how to create reusable components using advanced patterns, this course is suitable for you.
What kind of projects will I build in this course?
Throughout the course, you will work on replicating the Medium clap component, which serves as a central project to apply advanced React patterns. You'll learn to build and style the component, handle user interactivity, animate different parts of the component, and implement various patterns like custom hooks and compound components. This hands-on approach ensures you can apply these patterns to real-world scenarios.
Who is the target audience for this course?
The course is designed for React developers who have mastered the basics and are looking to advance their skills. It is particularly suitable for those interested in building reusable components and understanding advanced design patterns in React. Whether you are preparing for a React interview or want to enhance your expertise for professional growth, this course will help you achieve those goals.
How does this course compare in depth with other React courses?
This course offers unmatched focus on advanced React component patterns, which are not extensively covered in other Udemy courses. It dives deep into topics such as compound components, custom hooks, control props, and state reducers, providing a comprehensive look at creating reusable components without relying on if statements or excessive props. The depth and practical application set it apart from more general React courses.
What specific tools or platforms will I learn to use in this course?
While the course does not focus on third-party tools or platforms, it emphasizes using React's built-in features such as hooks, and patterns like higher order components and compound components. By mastering these patterns, you'll gain the skills necessary to create efficient, reusable components in any React project, regardless of the tools or platforms you choose to use.
What topics are not covered in this course?
The course focuses specifically on advanced React component patterns and does not cover broader topics such as state management libraries like Redux, testing frameworks, or server-side rendering with Next.js. If you're looking for guidance on those areas, you may need to seek additional resources beyond this course.
How much time should I expect to commit to this course?
The course consists of 58 lessons, covering a wide range of advanced React patterns. While the total runtime is not specified, you should expect to spend additional time practicing the concepts through hands-on projects and exercises. Depending on your learning pace and prior experience, dedicating several weeks to fully absorb and apply the material is recommended.