Complete React Developer in 2025 (w/ Redux, Hooks, GraphQL)

Name: Complete React Developer in 2025 (w/ Redux, Hooks, GraphQL)
Availability: InStock
Rating: 5 (4 reviews)

39h 48m

English

Free

May 30, 2025

Transform into a Senior React Developer by building a comprehensive E-commerce app with cutting-edge technologies like Redux, Hooks, GraphQL, ContextAPI, Stripe, and Firebase.

Course Overview

Updated with the latest React features for 2020! Join a thriving online community of over 200,000 developers and learn from industry veterans who have honed their skills in Silicon Valley and Toronto using React.js. This course focuses on efficiency and delivers up-to-date content to save you from outdated and incomplete tutorials. Graduates have secured positions at top tech firms like Google, Tesla, Amazon, and Apple.

Key Features and Learning Path

Guaranteed to be the most comprehensive resource for React, this project-based course covers the entire modern toolchain. You will develop a large-scale e-commerce application reminiscent of Shopify, employing React, Redux, React Hooks, React Router, GraphQL, and other technologies. We’ll guide you step-by-step, from the basics to advanced concept implementation, ensuring you can make informed architectural decisions.

Hands-On Experience

The course provides detailed instructions and complete project codes, regardless of whether you code along or not. This allows every participant to have a portfolio-ready project upon completion.

Topics Covered

React Basics
React Router
Redux
Redux Saga
Asynchronous Redux
React Hooks
Context API
React Suspense + React Lazy
Firebase
Stripe API
Styled-Components
GraphQL
Apollo
PWAs (Progressive Web Apps)
React Performance Optimization
React Design Patterns
Testing with Jest, Enzyme, and Snapshot Testing
React Best Practices
Data Persistence and Session Storage
State Normalization

Why Choose This Course?

Massive Project Development: Tackle the largest project you'll encounter in any course, a task that typically requires several months to complete alone.
Expert Instructors: Learn from Andrei and Yihua, seasoned developers who have worked on prominent e-commerce platforms and enterprise-level React applications.
Beyond Basics: Gain a deep understanding of design patterns, app architecture, and performance considerations, preparing you for real-world challenges.

This course is tailored to elevate you from beginner to the top 10% of React developers, empowering you with practical, production-ready skills.

Instructors

Andrei Neagoie

Andrei is acclaimed for his top-rated development courses on Udemy, and his teaching has propelled students into roles at tech giants like Apple and IBM. As a self-taught programmer, he ensures that learning is accessible, affordable, and relevant, drawing on his extensive experience in Silicon Valley and Toronto.

Yihua Zhang

Yihua brings over a decade of teaching experience, having worked with major tech firms in Toronto. His approach is to instill a strong foundation while focusing on the practical application of skills, preparing you for a successful career in web development.

Course Requirements

Basic knowledge of HTML, CSS, and JavaScript
No prior experience with React or other JS frameworks is required

Target Audience

Individuals eager to surpass beginner-level tutorials
Programmers aspiring to learn an in-demand web development skill
Developers aiming to be in the top tier of React professionals
Students seeking to gain experience in building scalable applications
Graduates from bootcamps or online courses ready to deepen their knowledge

What You'll Learn

Building enterprise-level React applications and deploying them to production
Creating reactive, performance-optimized, large-scale apps like a senior developer
Mastering the latest React features, including Hooks and Context API
Becoming one of the top 10% ReactJS developers
Utilizing GraphQL and managing application states with Redux and Redux Saga
Implementing authentication and user account setup
Building full-stack applications with Firebase
Leading React projects with effective architectural decision-making
Mastering React Design Patterns and CSS in JS with styled-components
Converting applications into Progressive Web Apps
Testing applications using Jest, Enzyme, and snapshot testing
Integrating online payment systems using the Stripe API
Writing clean code with ES6/ES7/ES8/ES9/ES10 JavaScript

About the Authors

Udemy

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Zero To Mastery

Zero To Mastery (ZTM) is a Toronto-based online coding academy founded by Andrei Neagoie, originally a senior developer at large Canadian tech firms before turning to teaching full-time. The academy's signature is the cohort-based bootcamp track combined with a deep self-paced course library, all aimed at career-changers and self-taught developers preparing to land software-engineering roles at top companies.

The instructor roster has grown well beyond Andrei to include other senior practitioners: Daniel Bourke (machine learning), Aleksa Tešić (DevOps), Jacinto Wong, and others. Courses cover the full software-engineering career path: web development with React and Next.js, Python, machine learning and deep learning, DevOps and cloud, system design, mobile, and the algorithm / data-structure interview prep that gates engineering jobs.

The CourseFlix listing under this source carries over 120 ZTM courses spanning that full range. Material is paid; ZTM itself runs on a monthly / annual membership model. The teaching style favours long-form, project-based courses where students build complete portfolio-quality applications rather than disconnected feature tutorials.

Watch Online 284 lessons

0:00 0:00

#	Lesson Title	Duration
1	Complete React Developer: Zero to Mastery	03:49
2	Course Outline	04:58
3	React Concepts	02:07
4	The Birth of React.js	09:25
5	Declarative vs Imperative	06:19
6	Component Architecture	05:24
7	One Way Data Flow	06:11
8	UI Library	04:53
9	How To Be A Great React Developer	04:19
10	Section Overview	04:06
11	Environment Setup For Mac	08:09
12	Environment Setup For Windows	09:54
13	Getting Started with Toolkits	11:13
14	Introducing Monsters Rolodex	01:55
15	Getting Started with Vite	05:45
16	Vite Packages	12:51
17	Vite Scripts	10:30
18	Update React to 19	07:00
19	Installing and Using Yarn	04:02
20	Understanding React main.jsx	08:12
21	Intro to JSX	08:21
22	Components and useState - Part 1	08:46
23	useState Setter Function - Part 2	08:39
24	Basics of Props	10:58
25	Iterating Components Through an Array	08:57
26	Rendering	09:20
27	useState and Re-rendering	11:45
28	Side Effects and useEffect	10:14
29	Fetching User Data	08:09
30	Getting Images with RoboHash	03:33
31	Folder Structure and Components	13:10
32	Filtering by Search Input	06:54
33	Finishing Styles	10:23
34	Scaffolding a project with Create React App	09:38
35	Don't Eject	01:58
36	DOM & Virtual DOM	10:12
37	React & ReactDOM	11:08
38	React & ReactDOM part 2	06:26
39	ReactDOM v18 Changes	02:29
40	DOM Paint Flashing	06:10
41	The Long Road Ahead	02:53
42	Project Overview	01:48
43	Github Strategy	07:23
44	Scaffolding Our Capstone Project	07:16
45	Setting Up Our Categories	06:02
46	Adding Sass	06:57
47	Category Item Component	07:00
48	Directory Component	07:17
49	Adding Fonts	09:22
50	Routing	06:19
51	Updating/Upgrading Libraries	08:23
52	Setting Up Our Homepage	08:23
53	React Router Outlet	11:17
54	Navigation Bar Component	11:17
55	React Router Link	07:02
56	Styling for Navigation + Logo	05:05
57	Setting Up Firebase	07:45
58	Authentication Flow	07:00
59	Authenticating With Firebase	08:22
60	Introducing Firestore Data Models	13:02
61	Setting Up User Documents	14:35
62	Finish Creating User Documents	06:50
63	Sign In With Redirect	14:05
64	Sign Up Form Pt.1	06:50
65	Sign Up Form Pt.2	11:40
66	Sign Up With Email + Password	15:11
67	Generalizing Form Input Component	10:21
68	Custom Button Component	12:34
69	Sign In Form	11:00
70	Finishing Authentication Page	10:48
71	Need For Context	08:06
72	User Context	08:27
73	Re-rendering From Context	12:20
74	Signing Out	06:16
75	Exercise: Imposter Syndrome	08:45
76	Observer: onAuthStateChange	02:56
77	Finalizing Auth Listener	11:01
78	Observer Pattern	08:22
79	New Shop Page	10:27
80	Products Context	06:02
81	Product Card Component	06:47
82	Cart Icon & Dropdown	08:17
83	Toggle Cart Open	09:29
84	Add To Cart Pt.1	07:57
85	Add To Cart Pt.2	08:47
86	Cart Item Designs	10:41
87	Creating Checkout Page	08:09
88	Decrement Checkout Item Quantity	08:19
89	Checkout Item Pt.2	07:25
90	Checkout Item Pt.3	09:02
91	Cart Total	08:44
92	Firestore DB No-SQL	03:53
93	addCollectionAndDocuments Pt.1	07:02
94	addCollectionAndDocuments Pt.2	09:29
95	Get Products + Categories From Firestore	07:05
96	Using Our CategoriesMap	09:25
97	Category Preview Component	09:10
98	Nested Routes in Shop	07:40
99	Category Page	06:25
100	Fixing Clashing Styles	08:52
101	Introducing Styled-Components	09:10
102	Styled-Components - Button	11:35
103	Styled-Component - Cart Dropdown	09:10
104	Styled-Component - Directory Item & Cart Icon	09:37
105	Styled-Component - Form Input Component	10:53
106	Last Touches	08:55
107	Deploying On Netlify	03:57
108	Adding Redirects For Netlify	08:58
109	Reducers explained	09:35
110	User Reducer	11:26
111	Cart Reducer Pt. 1	17:15
112	Cart Reducer Pt. 2	09:58
113	Cart Reducer Pt. 3	07:22
114	Redux Toolkit Aside	09:16
115	Redux vs Context: Access	04:14
116	Redux vs Context: Data Flow	08:50
117	React-Redux: Installation	04:53
118	React-Redux: Setting Up Our Store	07:14
119	React-Redux: Creating User Reducer	10:34
120	Redux Part: Selectors	06:08
121	Categories Reducer	07:46
122	Categories Selectors	08:02
123	Business Logic in Our Selectors	08:42
124	What Triggers useSelector	08:05
125	Demystifying Middleware	13:22
126	Redux Triggers Extra Re-renders	05:23
127	Reselect Library	13:42
128	Migrating Cart Context to Redux Pt. 1	08:43
129	Migrating Cart Context to Redux Pt. 2	05:54
130	Migrating Cart Context to Redux Pt. 3	08:38
131	Migrate Cart Context to Redux Pt. 4	06:39
132	Redux-Persist	07:06
133	Redux-Devtools	09:32
134	Asynchronous Redux: Redux-Thunk	08:11
135	Redux-Thunk Pt. 2	07:47
136	Redux-Thunk Pt. 3	08:33
137	Asynchronous Redux: Redux-Saga	08:00
138	Generator Functions	08:39
139	Redux-Saga: fetchCategoriesAsync Thunk to Saga	10:35
140	Redux-Saga: Converting onAuthStateChanged Listener to Promise	07:14
141	Redux-Saga: Check User Session Saga Pt. 1	11:05
142	Redux-Saga: Check User Session Saga Pt. 2	07:55
143	Redux-Saga: Sign in Sagas	09:05
144	Redux-Saga: Sign up Sagas	10:26
145	Redux-Saga: Sign out Sagas	08:31
146	Redux Toolkit Intro	08:34
147	Using createSlice	11:41
148	Using Redux Toolkit Action Creators	07:24
149	Non Serializable Value Middleware	10:35
150	Immutable Middleware	04:04
151	Categories to createSlice	04:38
152	Cart to createSlice	09:32
153	The Need for Serverless Functions	08:55
154	Serverless Functions Explained	06:58
155	Setting up Stripe	08:40
156	Setting up Our PaymentForm	08:20
157	Writing Our First Serverless Function	09:32
158	Finishing Stripe Payment	12:35
159	Tidying Up Our UI	12:57
160	Adding Auth With Netlify URL	01:24
161	Adding Environment Variables To Netlify	05:20
162	Typescript Introduction	07:52
163	Starting our Typing	08:15
164	Typescript Interfaces	09:52
165	Typescript Types & Third Party Library Types	11:50
166	ChangeEvent Type From React	03:30
167	Understanding Generics	11:21
168	Typing React's SetState	09:20
169	Crwn-Clothing Typescript Overview	07:55
170	Typing createAction	13:04
171	Typing User Action Creators	08:36
172	Typing User Selectors	08:47
173	The Problem With Discriminating Unions	07:46
174	Type Predicate Functions	05:54
175	Intersections + Return Types	08:36
176	withMatcher Type	07:21
177	Improving Our Reducer Typing	09:16
178	Typing Redux Cart Files Pt. 1	09:21
179	Typing Redux Cart Files Pt. 2	07:27
180	Typing Out Firebase Utils	13:21
181	Typing User Actions	08:48
182	Typing User Reducer + Selectors	06:35
183	Typing Our Rootstate	09:40
184	Typing Third Party Libraries	02:24
185	Typing Our Custom Middleware	01:45
186	Typing Categories Saga	08:09
187	Typing User Sagas Pt. 1	08:54
188	Typing User Sagas Pt. 2	05:29
189	Typing Button Component	07:59
190	Typing Input & Form Components	09:31
191	Typing SVG Imports	07:17
192	Typing Our Payment Form	08:20
193	GraphQL Explained	05:34
194	GraphQL Playground	07:40
195	Graphql Queries	10:10
196	Categories Query	08:37
197	Updating Components To Consume GraphQL Values	06:30
198	Variables In useQuery & Caching	11:52
199	Mutations	05:47
200	Apollo vs Redux	05:18
201	Do Not Optimize For Performance Until You Need It	03:23
202	useCallback Pt.1	06:17
203	useCallback Pt. 2	04:01
204	useMemo	06:45
205	React Devtools Profiling & Memo	07:51
206	Code Splitting, Dynamic Imports, Suspense & Lazy	10:41
207	React Compiler	05:23
208	Firebase Rule Security	06:37
209	Don't Over Complicate	02:06
210	Be a Late Follower	02:57
211	Break Things Down	01:39
212	It Will Never Be Perfect	01:54
213	Progressive Web Apps	12:55
214	Progressive Web Apps Examples	06:16
215	PWA - HTTPS	06:12
216	PWA - App Manifest	06:13
217	PWA - Service Workers	13:16
218	PWA - Final Thoughts	02:04
219	PWA - Our Application	10:42
220	Global Styles and Media Queries	08:37
221	Remaining Mobile Styles	10:05
222	Section Overview	06:22
223	Types of Tests	02:59
224	Testing Libraries	15:29
225	Unit Tests	02:43
226	Integration Tests	02:47
227	Automation Testing	04:28
228	Final Note On Testing	02:57
229	Setting Up Jest	11:30
230	Our First Tests	11:11
231	Writing Tests	05:32
232	Asynchronous Tests	10:19
233	Asynchronous Tests 2	11:42
234	Mocks and Spies	12:51
235	Introduction To Enzyme	14:30
236	Snapshot Testing	09:30
237	Snapshot Testing + Code Coverage	04:55
238	Testing Stateful Components	11:17
239	Quick Recap	02:36
240	Testing Connected Components	23:51
241	Testing Connected Components 2	03:36
242	Testing Reducers	14:58
243	Testing Actions	18:28
244	Section Review	04:12
245	Aside - React Testing Library	04:05
246	Basics of RTL - Render and Screen	08:57
247	Button Tests - Part 1	09:33
248	Button Tests - Part 2	05:22
249	Render with Providers and Cart Icon Tests	14:22
250	Navigation Tests - Part 1	10:49
251	Navigation Tests - Part 2	05:57
252	Product Card and Testing Redux Actions	07:18
253	Navigation Tests - Part 3	08:42
254	Category Tests and React-Router-Dom Mocks	11:48
255	Category Reducer Test	07:58
256	Category Selector Test	06:10
257	Category Sagas - Part 1	09:22
258	Category Sagas - Part 2	13:58
259	Introduction to Webpack + Babel	12:11
260	Webpack Config	10:41
261	Introduction to Gatsby.js	07:56
262	Starting a Gatsby Project	09:04
263	Gatsby Pages	09:30
264	Gatsby GraphQL + Markdown	08:40
265	Building Our Blog 1	10:54
266	Building Our Blog 2	09:13
267	Building Our Blog 3	06:55
268	Building Our Blog 4	07:27
269	Building Our Blog 5	09:33
270	map()	05:49
271	Promises	14:58
272	filter()	02:56
273	includes()	12:51
274	CWD: Git + Github	17:41
275	CWD: Git + Github 2	16:53
276	Async Await	09:36
277	find()	03:07
278	reduce()	06:52
279	Memoization	07:48
280	Currying	04:25
281	ES6 Classes	08:45
282	Inheritance	14:42
283	Thank You!	01:18
284	AMA - 100,000 Students!!	38:31

Related courses

Updated 2y ago
Solidity & Ethereum in React (Next JS): The Complete Guide
By: Udemy
Create real Smart Contracts in Solidity and DApps with React & Next JS. Understand how the Ethereum blockchain works.
38h 47m
Updated 2y ago
Stripe Payments JavaScript Course
By: Fireship
Learn how to build safe Stripe payments with JavaScript. You use Node and React to create a web app that handles charges, customers, and subscriptions.
1h 29m
Updated 2y ago
The Software Architect Mindset (COMPLETE)
By: ArjanCodes (Arjan Egges)
The The Software Architect Mindset course teaches the fundamentals of software architecture and provides practical advice on creating software products that.
12h 6m5/5

Frequently asked questions

What prerequisites are needed before enrolling in this course?

Prospective students should have a basic understanding of JavaScript and web development concepts. Familiarity with HTML, CSS, and ES6 JavaScript features will be beneficial. Although the course starts with the basics of React, having prior exposure to any JavaScript frameworks or libraries will help you grasp the material more quickly.

What project will I build by taking this course?

Participants will develop a comprehensive e-commerce application similar to Shopify. This project will utilize modern tools and technologies such as React, Redux, React Hooks, React Router, GraphQL, Firebase, Stripe, and more. The course provides detailed instructions and complete project codes to ensure you have a portfolio-ready project upon completion.

How does this course compare in depth and scope to other React courses?

This course covers the entire modern React toolchain, providing both foundational knowledge and advanced skills. It includes 284 lessons that guide you from basic React concepts to advanced topics like Redux Saga, React Suspense, and GraphQL. The focus is on practical application through a large-scale project, setting it apart from courses that may only cover theoretical aspects or smaller projects.

What technologies and tools will I learn to use in this course?

The course covers a wide range of technologies including React, Redux, React Hooks, ContextAPI, GraphQL, Firebase, and Stripe API. Additionally, you will learn to use tools like Vite for project scaffolding and Styled-Components for styling, along with strategies for optimizing React applications using techniques like React Suspense and React Lazy.

Is there any content or topic specifically not covered in this course?

While this course is comprehensive in terms of the React ecosystem and related technologies like Firebase and GraphQL, it does not cover server-side frameworks such as Node.js or backend development in depth. The focus remains on frontend development using React and its associated libraries and tools.

What is the expected time commitment to complete this course?

The course consists of 284 lessons, and while the total runtime is not specified, students should expect to invest significant time to fully engage with the material. Depending on your prior experience and learning pace, completing the course, including hands-on projects, can take several weeks to a few months if pursued part-time.

How will the skills learned in this course benefit my career or other learning opportunities?

Skills acquired in this course are highly applicable to modern web development careers. Graduates have secured positions at companies like Google, Tesla, and Amazon. Knowledge of React, Redux, and GraphQL is in demand, providing a strong foundation for further learning in web development and related fields. The project-based approach also ensures that you gain practical experience applicable to real-world scenarios.