CF

Advanced React Patterns

12h 7m 27s
English
Paid

Master Advanced React Patterns - Explore over 700 minutes of comprehensive instructional material focusing on advanced React patterns. This course will guide you through essential topics, including data preloading, navigation, authentication, optimistic updates, and much more.

Course Overview

What You Will Learn:

  • Advanced React Query Patterns: Dive into complex caching strategies, data prefetching, cache invalidation, and executing optimistic updates.
  • Type-Safe Development with tRPC and TypeScript: Learn to eliminate runtime errors and increase efficiency by writing robust, type-safe code.
  • Optimized Routing with Tanstack Router: Master dynamic URL handling, search parameters management, custom router creations, and enhance user navigation.
  • Robust Component and Architecture Design: Develop maintainable, reusable, and scalable components as well as code architectures.
  • Secured Authentication and User Management: Implement secure authentication methods, manage user profiles, forms, validations, file uploads, and integrate services like OpenStreetMap.
  • Monorepo Management with pnpm Workspaces: Learn to share dependencies, leverage common libraries, and apply best practices for managing large frontend projects.

Real-World Application

Each concept introduced in this course is directly applicable to constructing large-scale, professional applications that are actively sought after by employers and trusted by users.

About the Author: Cosden Solutions

Cosden Solutions thumbnail

Cosden Solutions is the React and Next.js teaching brand of Darius Cosden, the developer behind the cosdensolutions.io YouTube channel — one of the most active independent channels on modern React patterns, hooks deep-dives, and the App Router era of Next.js.

The CourseFlix listing carries two Cosden Solutions courses on React and Next.js. Material is paid and aimed at React developers wanting depth on patterns that recur in production codebases.

Watch Online 57 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Course introduction
All Course Lessons (57)
#Lesson TitleDurationAccess
1
Course introduction Demo
13:16
2
Setting up the dev environment
03:29
3
Project overview
09:55
4
Managing dependencies
06:01
5
UI components
02:46
6
Backend overview
05:53
7
Database and running the project
05:23
8
Implementing the first feature
12:10
9
Setting up the tRPC client
17:28
10
Fetching and displaying experiences
26:26
11
Implementing infinite scrolling
11:24
12
Fetching and displaying comments
13:45
13
Implementing adding comments
15:51
14
Implementing editing comments
09:47
15
Implementing deleting comments
06:34
16
Caching and invalidation deep dive
08:16
17
Setting up Tanstack Router
21:48
18
Creating the first route
05:00
19
Loading data through loaders
15:36
20
Configuring dynamic routes
18:27
21
Handling page errors
06:46
22
Handling 404 errors
05:52
23
Search params and filters
16:38
24
Implementing user avatars
05:49
25
Implementing user profiles
13:05
26
Setting up authentication and logging in
37:01
27
Logging out and protected routes
09:17
28
Implementing account creation
05:38
29
Implementing changing email
09:09
30
Implementing changing password
06:26
31
Implementing editing profile
27:07
32
Implementing editing experiences
27:20
33
Implementing deleting experiences
18:09
34
Restoring authentication to comments
04:48
35
Implementing file uploads
04:59
36
Implementing attending experiences
30:39
37
Implementing unattending experiences
02:33
38
Optimistic updates deep dive
19:37
39
Fetching and displaying attendees
23:14
40
Showing following and follower lists
06:18
41
Implementing following users
16:17
42
Implementing unfollowing users
02:53
43
Optimistic adding comments
22:33
44
Optimistic editing comments
04:14
45
Optimistic deleting comments
03:24
46
Implementing notifications
26:00
47
Implementing a favorite system
22:56
48
Implementing tags and multi-select
20:27
49
Implementing date and time pickers
05:28
50
Implementing maps and locations
28:25
51
Implementing creating listings
09:09
52
Managing experience attendees
13:34
53
Implementing comment likes
12:29
54
Bug fixes and improvements
01:03
55
(Improvement) Reduce duplication of optimistic updates
10:48
56
(Bug Fix) Fixing attendees invalidation
07:47
57
Conclusion and next steps
10:20
Unlock unlimited learning

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

Learn more about subscription

Related courses

Frequently asked questions

What prerequisites are required for this course?
To enroll in this course, students should have a solid understanding of React and JavaScript. Familiarity with TypeScript and basic web development concepts is also beneficial. Prior experience with state management and routing in React applications will help students grasp the advanced patterns more effectively.
What kinds of projects will I build during the course?
Throughout the course, you'll engage in building professional applications that incorporate advanced React patterns. These include implementing secure authentication, managing user profiles, and integrating services like OpenStreetMap. You'll also work on features like infinite scrolling, implementing a favorite system, and constructing robust routing systems using Tanstack Router.
Who is the target audience for this course?
This course is designed for experienced React developers looking to deepen their understanding of advanced patterns. It is ideal for those who want to enhance their skills in building large-scale, scalable applications and are interested in mastering concepts like type-safe development with tRPC and TypeScript, and monorepo management with pnpm Workspaces.
How does this course compare to other React courses in terms of depth?
This course offers a detailed exploration of advanced React patterns, going beyond basic state management and routing. It covers complex caching strategies, optimistic updates, and dynamic routing with Tanstack Router. The inclusion of type-safe development and monorepo management makes it more comprehensive than many other React courses focused solely on fundamental concepts.
What specific tools and platforms are covered in this course?
The course covers several tools and frameworks essential for advanced React development, including React Query for caching strategies, tRPC for type-safe development with TypeScript, and Tanstack Router for optimized routing. It also covers monorepo management using pnpm Workspaces and the integration of services like OpenStreetMap.
What topics are not covered in this course?
The course does not cover introductory concepts of React or basic JavaScript programming. It assumes a working knowledge of these areas and focuses on advanced patterns and complex applications. Topics unrelated to React or frontend development, such as server-side programming or database management, are also not included.
How much time should I expect to commit to this course?
The course consists of over 700 minutes of instructional material, divided into 57 lessons. Students should expect to spend additional time on exercises and projects to fully grasp the concepts. A commitment of several weeks, depending on your pace and familiarity with the material, is recommended to complete the course thoroughly.