CF

The Complete Guide to Advanced React Patterns (2020)

6h 1m 51s
English
Free

The Complete Guide to Advanced React Patterns (2020) is a 58-lesson 6 hours 1 minute self-paced course by Udemy. This free course skips the basics and goes straight at the patterns that make React components genuinely reusable, without falling back on long if-statement chains or an ever-growing list of props.

Course facts

Lessons
58
Duration
6 hours 1 minute
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Free

This free course skips the basics and goes straight at the patterns that make React components genuinely reusable, without falling back on long if-statement chains or an ever-growing list of props.

The project

Instead of another throwaway demo, you'll rebuild the Medium “clap” component from scratch, applying a different advanced pattern at each stage of the build.

Patterns and concepts covered

  • Custom hooks, including invocation order and common pitfalls with hooks and refs
  • Compound components for centralizing shared logic
  • Control props for inversion of control
  • Prop getters and prop collections for easier component usage
  • State initializers and the state reducer pattern
  • Multiple export strategies for reusable components
  • Extending a component's styles or CSS freely from outside it

It assumes you already know the basics of building React components and have at least some familiarity with hooks like useState and useEffect — this isn't a beginner's introduction, but a deliberate step up from it.

Who teaches The Complete Guide to Advanced React Patterns (2020)? 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.

What lessons are included in The Complete Guide to Advanced React Patterns (2020)?

  • Space or K: play or pause
  • J: rewind 10 seconds
  • L: forward 10 seconds
  • Left Arrow: rewind 5 seconds
  • Right Arrow: forward 5 seconds
  • Up Arrow: volume up
  • Down Arrow: volume down
  • M: mute or unmute
  • F: toggle fullscreen
  • T: toggle theater mode
  • I: toggle mini player
  • 0 to 9: seek to 0 to 90 percent of the video
  • Shift plus N: next video
  • Shift plus P: previous video
0:00 0:00
#Lesson TitleDuration
1Getting Started with Advanced Patterns 01:38
2Why Advanced React Patterns 02:34
3Design Patterns and React 02:23
4The Medium Clap 03:06
5Setting up your local environment 04:15
6How the demo showcase works 06:52
7Building and styling the medium clap 10:50
8Handling user interactivity 13:21
9Higher order components recap 08:26
10Beginning to animate the clap 06:09
11Creating and updating the animation timeline 09:18
12Resolving wrong animated scale 02:41
13Animating the clap count 06:51
14Animating the total count 05:35
15Creating animated bursts! 12:50
16Introduction to Custom Hooks 03:08
17Building an animation custom hook 10:21
18Why reusability fails - important! 03:03
19Custom hooks and refs 12:59
20When is my hook invoked? 09:52
21Compound components in plain approachable language 06:01
22Why compound components? 03:44
23How to implement the pattern 02:58
24Refactor to Compound components 09:12
25Alternative export strategy 03:47
26Exposing state via a callback 05:56
27Invoking the useEffect callback only after mount! 05:45
28Introduction to reusable styles 03:11
29Extending styles via a style prop 06:45
30Extending styles via a className prop 11:10
31The Problem to be solved 01:39
32What is control props? 03:33
33Implementing the pattern 08:09
34Practical usage of control props 05:58
35Introduction 01:56
36useDOMRef 06:02
37useClapState 09:03
38useEffectAfterMount 10:44
39A practical and fun usage 02:56
40An alternative export strategy 08:16
41What are props collections? 03:09
42Implementing props collections 07:24
43Accessibility and props collections 03:36
44What are props getters 01:36
45From collections to getters 02:02
46Use cases for prop getters 10:04
47What are state initializers? 02:25
48First pattern requirement 04:16
49Handling resets 09:02
50Handling reset side effects 12:02
51How usePrevious works 05:02
52The state reducer pattern 02:30
5302 From useState to useReducer 14:20
54Passing a user custom reducer 08:21
55Exposing the internal reducer and types 10:00
56How the classification works 02:42
57Making the right API choice 09:59
58Thank you! 00:24

What courses are similar to The Complete Guide to Advanced React Patterns (2020)?

More courses by Udemy

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.