Advanced React: Design System, Design Patterns, Performance

سرفصل های دوره

Become Senior in React JS by Gaining in-depth expertise in Design Systems, Design Patterns and Performance Optimization

1. Introduction

1. Introduction

2. Design Systems Core Concepts

1. Section Overview

2. A Real-life Example

3. Pitfalls of Design Systems

4. Different Team Structures

5. Who Benefits from Design Systems

6. Key Principles of Design System

7. Developing a Design System

8. Ensuring Quality and Consistency

9. Avoiding Common Mistakes

3. Design Systems Basics of Design

1. Section Overview

2. Introduction to Color

3. Understanding Color Terminology

4. Creating Meaningful Experiences with Color Semantics

5. Effective Color Value Strategies

6. Hands-on Color Palette in Figma

7. Typography Foundations

8. Font Essentials

9. Understanding Typescales

10. Type scale Hands-on

11. Different Design Domains

4. Design Systems Building Components in Figma

1. Section Overview

2. Hands-on Button Building Practice

3. Hands-on Designing a Modal

5. Design Systems Developing Component Library in React

1. Understanding CSS Specificity and Applying Styles

2. Challenges and Pitfalls in CSS

3. CSS Naming Practices

4. CSS-in-JS Scoped Styling within Components

5. Project Setup

6. Creating a Styled Component

7. Inheriting Styles

8. Extensible Foundations

9. Building a Theme

10. Global Styles

11. States in Styled Components

12. Style Variations

13. Adding a Second Theme Part 1

14. Adding a Second Theme Part 2

15. Adding a Modal Form Part 1

16. Adding a Modal Form Part 2

6. Design Patterns Basics

1. What are design patterns

7. Design Patterns Layout Components

1. Introduction

2. Screen Splitter

3. Screen Splitter Enhancement

4. Lists

5. Lists Types

6. Modals

8. Design Patterns Container Components

1. Introduction

2. Server Setup

3. Loader Component for CurrentUser Data

4. Loader Component for User Data

5. Loader Component for Resource Data

6. DataSource Component

7. Local Storage Data Loader Component

9. Design Patterns Controlled and Uncontrolled Components

1. Introduction

2. Uncontrolled Components

3. Controlled Components

4. Controlled Modals

5. Uncontrolled Flows

6. Collecting Data

7. Controlled Flows

10. Design Patterns HOCs

1. Introduction

2. Checking Props with HOC

3. Data Loading with HOC

4. Updating Data with HOC

5. Building Forms with HOC

6. Enhancing HOC Pattern

11. Design Patterns Custom hooks

1. Introduction

2. Fetching a user with Custom Hook

3. Fetching users with Custom Hook

4. Fetching a Resource with Custom Hook

5. a More Generic Custom Hook

12. Design Patterns Functional Programming in React

1. Introduction

2. Recursive Components

3. Compositions

4. Partial Components

13. Performance Optimization Getting Started

1. The demo project

2. Getting up and running with the demo codes

3. Introduction to the React Profiler

14. Performance Optimization Fixing Rendering Issues

1. Introduction to React Rendering

2. The Virtual DOM

3. Preventing Wasted Renders in a Simple Component

4. Preventing Wasted Renders in Functional Components

5. Preventing Wasted Renders When Dealing With Complex Props

6. Using Immutable Data in Order to Allow for Comparisons

7. Preventing Wasted Renders in Repeated Components

15. Performance Optimization Performance Optimization Fixing Rendering Issues

1. Catching Expensive Operations

2. Reducing Bundle Sizes

3. Lazy Loading Components

45,900 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy