The Complete Guide to Advanced React Patterns (2020)

6h 1m 51s
English
Paid

Course description

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

Read more about the course

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.

Requirements:
  • You are NOT an absolute React beginner
  • You already know how to build simple React component
  • You have a basic understanding of how hooks work at least useState & useEffect
Who this course is for:
  • React developers looking to build truly reusable components
  • React developers looking to make a good impression on their (first) jobs
  • React developers looking for a simplified approach to teaching advanced React patterns
  • Intermediate React developers preparing for React job interviews
  • React developers looking to level-up into Senior React engineers

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

Watch Online

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

Watch Online The Complete Guide to Advanced React Patterns (2020)

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Build a Realtime App with React Hooks and GraphQL

Build a Realtime App with React Hooks and GraphQL

Sources: udemy
Master the latest and greatest features in React within the context of a full-stack, real-world app. A realtime, full-stack React app from scratch with a GraphQL Server (Apollo ...
4 hours 32 minutes 39 seconds
Learn React Hooks By Building A Real Application

Learn React Hooks By Building A Real Application

Sources: reacttraining (Ryan Florence)
Learn React Hooks by building key features of a realistic app. After teaching this content to thousands, we've packaged it up into and on-demand course just for
7 hours 14 minutes 44 seconds
Microservices with Node JS and React

Microservices with Node JS and React

Sources: udemy, Stephen Grider
Event-Based Architecture? Covered! Server side rendering with React? Yep. Scalable, production-ready code? Its here! Microservices are the number one solution for building and ...
54 hours 13 minutes 19 seconds
Solidity & Ethereum in React (Next JS): The Complete Guide

Solidity & Ethereum in React (Next JS): The Complete Guide

Sources: udemy
Create real Smart Contracts in Solidity and DApps with React & Next JS. Understand how the Ethereum blockchain works.
38 hours 47 minutes 24 seconds