CF

React: Intermediate Topics

6h 5m 3s
English
Paid

Welcome to the next stage of your React journey! If you've mastered the basics of building web applications with React and TypeScript, and you're eager to expand your skills, you're in the right place. This Intermediate Topics course is part 2 of my Ultimate React series—here, we dive deep into state management and routing.

Course Highlights

Throughout this course, you'll gain expertise in:

  • Fetching and updating data using React Query
  • Understanding reducers, context, and providers
  • Managing global state with Zustand
  • Implementing routing with React Router

Discover the latest techniques and best practices essential for constructing complex applications with React.

Learning Outcomes

By the end of this course, you will:

  • Feel confident in building front-end applications with React and TypeScript
  • Apply cutting-edge techniques and best practices
  • Debug applications with ease
  • Write clean, professional-grade code

Course Content Overview

This course builds on the foundational knowledge from the first part of the series, guiding you to:

  • Fetch and update data using React Query
  • Enhance application performance through caching
  • Implement infinite scrolling for a seamless user experience
  • Utilize reducers to streamline state management logic
  • Share state using context effectively
  • Manage application state with Zustand
  • Navigate your app using React Router for optimal routing
  • Structure React projects for long-term maintainability
  • Adhere to best coding practices

Target Audience

This course is designed for:

  • React developers looking to refine their knowledge and fill in any skill gaps
  • Anyone aspiring to become a confident and proficient React developer

About the Author: Mosh Hamedani (Code with Mosh)

Mosh Hamedani (Code with Mosh) thumbnail

Mosh Hamedani is the founder of Code with Mosh, one of the highest-volume independent online instructors in software education. He has been publishing courses continuously since the early Udemy era and has taught over a million students across his Udemy catalog and his standalone Code with Mosh platform. His teaching style is patient, rigorously structured, and deliberately beginner-tolerant — the courses are widely cited as some of the most accessible introductions to their respective topics.

The Code with Mosh catalog covers an unusually wide span: web development with HTML / CSS / JavaScript / React / Angular / Node.js, Python and Django, C# and .NET, mobile development with React Native and Flutter, SQL and database fundamentals, and the algorithm / data-structure interview prep tracks. Few independent instructors maintain this much breadth at consistent quality.

The CourseFlix listing under this source carries over 35 Code with Mosh courses spanning that range. Material is paid; Code with Mosh runs on per-course pricing on the original platform. Courses are aimed primarily at developers picking up a new technology from a clean start through to working production proficiency.

Watch Online 85 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 85 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: 1- Introduction
All Course Lessons (85)
#Lesson TitleDurationAccess
1
1- Introduction Demo
01:03
2
2- Prerequisites
00:55
3
3- What You'll Learn
01:36
4
4- How to Take This Course
02:00
5
5- Source Code
02:22
6
1- Introduction
01:15
7
2- What is React Query
04:37
8
3- Setting Up React Query
01:24
9
4- Fetching Data
05:18
10
5- Handling Errors
02:27
11
6- Showing a Loading Indicator
01:05
12
7- Creating a Custom Query Hook
02:33
13
8- Using React Query DevTools
03:09
14
9- Customizing Query Settings
05:19
15
10- Exercise- Fetching Data
03:32
16
11- Parameterized Queries
06:19
17
12- Paginated Queries
05:38
18
13- Infinite Queries
07:08
19
14- Part Two- Mutating Data
00:40
20
15- Mutating Data
09:41
21
16- Handling Mutation Errors
02:15
22
17- Showing Mutation Progress
01:28
23
18- Optimistic Updates
07:49
24
19- Creating a Custom Mutation Hook
07:05
25
20- Creating a Reusable API Client
10:01
26
21- Creating a Reusable HTTP Service
02:35
27
22- Understanding the Application Layers
01:11
28
23- Part Three- Project Work
00:32
29
24- Exercise- Fetching Genres
10:56
30
25- Exercise- Fetching Platforms
03:31
31
26- Exercise- Fetching Games
08:47
32
27- Exercise- Removing Duplicate Interfaces
02:58
33
28- Exercise- Creating a Reusable API Client
05:45
34
29- Exercise- Implementing Infinite Queries
07:40
35
30- Exercise- Implementing Infinite Scroll
05:39
36
31- Exercise- Simplifying Query Objects
10:25
37
32- Exercise- Creating Lookup Hooks
07:00
38
33- Exercise- Simplifying Time Calculations
03:32
39
1- Introduction
01:11
40
2- Consolidating State Logic with a Reducer
07:13
41
3- Creating Complex Actions
06:47
42
4- Exercise- Working with Reducers
04:38
43
5- Sharing State using React Context
09:43
44
6- Exercise- Working with Context
04:25
45
7- Debugging with React DevTools
01:08
46
8- Creating a Custom Provider
02:59
47
9- Creating a Hook to Access Context
01:25
48
10- Exercise- Creating a Provider
02:52
49
11- Organizing Code for Scalability and Maintainability
09:38
50
12- Exercise- Organizing Code
03:10
51
13- Splitting Contexts for Efficiency
02:47
52
14- When to Use Context
03:15
53
15- Context vs Redux
04:58
54
16- Managing Application State with Zustand
07:25
55
17- Exercise- Working with Zustand
04:16
56
18- Preventing Unnecessary Renders with Selectors
02:43
57
19- Inspecting Stores with Zustand DevTools
02:36
58
20- Part Two- Project Work
00:26
59
21- Exercise- Picking the Right State Management Solution
03:20
60
22- Exercise- Setting Up a Zustand Store
06:45
61
23- Exercise- Removing Props
12:04
62
24- Discussion- Building Reusable Components
01:25
63
1- Introduction
00:46
64
2- Setting Up Routing
03:10
65
3- Navigation
02:44
66
4- Passing Data with Route Parameters
02:03
67
5- Getting Data about the Current Route
02:58
68
6- Nested Routes
03:24
69
7- Exercise- Working with Nested Routes
03:10
70
8- Styling the Active Link
02:21
71
9- Handling Errors
03:23
72
10- Private Routes
03:00
73
11- Layout Routes
02:09
74
12- Part Two- Project Work
00:27
75
13- Exercise- Setting Up Routing
06:33
76
14- Exercise- Handling Errors
03:23
77
15- Exercise- Fetching a Game
11:36
78
16- Exercise- Refactoring Entities
02:39
79
17- Exercise- Building Expandable Text
05:33
80
18- Exercise- Building Game Attributes
09:54
81
19- Exercise- Building Game Trailer
08:53
82
20- Exercise- Building Game Screenshots
05:51
83
21- Exercise- Improving the Layout
01:44
84
22- Exercise- Fixing the NavBar
02:33
85
23- Exercise- Refactoring Entities
02:30
Unlock unlimited learning

Get instant access to all 84 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What are the prerequisites for this course?
Before enrolling in this course, you should have a solid understanding of building web applications with React and TypeScript. This includes familiarity with basic React concepts such as components, props, and state, as well as TypeScript syntax and types. The course assumes you have completed the first part of the Ultimate React series or have equivalent experience.
What will I build during this course?
Throughout the course, you will work on exercises that include fetching and updating data using React Query, implementing infinite scrolling, and managing application state with Zustand. You will also learn to structure projects for long-term maintainability, navigate applications using React Router, and handle global state through context and reducers.
Who is the target audience for this course?
This course is designed for developers who have mastered the basics of React and TypeScript and are looking to enhance their skills by learning intermediate and advanced topics. It is suitable for those who want to apply cutting-edge techniques to build more complex and scalable front-end applications.
How does this course compare to other React courses in terms of depth and scope?
While introductory courses focus on basic React concepts, this course dives deep into intermediate topics such as state management with Zustand, routing with React Router, and data fetching with React Query. It is part of a series intended to provide a comprehensive understanding of building complex applications in React, making it suitable for developers seeking to go beyond the basics.
What specific tools or platforms are covered in this course?
The course covers several specific tools and platforms essential for modern React development. These include React Query for data fetching and caching, Zustand for state management, React Router for routing, and various debugging tools such as React DevTools and Zustand DevTools.
What topics are not covered in this course?
This course does not cover introductory React topics or TypeScript basics, as it assumes prior knowledge of these areas. Additionally, it does not delve into server-side rendering or advanced performance optimization techniques beyond caching and avoiding unnecessary renders.
What is the expected time commitment to complete this course?
The course consists of 85 lessons with a total runtime of approximately 6 hours. Additional time should be allocated for completing exercises and project work, depending on your prior experience and learning pace. On average, a commitment of a few hours per week over several weeks would be reasonable to complete the course.