[LEGACY] Advanced React Component Patterns

Build reusable React components without relying on if statements or more props! Use hooks & trusted advanced patterns!

4.55 (1732 reviews)
Udemy
platform
English
language
Web Development
category
instructor
11,963
students
6 hours
content
Jul 2020
last update
$69.99
regular price

What you will 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

Description

=======================================================================

THIS COURSE IS NO LONGER UPDATED AND IS TAUGHT WITH AN OLDER VERSION OF REACT 

=======================================================================

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: 

  1. 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.

  2. 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.

  3. 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.

  4. 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! 

  5. 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.

Content

Introduction

Getting Started with Advanced Patterns
Why Advanced React Patterns
Design Patterns and React
The Medium Clap

Building the Medium Clap

Setting up your local environment
How the demo showcase works
Building and styling the medium clap
Handling user interactivity
Higher order components recap
Beginning to animate the clap
Creating and updating the animation timeline
Resolving wrong animated scale
Animating the clap count
Animating the total count
Creating animated bursts!

Custom Hooks: A first look

(Bonus) New to hooks?
Introduction to Custom Hooks
Building an animation custom hook
Why reusability fails - important!
Custom hooks and refs
When is my hook invoked?

Compound Components

Compound components in plain approachable language
Why compound components?
How to implement the pattern
Refactor to Compound components
Alternative export strategy
Exposing state via a callback
Invoking the useEffect callback only after mount!

Crafting Reusable Styles

Introduction to reusable styles
Extending styles via a style prop
Extending styles via a className prop

Control Props

The Problem to be solved
What is control props?
Implementing the pattern
Practical usage of control props

Custom Hooks: A final look

Introduction
useDOMRef
useClapState
useEffectAfterMount
A practical and fun usage

Props Collection

An alternative export strategy
What are props collections?
Implementing props collections
Accessibility and props collections

Props Getters

What are props getters
From collections to getters
Use cases for prop getters

State initializers

What are state initializers?
First pattern requirement
Handling resets
Handling reset side effects
How usePrevious works

State Reducers

The state reducer pattern
02 From useState to useReducer
Passing a user custom reducer
Exposing the internal reducer and types

(Bonus) Classifying the patterns: How to choose the best API

How the classification works
Making the right API choice

Conclusion - Watch this?

Thank you!

Screenshots

[LEGACY] Advanced React Component Patterns - Screenshot_01[LEGACY] Advanced React Component Patterns - Screenshot_02[LEGACY] Advanced React Component Patterns - Screenshot_03[LEGACY] Advanced React Component Patterns - Screenshot_04

Reviews

Tj
October 17, 2023
Brilliant course, very well taught. Will be a reference for me in the future implementing any of the patterns in the course. It's a shame it's classed as a legacy course now, it really shouldn't be. The only issue is that it required an older version of node. Would be good to see the branches updated with an .npmrc file so it's easy to install with the project. Thanks a million for the course and the resources!
Oleg
August 23, 2023
Good course: practical and still actual! Sad that the course is not updated and has the legacy status.
João
August 19, 2023
Straight to the point, explaining some well advanced patterns and some others that I was actually already using, but did not know of
Hunter
July 15, 2023
I really enjoyed this course because it displayed many different ways of creating components that were relatively easy to understand. Although this course was created 3 years ago, none of the ideas and concepts taught are outdated and are still very relevant. I've been trying to find more advanced React courses and I am very pleased that this was my first one.
Seyed
July 10, 2023
It was a very excellent course, completely practical, with good presentations during the training. The only problem was with file traversing since all the codes were in a single file. By the way, I know it was inevitable because we had to compare each pattern with the previous pattern, which could be achieved by using one file for each pattern.
Mateo
June 30, 2023
This course is not supposed to be for beginners, but at least the first half of the course is just an introduction to react function components, hooks and other basic functionalities of the library. The teacher only use one file to represent all the content of each course section, then you will see that at the end of the course the file will be so long that it will be difficult to read and of course understand
Plamen
June 3, 2023
The audio is very bad at times and just crancking it up doesn't help because it also increases the noise. There is a lot of echo as well, I suggest using adobe podcast to enhance it. It's really hard to follow the course if your attention is solely dedicated to trying to make out what the instructor is saying. Some videos don't have this problem but most of them do.
Mark
May 29, 2023
Overall learned a lot of good patterns and the instructor is very knowledgeable in React. He was able to explain the fundamentals very well I think. I think the organization of the code leaves a lot to be desired though. First off - this should be in TypeScript. You will rarely apply to a job where TS is not a requirement when working with React, and I think there could have been a lot of things learned about handling types and using generics across the different patterns Also, code organization is not good. Shoving every single hook and component into the same file makes your head spin and takes away from learning the fundamentals. Extract the code to different files, it makes it easier to focus solely on each hook. Finally - the course is intended (I think) to be followed by checking out the different branches. That was not obvious at the beginning. Not a huge deal as I ended up just pulling down master and deleting code before working on the next one. But still.
Jewayson
May 25, 2023
I'm using React for a couple of years now and from this lesson I still learned some cool things specially Section 11: The State Reducer Pattern.
Bryant
April 27, 2023
The course wasn't terrible, but it wasn't necessarily everything I was looking for. I was hoping for something a bit more advanced, but I did learn some new patterns that I technically have seen before but didn't really recognize as a design pattern until now.
Georg
April 20, 2023
TL;DR: Awesome course. Super important topic and great instructor. Definitely recommended. PROs: * The course covers a super important topic and, AFAIK, there are no other courses on Udemy that cover this. This knowledge will help you a lot. * The instructor is very knowledgeable and excellent in explaining complex concepts. * The lessons are well structured and contain as much information as you need in as little time as necessary. * There are many resources (summaries, diagrams, git repo) to download that will allow you to access all you learned at a later point in time. CONs: * The audio is not the best but it is not that unpleasant. The instructor speaks an excellent English which compensates for the low audio quality a lot. IDEAS FOR IMPROVEMENT: * There are some AI tools out there that can help enhancing audio quality. It would be worth a shot to try enhancing the current audio tracks from the videos and to try removing the noise cancelling artifacts (phase shifting). Also, adding a reverb effect could maybe help in order to improve the spacial feeling of the audio. * In Section 12, there could be 2-3 concrete examples where a set of functional requirements is matched to a set of component patterns (e.g. "I have to build a visual component in the corporate design of my company", "I have to build a form component for a specific step in a sign up form", "I have to write form validation logic that will be used by multiple other devs in my company in various components"). All in all, great job! I enjoyed the course a lot. Thanks!
manoj
April 3, 2023
might be good for starters who have time to sit and watch what the instructor is doing and talking. In summary, this is not for someone who wants to have advance knowledge. The title is deceiving.
Zeeshan
March 17, 2023
Sound quality is rough, and had to do some debugging to get the app to work . since yarn is out dated now.
Ivan
January 26, 2023
The course is well explained but probably it would be better to see all these useful concepts with a real project, nevertheless great explanation, great use cases and great content.
Alfredo
January 5, 2023
It's a great overview of React components, I wish there were lectures on App folder structure with all these implementation, the instructor pretty much did everything inside one file. Very good overall though.

Coupons

DateDiscountStatus
5/29/202078% OFF
expired

Charts

Price

[LEGACY] Advanced React Component Patterns - Price chart

Rating

[LEGACY] Advanced React Component Patterns - Ratings chart

Enrollment distribution

[LEGACY] Advanced React Component Patterns - Distribution chart

Related Topics

2690172
udemy ID
12/5/2019
course created date
2/28/2020
course indexed date
Bot
course submited by