[LEGACY] Advanced React Component Patterns

[LEGACY] Advanced React Component Patterns, available at $69.99, has an average rating of 4.4, with 61 lectures, based on 1745 reviews, and has 12047 subscribers.

You will learn about 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 This course is ideal for individuals who are React developers looking to build truly reusable components or React developers looking to make a good impression on their (first) jobs or React developers looking for a simplified approach to teaching advanced React patterns or Intermediate React developers preparing for React job interviews or React developers looking to level-up into Senior React engineers It is particularly useful for React developers looking to build truly reusable components or React developers looking to make a good impression on their (first) jobs or React developers looking for a simplified approach to teaching advanced React patterns or Intermediate React developers preparing for React job interviews or React developers looking to level-up into Senior React engineers.

Enroll now: [LEGACY] Advanced React Component Patterns

Summary

Title: [LEGACY] Advanced React Component Patterns

Price: $69.99

Average Rating: 4.4

Number of Lectures: 61

Number of Published Lectures: 61

Number of Curriculum Items: 61

Number of Published Curriculum Objects: 61

Original Price: $34.99

Quality Status: approved

Status: Live

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

Who Should Attend

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

Target Audiences

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

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

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 languagewith 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:

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

Course Curriculum

Chapter 1: Introduction

Lecture 1: Getting Started with Advanced Patterns

Lecture 2: (Bonus) PDF:Advanced React Patterns in the Real World: Lessons from OS Libraries

Lecture 3: Why Advanced React Patterns

Lecture 4: Design Patterns and React

Lecture 5: The Medium Clap

Chapter 2: The Medium Clap: Real-world Component for Studying Advanced React Patterns

Lecture 1: Why build the medium clap?

Lecture 2: Setting up your local environment

Lecture 3: How the demo showcase works

Lecture 4: Building and styling the medium clap

Lecture 5: Handling user interactivity

Lecture 6: Higher order components recap

Lecture 7: Beginning to animate the clap

Lecture 8: Creating and updating the animation timeline

Lecture 9: Resolving wrong animated scale

Lecture 10: Animating the clap count

Lecture 11: Animating the total count

Lecture 12: Creating animated bursts!

Chapter 3: Custom Hooks: The first Foundational Pattern

Lecture 1: (Bonus) New to hooks?

Lecture 2: Introduction to Custom Hooks

Lecture 3: Building an animation custom hook

Lecture 4: Why reusability fails – important!

Lecture 5: Custom hooks and refs

Lecture 6: When is my hook invoked?

Chapter 4: The Compound Components Pattern

Lecture 1: Compound components in plain approachable language

Lecture 2: Why compound components?

Lecture 3: How to implement the pattern

Lecture 4: Refactor to Compound components

Lecture 5: Alternative export strategy

Lecture 6: Exposing state via a callback

Lecture 7: Invoking the useEffect callback only after mount!

Chapter 5: Patterns for Crafting Reusable Styles

Lecture 1: Introduction to reusable styles

Lecture 2: Extending styles via a style prop

Lecture 3: Extending styles via a className prop

Chapter 6: The Control Props Pattern

Lecture 1: The Problem to be solved

Lecture 2: What is control props?

Lecture 3: Implementing the pattern

Lecture 4: Practical usage of control props

Chapter 7: Custom Hooks: A Deeper Look at the Foundational Pattern

Lecture 1: Introduction

Lecture 2: useDOMRef

Lecture 3: useClapState

Lecture 4: useEffectAfterMount

Lecture 5: A practical and fun usage

Chapter 8: The Props Collection Pattern

Lecture 1: An alternative export strategy

Lecture 2: What are props collections?

Lecture 3: Implementing props collections

Lecture 4: Accessibility and props collections

Chapter 9: The Props Getters Pattern

Lecture 1: What are props getters

Lecture 2: From collections to getters

Lecture 3: Use cases for prop getters

Chapter 10: The State Initialiser Pattern

Lecture 1: What are state initializers?

Lecture 2: First pattern requirement

Lecture 3: Handling resets

Lecture 4: Handling reset side effects

Lecture 5: How usePrevious works

Chapter 11: The State Reducer Pattern

Lecture 1: The state reducer pattern

Lecture 2: 02 From useState to useReducer

Lecture 3: Passing a user custom reducer

Lecture 4: Exposing the internal reducer and types

Chapter 12: (Bonus) Classifying the Patterns: How to choose the best API

Lecture 1: How the classification works

Lecture 2: Making the right API choice

Chapter 13: Conclusion

Lecture 1: Thank you!

Instructors

Ohans Emmanuel
Staff Engineer and Published Author.

Rating Distribution

1 stars: 36 votes
2 stars: 39 votes
3 stars: 209 votes
4 stars: 615 votes
5 stars: 846 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu