React: Intermediate Topics

6h 5m 3s
English
Paid

Course description

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.

Read more about the course

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.

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

Watch Online

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Docker Swarm Mastery: DevOps Style Cluster Orchestration

Docker Swarm Mastery: DevOps Style Cluster Orchestration

Sources: udemy
Welcome to the most complete and up-to-date course for learning SwarmKit and using Docker Swarm end-to-end, from development and testing, to deployment and production. Discover...
9 hours 3 minutes 4 seconds
React and Laravel: Breaking a Monolith to Microservices

React and Laravel: Breaking a Monolith to Microservices

Sources: udemy
Microservices Architecture, React, Next.js, Laravel, Docker, RabbitMQ, Event Driven Microservices, Internal APIs, Redis. Learn how to create a Monolith using React and Laravel t...
15 hours 7 minutes 45 seconds
Docker for DevOps Engineers

Docker for DevOps Engineers

Sources: Amigoscode (Nelson Djalo)
Docker is tool to package and deploy software using containers. Unlike Virtual Machines, Docker is lightweight and does not require a lot of resources to run. Docker has become ...
4 hours 41 minutes 11 seconds
Docker for Node.js Projects From a Docker Captain

Docker for Node.js Projects From a Docker Captain

Sources: udemy
Welcome to the best course on the planet for using Docker with Node.js! With your basic knowledge of Docker and Node.js in hand, Docker Mastery for Node.js is a
8 hours 14 minutes 12 seconds
Just Enough Docker Packaging

Just Enough Docker Packaging

Sources: Itamar Turner-Trauring
As a Python developer, you need to master a multitude of technologies, and Docker is just another item on this endless list. You might have already used Docker: