Advanced React: Design System, Design Patterns, Performance

Focused View

CodeLicks Academy

7:19:35

90 View

1. Introduction

1. Introduction.mp4

02:28

2. Design Systems Core Concepts

1. Section Overview.mp4

01:23

2. A Real-life Example.mp4

03:31

3. Pitfalls of Design Systems.mp4

02:33

4. Different Team Structures.mp4

02:04

5. Who Benefits from Design Systems.mp4

02:21

6. Key Principles of Design System.mp4

01:57

7. Developing a Design System.mp4

02:17

8. Ensuring Quality and Consistency.mp4

03:13

9. Avoiding Common Mistakes.mp4

02:16

3. Design Systems Basics of Design

1. Section Overview.mp4

00:39

2. Introduction to Color.mp4

03:23

3. Understanding Color Terminology.mp4

03:19

4. Creating Meaningful Experiences with Color Semantics.mp4

03:22

5. Effective Color Value Strategies.mp4

01:09

6. Hands-on Color Palette in Figma.mp4

07:36

7. Typography Foundations.mp4

02:23

8. Font Essentials.mp4

01:20

9. Understanding Typescales.mp4

01:40

10. Type scale Hands-on.mp4

05:20

11. Different Design Domains.mp4

02:19

4. Design Systems Building Components in Figma

1. Section Overview.mp4

00:48

2. Hands-on Button Building Practice.mp4

05:42

3. Hands-on Designing a Modal.mp4

09:20

5. Design Systems Developing Component Library in React

1. Understanding CSS Specificity and Applying Styles.mp4

02:51

2. Challenges and Pitfalls in CSS.mp4

02:52

3. CSS Naming Practices.mp4

02:42

4. CSS-in-JS Scoped Styling within Components.mp4

01:42

5. Project Setup.mp4

03:20

6. Creating a Styled Component.mp4

08:35

7. Inheriting Styles.mp4

08:41

8. Extensible Foundations.mp4

03:39

9. Building a Theme.mp4

05:23

10. Global Styles.mp4

06:53

11. States in Styled Components.mp4

07:38

12. Style Variations.mp4

04:57

13. Adding a Second Theme Part 1.mp4

05:52

14. Adding a Second Theme Part 2.mp4

02:48

15. Adding a Modal Form Part 1.mp4

03:38

16. Adding a Modal Form Part 2.mp4

13:11

6. Design Patterns Basics

1. What are design patterns.mp4

02:17

7. Design Patterns Layout Components

1. Introduction.mp4

02:10

2. Screen Splitter.mp4

07:46

3. Screen Splitter Enhancement.mp4

06:56

4. Lists.mp4

14:07

5. Lists Types.mp4

07:12

6. Modals.mp4

09:41

8. Design Patterns Container Components

1. Introduction.mp4

01:47

2. Server Setup.mp4

03:44

3. Loader Component for CurrentUser Data.mp4

08:53

4. Loader Component for User Data.mp4

03:06

5. Loader Component for Resource Data.mp4

05:08

6. DataSource Component.mp4

06:38

7. Local Storage Data Loader Component.mp4

03:14

9. Design Patterns Controlled and Uncontrolled Components

1. Introduction.mp4

02:36

2. Uncontrolled Components.mp4

06:38

3. Controlled Components.mp4

06:39

4. Controlled Modals.mp4

07:12

5. Uncontrolled Flows.mp4

09:27

6. Collecting Data.mp4

06:43

7. Controlled Flows.mp4

07:55

10. Design Patterns HOCs

1. Introduction.mp4

01:58

2. Checking Props with HOC.mp4

06:56

3. Data Loading with HOC.mp4

05:57

4. Updating Data with HOC.mp4

10:04

5. Building Forms with HOC.mp4

06:48

6. Enhancing HOC Pattern.mp4

12:02

11. Design Patterns Custom hooks

1. Introduction.mp4

01:43

2. Fetching a user with Custom Hook.mp4

04:49

3. Fetching users with Custom Hook.mp4

02:20

4. Fetching a Resource with Custom Hook.mp4

03:23

5. a More Generic Custom Hook.mp4

06:23

12. Design Patterns Functional Programming in React

1. Introduction.mp4

02:36

2. Recursive Components.mp4

07:26

3. Compositions.mp4

05:07

4. Partial Components.mp4

05:16

13. Performance Optimization Getting Started

1. The demo project.mp4

02:25

2. Getting up and running with the demo codes.mp4

05:05

3. Introduction to the React Profiler.mp4

01:24

14. Performance Optimization Fixing Rendering Issues

1. Introduction to React Rendering.mp4

01:51

2. The Virtual DOM.mp4

01:34

3. Preventing Wasted Renders in a Simple Component.mp4

08:37

4. Preventing Wasted Renders in Functional Components.mp4

05:38

5. Preventing Wasted Renders When Dealing With Complex Props.mp4

08:50

6. Using Immutable Data in Order to Allow for Comparisons.mp4

07:46

7. Preventing Wasted Renders in Repeated Components.mp4

03:56

15. Performance Optimization Performance Optimization Fixing Rendering Issues

1. Catching Expensive Operations.mp4

08:38

2. Reducing Bundle Sizes.mp4

05:23

3. Lazy Loading Components.mp4

08:46

Description

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

What You'll Learn?

Go from junior/intermediate frontend developer to senior level
Design and develop enterprise level design systems for high reusable and maintainable component library
Visualize your design foundations into Figma and convert them into highly extensible React patterns
Master the advanced component patterns including HOCs, Containers, Custom hooks and ReactJS functional programming
Know when to use patterns like controlled/uncontrolled components over other design patterns
Optimize the performance of your React applications by using memoization techniques
Become expert in locating wasted renders in your React projects and tackling them using React features
Learn to develop your React applications THE REACT WAY

Who is this for?

React developers willing to go from junior/intermediate level to senior level of expertise

Front-end developers looking to unlock the full potential of React

What You Need to Know?

Basic knowledge in React is required

More details

Description
Hi, welcome to this course, on Advanced React Concepts. If you are exploring this course, chances are high that youâ€™re a React developer looking to level up youâ€™re their skill. In this case, You are in the right place.
In this course, we touch on unique topics in three main modules, design systems, design patterns and performance optimization.
Now if you wonder why these topics? the answer is quite simple because that is how expert developers manage enterprise-level front-end projects.
If you are a junior or intermediate developer then you will need to master these topics to consider yourself as a senior developer and become ready to apply for senior positions.
All the materials of this course are based on years of experience working on several React projects and every single concept comes with concrete examples.
All the topics are presented practically so you can apply everything in your day-to-day projects right after.
In the first module, you will learn all about design systems. Managing large-scale projects is not just about coding components. Developing endless components without losing track requires solid design systems to guarantee the reusability and amenability of every element of the project. We will walk you through the concepts and theory, then we develop components in Figma and finally, we build an extensible foundation of design in ReactJS. So you build a mindset of how to design and develop a design system
Then we discuss design patterns.
As a senior software developer, I have identified the topics covered in this module as crucial elements that I seek when interviewing React developer candidates. These patterns can help bridge the gap between being a junior or intermediate developer and becoming a senior React practitioner.
By finishing this part, you'll have the opportunity to explore React's most essential design patterns.
Last but not least, we get to the optimization part. A very serious concept in React. A poorly optimized application with unwanted renders can sink the whole project. But the good news is that optimizing React apps is very easy and sweet. In this module, we will be working on a demo project that suffers from performance issues such as wasted renders and expensive operations. At the end of this module, You will know how to troubleshoot and fix most performance issues in React applications.

So long story short, if you wish to tackle all these interesting topics and bring your skills to the next level, then join me in this course!
This course will be under continues progress and more modules will be added based on the feedbacks and the technology evolution.
Who this course is for:
React developers willing to go from junior/intermediate level to senior level of expertise
Front-end developers looking to unlock the full potential of React

User Reviews

Rating

average 0

Total votes0

Focused display

Welcome to CodeLicks Academy! We are a team of software engineers with a passion for sharing knowledge and helping others understand complex concepts. We have extensive experience in the industry, having worked on a variety of projects ranging from small startups to large systems. We also have a deep understanding of software engineering and data engineering concepts, and love to apply these principles to real-world problems.In addition to technical skills, we have a strong background in teaching and have always had a love for sharing knowledge. Our team members have taught in both formal and informal settings, and have a knack for breaking down complex ideas into simple, easy-to-understand concepts. We believe that anyone can learn how to code and talk to computers at fast pace, so we are dedicated to helping people achieve their goals by providing short but informative video courses on variety of topics as code licks! Whether you're a beginner looking to get started in software/data engineering, or an experienced professional looking to enhance your skills, we are here to help you reach your goals. With our combination of technical skills and teaching experience, we are confident that we can help you take your skills to the next level.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.