React Design Patterns – The Practical Guide


Go from junior/intermediate to senior level by learning how experts write reusable React components using design pattern

What you will learn

Master React Design Patterns

Implement Reusable Components

Harness the Power of Higher-Order Components (HOCs)

Understand Controlled and Uncontrolled Components

Embrace Functional Programming Concepts

Understand and Use Custom Hooks

Build Container Components For Sharing Common Logic of Data Loading

Description

If you are a junior or intermediate React developer looking to figure out how to write REALLY reusable and maintainable React components then you have come to the right place!

In this course, I will teach you the most practical React design patterns I learned the hard way during my life career working on several React projects, from spaghetti code bases to enterprise projects.

The most special point about the material of this course, is that I give a series of real-world concrete examples for every pattern and not just a dummy code that you can find on blogs or even with chatGPT! No, you will truly leverage the knowledge I am promising here.

I did make sure that you are going to get the CONCEPT behind every pattern, WHY you should consider using it and HOW to start implementing it in your codes right away.

I went through lots of interviews at the early stage of my career as a frontend developer and really struggled with interview questions for senior roles.

Most of the interviewers were not looking for only definitions or concepts. They tried to test my practical knowledge to see if I really know when and how to use the right design pattern for every challenge. Then when I started interviewing candidates, I followed the same manner. And now, I am teaching you what I gained to help you level up!

This course is as short as you even can finish it in a weekend but do not misunderstand this! It is short because it is straight to the point, and YES, with real-world examples


Get Instant Notification of New Courses on our Telegram channel.

Noteβž› Make sure your π”ππžπ¦π² cart has only this course you're going to enroll it now, Remove all other courses from the π”ππžπ¦π² cart before Enrolling!


We have simulated a full-stack application just to demonstrate the data fetching as it is the most common logic you will encounter in React applications.

I event touched on custom hooks and advanced topics such as recursive components. Most of the patterns in this course are unique to it and you can not find them on any other course and YES, in just 4 hours of videos!

You just need to look at the course chapters and do a search to see if they are covered AND with the same details!

So long story short, if you truly want to save your self a long run of try/error learning path trying to write react components like a pro, then give this course a try.

You can always ask for a refund if you regret it.

Some of the patterns we are covering in this course:

  • Lay out components including split screen pattern, lists and list items and modals
  • Container patterns for loading and passing data
  • Controlled and Uncontrolled components, their differences and porpuses
  • HOCs and the ways they can save your life
  • Custom hooks and how to make the most out of them
  • Functional programming and some advanced patterns
English
language

Content

Introduction

Requirements
What are design patterns

Layout Components

Introduction
Screen Splitter
Screen Splitter Enhancement
Lists
Lists Types
Modals

Container Components

Introduction
Server Setup
Loader Component for CurrentUser Data
Loader Component for User Data
Loader Component for Resource Data
Data Source Component
Local Storage Data Loader Component

Controlled and Uncontrolled Components

Introduction
Uncontrolled Components
Controlled Components
Controlled Modals
Uncontrolled Flows
Collecting Data
Controlled Flows

Higher Order Components – HOCs

Introduction
Checking Props with HOC
Data Loading with HOC
Updating Data with HOC
Building Forms with HOC
Enhancing HOC Pattern

Custom Hooks

Introduction
Fetching a user with Custom Hook
Fetching users with Custom Hook
Fetching a Resource with Custom Hook
a More Generic Custom Hook

Functional Programming in React

Introduction
Recursive Components
Compositions
Partial Components

Next Steps

Next Steps