React Advanced Practices For Enterprise Architectures

Take your skills to the next level and become Senior in React by mastering advanced patterns, and best practices

What you'll learn

Solid overview of useful patterns and key concepts for developing real-world React applications

Practical techniques for topics like project structure, async requests using a home-grown and with React Query

Learning best practices and how your code should scale to production levels

Standing out in the Marketplace as a React developer

Delve into design patterns and architecture of applications built on React

Requirements

You should have at least basic knowledge of JavaScript, and React, including concepts like hooks, state updates, lifecycles, etc

Description

Learn to build React projects that stay up-to-date even before they're finished, and discover how to make React applications that are easy to grow and keep up with a system that really works.Creating small React apps might seem straightforward. However, making large-scale React applications that are well-organized and can be expanded and managed easily is more challenging.Decisions made during development, especially early on, can significantly impact the project's success, and there are many decisions to make.If you choose the wrong tools or add new features without a solid architecture and patterns, your project might become outdated even before it's launched.Rather than effortlessly adding features and satisfying users, you'll find yourself struggling with the project for a long time. But don't fret; there's a solution for that.The web is filled with tutorials, articles, and videos attempting to teach React. However, many of them are outdated, overly simplistic, or offer poor advice and suggestions. This isn't an ideal way to embark on an important project.The good news is, you don't have to engage in extensive research or try to piece together information on your own. There's a straightforward solution to these challenges."React Advanced Practices For Enterprise Architectures" is an advanced course that delves into best practices, advanced patterns, and techniques for developing React applications. It serves as a comprehensive resource for essential concepts, aiming to help you overcome and avoid common challenges when working on React projects.This course explores numerous advanced subjects to guide you in constructing React applications that are maintainable, scalable, and high-performing. It covers topics like scalable project architecture, effective techniques for managing asynchronous operations and API states, advanced component patterns, performance optimization, local and global state management patterns, and more.What you will learn:Scalable ArchitectureLearn how to create scalable architecture for your React applications that is actually easy to manage and extend.Efficiently handle API requests and manage API states at scalableLearn advanced patterns for managing async operations, API states, and request cancellation by implementing a flexible and scalable API layer and combining it with React-Query.Advanced State Management TechniquesMaster advanced state management techniques that will allow you to easily manage, share and reuse stateful data in your application. Explore patterns to manage state in a clean, readable and scalable fashion and take advantage of hooks, Immer and Context API.Global State Management with Modern Redux and RTKForget about the pain of managing old Redux with tons of boilerplate code. Learn how to use Redux in a modern fashion with Redux Toolkit and RTK Query.Advanced Component and Layout PatternsDiscover advanced component patterns, such as Higher Order Components, Render Props, Compound Components, Polymorphic Components as well as how to manage dynamic layouts and how to build flexible, resilient and future proof components with Composition and Configuration approaches.Performance OptimizationExplore many essential techniques for improving and optimizing the performance of your applications to make them blazing-fast and your users amazed - Optimizing Re-renders, Long List Virtualization, Throttling, Denouncing, Code-Splitting & Lazy Loading, and more!Testing & SecurityWrite reliable and future-proof unit and e2e tests with Jest, Cypress, and Testing Library that actually work and give you confidence. Make your applications more secure and explore ways of restricting access to specific pages and content only to authorized users.Advanced React HooksThere is also a section about some advanced concepts and hooks and their use-cases as they can help you tackle some challenges in the related scenarios.

Overview

Section 1: Higher Order Components

Lecture 1 Introduction

Lecture 2 Checking Props with HOC

Lecture 3 Data Loading with HOC

Lecture 4 Updating Data with HOC

Lecture 5 Building Forms with HOC

Lecture 6 Enhancing HOC Pattern

Section 2: More Component Patterns

Lecture 7 Render Props

Lecture 8 Wrapper Component

Lecture 9 Polymorphic Component

Lecture 10 Observer Component

Section 3: Advanced React Hooks and Concepts

Lecture 11 React Portals

Lecture 12 Forwarding Refs

Lecture 13 Error Boundaries

Lecture 14 Keys Explained

Lecture 15 useLayoutEffect

Lecture 16 useId

Lecture 17 useCallback As Ref

Lecture 18 useImperativeHandle

Lecture 19 Capture Event Listeners

Lecture 20 Element Prop

Lecture 21 Less useEffects

Lecture 22 useDeferredValue

Lecture 23 useTransition

Lecture 24 Async React Router

Section 4: Scalable Project Architecture

Lecture 25 General Architecture

Lecture 26 Route Components

Lecture 27 Encapsulating Components and Logics

Section 5: API Layer and Async Operations

Lecture 28 Building an API Layer

Lecture 29 API States

Lecture 30 Enhancing The API States

Lecture 31 Avoiding Flickering Loaders

Lecture 32 Abstracting API States and Fetching Logic

Lecture 33 Adding Request Abort Logic

Lecture 34 Logging Errors

Section 6: API Layer with React-Query

Lecture 35 Server Setup and a Quick Fix to withLogger Function

Lecture 36 Fetching Data with React-Query

Lecture 37 Updating Data with React-Query

Lecture 38 Pagination with React-Query

Lecture 39 Infinite scroll with React-Query

Lecture 40 Query Cancellation with React-Query

Section 7: State Management Patterns

Lecture 41 Immutable updates with useImmer

Lecture 42 Cleaner reducer with useImmerReducer

Section 8: Performance Optimization

Lecture 43 Code-Splitting and Lazy-Loading

Lecture 44 useCallback hook to preserve referential integrity

Lecture 45 Avoiding re-renders with useMemo

Lecture 46 State Collocation

Lecture 47 Preventing re-renders by lifting components up

Developers with prior React knowledge who want to advance their React expertise and develop scalable, maintainable, and blazing fast React applications,Developers and teams who want to quickly get on board with best practices, patterns, and techniques,Developers who are looking for career progression as a React js Developer