React: Intermediate Topics (Code With Mosh)

Take your React skills to the next level with this intermediate course on state management and routing. Learn React Query, reducers, context, providers, Zustand, and React Router. Boost your front-end app development skills with best practices and clean code. Enroll now and become a confident React developer.

 

Level Up Your React Skills

If you know the basics of building web apps with React and TypeScript and are looking for a more advanced course to take your skills to the next level, you're in the right place!

This is part 2 of my Ultimate React series where we'll explore state management and routing.

You'll learn:

• Fetching & updating data with React Query
• All about reducers, context, and providers
• Global state management with Zustand
• Routing with React Router

Learn the latest techniques and best practices to build complex apps with React.

  Enroll Now

 

By the end of this course, you'll be able to…

• Confidently build front-end apps with React and TypeScript
• Apply the latest techniques and best practices
• Troubleshoot errors with ease
• Write clean code like a pro

 

What You'll Learn...

This course is the second part of a series. The first part covered fundamentals of building web apps with React and TypeScript. In this part, you'll learn how to:

• Fetch and update data using React Query
• Boost your application's performance with caching
• Implement infinite scrolling
• Use reducers to consolidate state management logic
• Use context to share state
• Manage application state using Zustand
• Implement routing with React Router
• Structure your React projects for maintainability
• Write clean code like a pro
• Apply best practices

 

Who is this course for?

• React developers who want to fill in the gaps in their knowledge.
• Anyone who wants to become a confident and proficient React developer

Prerequisites

To take this course, I recommend that you have watched the first part or have a solid understanding of the concepts covered there. This includes the basics of TypeScript, building components, styling components, managing component state, and calling backend services.

Course Curriculum

 

1. Introduction (1:14)
2. What is React Query (4:36)
3. Setting Up React Query (1:23)
4. Fetching Data (5:17)
5. Handling Errors (2:26)
6. Showing a Loading Indicator (1:04)
7. Creating a Custom Query Hook (2:32)
8. Using React Query DevTools (3:08)
9. Customizing Query Settings (5:18)
10. Exercise- Fetching Data (3:31)
11. Parameterized Queries (6:18)
12. Paginated Queries (5:37)
13. Infinite Queries (7:07)
14. Part Two- Mutating Data (0:39)
15. Mutating Data (9:40)
16. Handling Mutation Errors (2:14)
17. Showing Mutation Progress (1:27)
18. Optimistic Updates (7:48)
19. Creating a Custom Mutation Hook (7:04)
20. Creating a Reusable API Client (10:00)
21. Creating a Reusable HTTP Service (2:34)
22. Understanding the Application Layers (1:10)
23. Part Three- Project Work (0:31)
24. Exercise- Fetching Genres (10:55)
25. Exercise- Fetching Platforms (3:30)
26. Exercise- Fetching Games (8:46)
27. Exercise- Removing Duplicate Interfaces (2:57)
28. Exercise- Creating a Reusable API Client (5:44)
29. Exercise- Implementing Infinite Queries (7:39)
30. Exercise- Implementing Infinite Scroll (5:38)
31. Exercise- Simplifying Query Objects (10:24)
32. Exercise- Creating Lookup Hooks (6:59)
33. Exercise- Simplifying Time Calculations (3:31)
34. Summary Global State Management (1h 47m)
35. Introduction (1:10)
36. Consolidating State Logic with a Reducer (7:12)
37. Creating Complex Actions (6:46)
38. Exercise- Working with Reducers (4:37)
39. Sharing State using React Context (9:42)
40. Exercise- Working with Context (4:24)
41. Debugging with React DevTools (1:07)
42. Creating a Custom Provider (2:58)
43. Creating a Hook to Access Context (1:24)
44. Exercise- Creating a Provider (2:51)
45. Organizing Code for Scalability and Maintainability (9:37)
46. Exercise- Organizing Code (3:09)
47. Splitting Contexts for Efficiency (2:46)
48. When to Use Context (3:14)
49. Context vs Redux (4:57)
50. Managing Application State with Zustand (7:24)
51. Exercise- Working with Zustand (4:15)
52. Preventing Unnecessary Renders with Selectors (2:42)
53. Inspecting Stores with Zustand DevTools (2:35)
54. Part Two- Project Work (0:25)
55. Exercise- Picking the Right State Management Solution (3:19)
56. Exercise- Setting Up a Zustand Store (6:44)
57. Exercise- Removing Props (12:03)
58. Discussion- Building Reusable Components (1:24)
59. Summary

 

 

 

Your Instructor

 

Mosh Hamedani

Hi! My name is Mosh Hamedani. I'm a software engineer with two decades of experience. I've taught millions of people how to code and how to become professional software engineers through my online courses and YouTube channel.

I believe coding should be fun and accessible to everyone.

 

30-Day Money-Back Guarantee

Try it risk-free

"Even though I've been working with React for two years, the beginners course is teaching me a lot, mostly good practices and Typescript. Quality is the usual expected from Mosh, super clear explanations, real life examples and what I value the most is his tone of voice. The course is a massage to the brain."

- Daniel Tkach

This is the second react course I have taken. Mosh does an excellent job at explaining every detail in a clear and concise manner. The notes he provides are invaluable for studying while not actively coding and are a great reference when working on a project. I had so much fun with the course; being able to understand each topic due to Mosh's exceptional teaching ability made me look forward to working through the course everyday. I highly recommend any course Mosh offers. Can't wait for part 2!

- Nicky Zewe

Useful links related to the content:

1. React official documentation: https://reactjs.org/
2. TypeScript official documentation: https://www.typescriptlang.org/
3. React Query documentation: https://react-query.tanstack.com/
4. React Router documentation: https://reactrouter.com/
5. Zustand documentation: https://github.com/pmndrs/zustand