React Advance Component Composition - Typescript

Focused View

Matthew Msingathi Hlazo

10:07:11

0 View

1. Introduction.mp4

02:02

2. Referencing UI Libraries.mp4

05:08

3. Course Demonstartion.mp4

05:02

4. Analyzing Figma Design.mp4

07:12

5. Analyzing Component Behavior.mp4

09:08

6. Introduction to Figma Assets.mp4

13:39

7. Figma Color Sampling.mp4

11:27

8. Creating A Next JS Project.mp4

05:48

9. Project Cleanup and Extensions.mp4

06:24

10. Extending Tailwind Colors.mp4

04:44

11. Installing React Icons.mp4

03:54

12. Tailwind CENTER Style.mp4

08:40

13. Creating Image Component.mp4

21:24

14. Refactoring Image Component.mp4

12:05

15. Creating a Box Container Component.mp4

35:58

16. Refactoring Box Container Component.mp4

12:04

17. Creating a Button Component.mp4

12:11

18. Creating a Product Card Component.mp4

54:13

19. Product Card Component Improvement.mp4

09:39

20. Creating the Inceremnter Component.mp4

14:08

21. Incementer Minimum & Maximum.mp4

07:58

22. Incrementer State Lifting.mp4

10:18

23. Creating the Like Component.mp4

15:04

24. Render-Prop Pattern.mp4

15:32

25. Refactoring the Like Component.mp4

21:58

26. Separating Concerns.mp4

19:51

27. Creating a Simple Compound Component.mp4

35:03

28. Creating Item Card Details.mp4

09:12

29. Creating a Description Component.mp4

03:30

30. Creating Item Action Component.mp4

07:42

31. Introduction to API Context from ChatGpt.mp4

24:16

32. Context Provider Pattern Introduction.mp4

27:04

33. Context Provider Pattern Continues.mp4

10:01

34. Implementing Context-Provider API.mp4

42:18

35. Testing the provider.mp4

09:11

36. Pulling Image from the Provider.mp4

16:47

37. Product Details & Product Name.mp4

32:05

38. Creating a Product Details Component.mp4

02:50

39. Creating a Price Tag Component.mp4

05:51

40. Creating a Description Component.mp4

04:26

41. Creating Item Action Component.mp4

12:45

42. Adding Add-To-Cart Action.mp4

08:12

43. Final Touches.mp4

10:27

Description

Advance React in Typescript and Tailwind CSS

What You'll Learn?

You will learn how to create advanced React components using compound component composition techniques.
You will understand and apply SOLID principles, DRY principles, and various React design patterns such as the Context Provider Pattern and Render Props Pattern
You will learn how to use Next JS, Typescript and Tailwind css to build efficient and maintainable UI's
You gain the ability to plan and structure your code thoughtfully, resulting in well-architected React components.

Who is this for?

The course is designed for intermediate to advanced learners who have a foundational understanding of JavaScript and React. It is ideal for developers who want to deepen their knowledge of React component architecture and design patterns.

What You Need to Know?

Students should have a basic understanding of Javascript and React before taking this course. Familiarity with HTML and CSS is also recommended. Some expereince with Typescript will be beneficial, though not strictly necessary.

More details

Description
Unlock the secrets to creating advanced React components with my comprehensive course,
"Master Advanced React Component Composition."
Designed for intermediate to advanced learners, this course will elevate your React skills by diving deep into compound component composition techniques.
You will learn how to build sophisticated product cards using SOLID principles, DRY principles, and essential React design patterns such as the Context Provider Pattern and Render Props Pattern. This course emphasizes clean code practices and thoughtful planning, ensuring you can create well-architected React components that stand out to employers.
Our tech stack includes Next.js, TypeScript, and Tailwind CSS, providing you with a modern and powerful toolkit to develop efficient and maintainable applications. Whether you're a college student with some web development experience or a professional looking to enhance your skills, this course is tailored to help you excel.
By the end of the course, you will have a thorough understanding of advanced React concepts and the ability to apply them in real-world scenarios.
In addition, you will discover best practices for structuring and organizing your projects, improving your workflow, and boosting your productivity. By the end of the course, you will have a thorough understanding of advanced React concepts and the ability to apply them in real-world scenarios. Join us and take the next step in your development career with "Master Advanced React Component Composition."
Who this course is for:
The course is designed for intermediate to advanced learners who have a foundational understanding of JavaScript and React. It is ideal for developers who want to deepen their knowledge of React component architecture and design patterns.

User Reviews

Rating

average 0

Total votes0

Focused display

React

Matthew Msingathi Hlazo

Instructor's Courses

I am Matthew Msinagthi a React Developer and a Designer from South Africa. I hold a Diploma in Software Development and I have a lot of experience a s a Graphic Designer. I am passionate about technology and I love to breakdown complex concepts into simple terms that students can understand

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.