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. Build reusable React components without relying on if statements or excessive props!

Course facts

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

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

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.