[Last updated 5/2024] Advanced React: Design System, Design Patterns, Performance (Udemy – Engsub)
About Course
Views
:
What you’ll learn:
Go from junior/intermediate frontend developer to senior developer
Learn to develop your React applications THE REACT WAY
Design and develop enterprise level design systems for high reusable and maintainable component library
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
Understand and Use Typescript the React way like expert developers.
Use the React Hooks, Context API, and type props to build robust and reliable Typescript apps that scale
Time video:
22.5 hours (190 Lessons + Documents)
Teacher:
CodeLicks Academy
Total weight:
8.82 GB
Original link:
https://www.udemy.com/course/advanced-react/
Course Content
24. Advanced Typescript Typing Hooks
-
1. useState.mp4
11:14 -
2. State without initial state.mp4
08:10 -
3. Passing States and Events Part1.mp4
04:06 -
4. Passing States and Events Part2.mp4
06:02 -
5. Refactoring Passing States and Events.mp4
06:52 -
6. Typing useRef.mp4
04:46 -
7. Typing Returned Values of a Custom Hook.mp4
02:16 -
8. Typing Complex States.mp4
02:20 -
9. Typing Complex States Part2.mp4
02:19 -
10. Tuples with Custom Hooks.mp4
03:51
9. Advanced Concepts and Hooks
-
1. React Portals.mp4
07:18 -
2. Forwarding Refs.mp4
05:14 -
3. Error Boundaries.mp4
11:50 -
4. Keys Explained.mp4
07:04 -
5. Event Listeners.mp4
03:01 -
6. useLayoutEffect.mp4
07:46 -
7. useId.mp4
06:57 -
8. useCallback As Ref.mp4
06:32 -
9. useImperativeHandle.mp4
11:15 -
10. useDeferredValue.mp4
10:24 -
11. useTransition.mp4
09:08 -
12. Async React Router.mp4
20:08
8. Design Patterns More Patterns
-
1. Compound Components.mp4
10:11 -
2. Observer Pattern.mp4
13:07
7. Design Patterns Functional Programming in React
-
1. Introduction.mp4
02:35 -
2. Recursive Components.mp4
07:26 -
3. Compositions.mp4
05:07 -
4. Partial Components.mp4
05:16
6. 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
5. Design Patterns HOCs
-
1. Introduction.mp4
01:58 -
2. Checking Props with HOC.mp4
06:55 -
3. Data Loading with HOC.mp4
05:57 -
4. Updating Data with HOC.mp4
10:03 -
5. Building Forms with HOC.mp4
06:48 -
6. Enhancing HOC Pattern.mp4
12:02
4. 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:42 -
7. Controlled Flows.mp4
07:55
32. —LEGACY— Performance Optimization
-
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 -
4. Introduction to React Rendering.mp4
01:51 -
5. The Virtual DOM.mp4
01:34 -
6. Preventing Wasted Renders in a Simple Component.mp4
08:36 -
7. Preventing Wasted Renders in Functional Components.mp4
05:38 -
8. Preventing Wasted Renders When Dealing With Complex Props.mp4
08:50 -
9. Using Immutable Data in Order to Allow for Comparisons.mp4
07:46 -
10. Preventing Wasted Renders in Repeated Components.mp4
03:56 -
11. Resources.mp4
00:10 -
12. Catching Expensive Operations.mp4
08:37 -
13. Reducing Bundle Sizes.mp4
05:23 -
14. Lazy Loading Components.mp4
08:45 -
15. Resources.mp4
00:10
31. Appendix A – Typescript Basics
-
1. Typescript via Intellisense.mp4
03:07 -
2. Defining Type of Props.mp4
05:20 -
3. Migrating From JS to TS Exercise.mp4
08:05 -
4. Defining Types for Children.mp4
07:56 -
5. Extending Props with Helpers.mp4
04:40 -
6. Props with Variant Types.mp4
03:03 -
7. Requiring Props.mp4
03:12 -
8. Differentiating Props.mp4
04:28 -
9. Empty Object as Type.mp4
01:59 -
10. Empty Object and Requiring Props.mp4
02:38 -
11. Understanding ReactNode.mp4
03:36 -
12. Linking Types.mp4
04:32 -
13. Partial Autocomplete.mp4
03:38 -
14. Extracting Types with as const.mp4
05:50 -
15. Dynamic Props.mp4
05:45
30. Bonus
-
1. Render Props.mp4
11:34 -
2. Wrapper Component.mp4
07:50 -
3. Polymorphic Component.mp4
06:05
3. Design Patterns Container Components
-
1. Introduction.mp4
01:47 -
2. Server Setup.mp4
03:44 -
3. Loader Component for CurrentUser Data.mp4
08:52 -
4. Loader Component for User Data.mp4
03:06 -
5. Loader Component for Resource Data.mp4
05:07 -
6. DataSource Component.mp4
06:37 -
7. Container Component with Render Props Pattern.mp4
06:12 -
8. Local Storage Data Loader Component.mp4
03:14
29. Advanced Typescript Component Patterns
-
1. Higher Order components Part1.mp4
08:06 -
2. Higher Order components Part2.mp4
14:54 -
3. Render Props.mp4
09:03 -
4. Custom Hooks.mp4
04:18 -
5. Limiting Prop Composition.mp4
13:24 -
6. Requiring prop Composition.mp4
15:52
28. Advanced Typescript More on Typescript
-
1. Types vs interfaces.mp4
01:48 -
2. Function overloads.mp4
09:54
27. Advanced Typescript Using Generics
-
1. Utility types.mp4
13:36 -
2. Generics with Template Literals.mp4
05:15 -
3. More on Generics.mp4
08:21 -
4. Building a Context with Generics.mp4
11:06 -
5. Consuming a Custom Context.mp4
09:46 -
6. Building a Type Helper.mp4
06:23 -
7. Another Type Helper.mp4
06:34 -
8. Generic Constrains.mp4
03:16 -
9. Typing a Hook with Generics.mp4
03:48 -
10. Inferring Generic Types.mp4
03:37 -
11. Generic Components.mp4
04:27 -
12. Passing Types to Components.mp4
02:56 -
13. Reconsidering Generics.mp4
04:53
26. Advanced Typescript Typing Context API
-
1. Context API with Types.mp4
11:51
25. Advanced Typescript Typing Reducers
-
1. Typing Reducers.mp4
14:50 -
2. Passing Dispatch as a Prop Part1.mp4
12:08 -
3. Passing Dispatch as a Prop Part2.mp4
08:23 -
4. Template Literal Types.mp4
05:38 -
5. Action and Reducer Types.mp4
05:29
1. Introduction
-
01:25
-
03:55
-
3. Requirements.mp4
00:49
23. Advanced Typescript Introduction
-
1. Requirements.mp4
01:41
22. Design System Final Project
-
1. Project Assignment.mp4
02:09 -
2. Solution Building a Navbar with Menu and Header.mp4
12:17 -
3. Solution Building a Sidebar Menu.mp4
14:53 -
4. Solution Building the Form.mp4
16:31 -
5. Solution Finishing Buttons.mp4
05:32
21. Design System Patterns for More Complex Styles
-
1. Overview.mp4
02:31 -
2. Pad Pattern.mp4
14:25 -
3. Center Pattern.mp4
08:30 -
4. Media-Wrapper Pattern.mp4
11:10 -
5. Cover Pattern.mp4
14:43 -
6. Revisiting the Modal.mp4
14:29
20. Design System Patterns for Spacing
-
1. Overview.mp4
00:50 -
2. Layers Pattern.mp4
13:08 -
3. Split Pattern.mp4
09:46 -
4. Column Pattern.mp4
14:20 -
5. Grid Pattern.mp4
09:23 -
6. Inline-Bundle Pattern.mp4
09:23 -
7. Inline Pattern.mp4
20:37
2. Design Patterns Layout Components
-
1. What are design patterns.mp4
02:16 -
2. Introduction.mp4
02:10 -
3. Screen Splitter.mp4
07:46 -
4. Screen Splitter Enhancement.mp4
06:55 -
5. Lists.mp4
14:07 -
6. Lists Types.mp4
07:12 -
7. Modals.mp4
09:40
19. Design System Encapsulating Styles
-
1. Style Compositions.mp4
07:39 -
2. Encapsulating Styles.mp4
05:22
18. Design System Developing Components in React
-
1. Extensible Foundations.mp4
09:36 -
2. Creating Button Component.mp4
09:28 -
3. Building a Modal.mp4
10:23 -
4. Reusability and Encapsulating Styles.mp4
03:37
17. Design System Building Components Using Figma
-
1. Section Overview.mp4
00:38 -
2. Hands-on Color Palette in Figma.mp4
07:36 -
3. Hands-on Button Building Practice.mp4
05:42 -
4. Hands-on Designing a Modal.mp4
09:20
16. Design System Core Concepts
-
1. What is a design system.mp4
00:53 -
2. The importance of having a design system.mp4
03:00 -
3. Down sides of design systems.mp4
02:01 -
4. Team Structure.mp4
02:15 -
5. Audience of design systems.mp4
01:13 -
6. A real-life example.mp4
02:56 -
7. The key concepts of design systems.mp4
01:04 -
8. A practical checklist.mp4
02:41 -
9. Mistakes to avoid.mp4
01:18
15. Performance Optimization
-
1. Code-Splitting and Lazy-Loading.mp4
10:28 -
2. useCallback hook to preserve referential integrity.mp4
11:09 -
3. Avoiding re-renders with useMemo.mp4
03:00 -
4. State Collocation.mp4
02:05 -
5. Preventing re-renders by lifting components up.mp4
02:54 -
6. Throttling.mp4
08:10 -
7. Debouncing.mp4
07:53
14. State Management Patterns
-
1. Immutable updates with useImmer.mp4
12:06 -
2. Cleaner reducer with useImmerReducer.mp4
07:54
13. API Layer with React-Query
-
1. Server Setup and a Quick Fix to withLogger Function.mp4
02:29 -
2. Fetching Data with React-Query.mp4
08:10 -
3. Updating Data with React-Query.mp4
14:06 -
4. Pagination with React-Query.mp4
06:45 -
5. Infinite scroll with React-Query.mp4
08:19 -
6. Query Cancellation with React-Query.mp4
08:36
12. API Layer and Async Operations
-
1. Building an API Layer.mp4
14:53 -
2. API States.mp4
15:02 -
3. Enhancing The API States.mp4
14:05 -
4. Avoiding Flickering Loaders.mp4
09:08 -
5. Abstracting API States and Fetching Logic.mp4
09:59 -
6. Adding Request Abort Logic.mp4
29:03 -
7. Logging Errors.mp4
05:24
11. Scalable Project Architecture
-
1. General Architecture.mp4
09:40 -
2. Route Components.mp4
04:13 -
3. Encapsulating Components and Logics.mp4
07:32
10. Clean Code Tips
-
1. Using Element Prop.mp4
04:57 -
2. Optimizing Context API.mp4
16:50 -
3. Less useEffects.mp4
07:24
Student Ratings & Reviews
No Review Yet