CF

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

39h 24m 36s
English
Paid

Become a Senior React Developer! Build a massive E-commerce app with Redux, Hooks, GraphQL, ContextAPI, Stripe, and Firebase.

Course Overview

Updated with all new React features for 2020! Join a live online community of over 200,000+ developers taught by industry experts who have worked in Silicon Valley and Toronto with React.js. Using the latest version of React, this course is focused on efficiency. No more wasting time on outdated and incomplete tutorials.

Alumni of Andrei’s courses now work at top tech companies like Google, Tesla, Amazon, Apple, IBM, JP Morgan, and Facebook.

Course Description

We guarantee this is the most comprehensive online resource on React. This project-based course will introduce you to the modern toolchain of a React developer. Build a massive e-commerce application similar to Shopify using React, Redux, Hooks, Router, GraphQL, Context API, Firebase, Redux-Saga, Stripe, and more. The curriculum is hands-on, guiding you from start to finish, even into production.

Starting with React Basics, we progress to advanced topics, enabling you to make informed decisions about architecture and tools for future ReactJS projects.

Even if you prefer not to code along, you'll have access to the full master project code to proudly showcase in your portfolio.

Topics Covered

  • React Basics
  • React Router
  • Redux and Redux Saga
  • Asynchronous Redux
  • React Hooks
  • Context API
  • React Suspense and React Lazy
  • Firebase
  • Stripe API
  • Styled-Components
  • GraphQL and Apollo
  • PWA (Progressive Web Apps)
  • React Performance
  • React Design Patterns
  • Testing with Jest and Enzyme
  • React Best Practices
  • Persistence and Session Storage
  • State Normalization
  • And more...

Why Choose This Course

1. Massive Project: Build the biggest project you will ever see in a course, saving you months of development time.

2. Industry Expertise: Learn from two instructors with real-world experience at major tech firms using React. Gain perspective from two senior developers.

3. Advanced Principles: Beyond basics, learn principles about design patterns, app architecture, and performance optimization.

Instructor Profiles

Andrei Neagoie

Andrei is the instructor of the highest rated development courses on Udemy. With a background as a senior software developer in Silicon Valley and Toronto, he aims to provide affordable programming education, teaching skills relevant to today’s job market.

Yihua Zhang

Yihua is one of the instructors at Zero To Mastery, a top-rated Web Development academy. With extensive experience in software development and instruction, Yihua focuses on conveying fundamental skills necessary for a successful development career.

Course Requirements

  • Basic HTML, CSS, and JavaScript knowledge
  • No prior experience with React or any JS framework required

Who This Course Is For

  • Students aiming to go beyond beginner-level tutorials
  • Programmers wanting to learn the most in-demand web developer skills
  • Developers seeking to rank in the top 10% of React Developers
  • Students wishing to gain experience with scalable large applications
  • Bootcamp or online tutorial graduates aiming to surpass the basics

What You'll Learn

  • Build and deploy enterprise-level React applications
  • Create reactive, large-scale applications like a senior developer
  • Master the latest React features, including Hooks, Context API, and more
  • Gain expertise in the React Developer ecosystem from scratch
  • Navigate GraphQL as a React Developer
  • Implement Redux, Redux Thunk, and Redux Saga
  • Make informed decisions about state management trade-offs
  • Set up user authentication with Firebase
  • Lead React projects and make architecture decisions
  • Master React Design Patterns
  • Style components using CSS-in-JS
  • Utilize React Router for app routing
  • Convert applications to PWAs
  • Test applications with Jest and Enzyme
  • Handle online payments via Stripe API
  • Write clean code using modern JavaScript (ES6/ES7/ES8/ES9/ES10)

About the Authors

Udemy

Udemy thumbnail

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 thumbnail

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

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Complete React Developer: Zero to Mastery
All Course Lessons (284)
#Lesson TitleDurationAccess
1
Complete React Developer: Zero to Mastery Demo
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
06:14
11
Environment Setup For Mac
08:09
12
Environment Setup For Windows
09:54
13
Create React App - NPX
11:01
14
Create React App - React-Scripts 1
11:43
15
Create React App - React-Scripts 2
11:45
16
Create React App - Everything Else
06:04
17
Don't Eject
01:58
18
Monsters Rolodex - Class Components
09:01
19
Monsters Rolodex - Component State
07:38
20
Monsters Rolodex - setState
09:29
21
Monsters Rolodex - States and Shallow Merge
05:58
22
Monsters Rolodex - setstate and Secondary Callback
09:02
23
Monsters Rolodex - Mapping Arrays to Elements
09:27
24
Monsters Rolodex - Keys for Mapping
05:09
25
Monsters Rolodex - Single Page Applications (SPAs)
07:20
26
Monsters Rolodex - Lifecycle Method: componentDidMount
10:15
27
Monsters Rolodex - Renders & Re-renders
05:44
28
Monsters Rolodex - Input Search Box Component
11:20
29
Monsters Rolodex - Searching & Filtering
07:52
30
Monsters Rolodex - Storing Original Data
09:33
31
Monsters Rolodex - Optimizations
07:31
32
Monsters Rolodex - Understanding Components
07:58
33
Monsters Rolodex - CardList Component
07:11
34
Monsters Rolodex - Component Props
07:27
35
Monsters Rolodex - Rendering and Re-rendering part 2
07:06
36
Monsters Rolodex - SearchBox Component
08:50
37
Monsters Rolodex - CSS in React
09:30
38
Monsters Rolodex - CardList Component
07:02
39
Monsters Rolodex - Finishing Touches
07:42
40
Functional vs Class Components
04:23
41
Class Component Lifecycle Method Breakdown
05:22
42
Monsters Rolodex - Functional Component Intro
05:52
43
Pure & Impure Functions
06:23
44
Monsters Rolodex - Hooks: useState
07:11
45
Monsters Rolodex - Functional Component Re-rendering
06:49
46
Monsters Rolodex - Infinite Re-rendering
07:33
47
Monsters Rolodex - Hooks: useEffect
11:17
48
Monsters Rolodex - Remaining Components
05:52
49
React v18: Migrating from React v17 + ReactDOM v18 Changes
05:39
50
React v18: Strict Mode Changes
04:44
51
DOM & Virtual DOM
10:12
52
React & ReactDOM
11:08
53
React & ReactDOM part 2
06:26
54
ReactDOM v18 Changes
02:29
55
DOM Paint Flashing
06:10
56
The Long Road Ahead
02:53
57
Project Overview
01:48
58
Github Strategy
07:23
59
Scaffolding Our Capstone Project
07:16
60
Setting Up Our Categories
06:02
61
Adding Sass
06:57
62
Category Item Component
07:00
63
Directory Component
07:17
64
Adding Fonts
09:22
65
Routing
06:19
66
Updating/Upgrading Libraries
08:23
67
Setting Up Our Homepage
11:17
68
React Router Outlet
07:02
69
Navigation Bar Component
05:05
70
React Router Link
07:45
71
Styling for Navigation + Logo
07:00
72
Setting Up Firebase
08:22
73
Authentication Flow
13:02
74
Authenticating With Firebase
14:35
75
Introducing Firestore Data Models
06:50
76
Setting Up User Documents
14:05
77
Finish Creating User Documents
06:50
78
Sign In With Redirect
11:40
79
Sign Up Form Pt.1
15:11
80
Sign Up Form Pt.2
10:21
81
Sign Up With Email + Password
12:34
82
Generalizing Form Input Component
13:44
83
Custom Button Component
11:00
84
Sign In Form
10:48
85
Finishing Authentication Page
08:06
86
Need For Context
08:27
87
User Context
12:20
88
Re-rendering From Context
06:16
89
Signing Out
08:45
90
Exercise: Imposter Syndrome
02:56
91
Observer: onAuthStateChange
11:01
92
Finalizing Auth Listener
08:22
93
Observer Pattern
10:27
94
New Shop Page
06:02
95
Products Context
06:47
96
Product Card Component
08:17
97
Cart Icon & Dropdown
09:29
98
Toggle Cart Open
07:57
99
Add To Cart Pt.1
08:47
100
Add To Cart Pt.2
10:41
101
Cart Item Designs
08:09
102
Creating Checkout Page
08:19
103
Decrement Checkout Item Quantity
07:25
104
Checkout Item Pt.2
09:02
105
Checkout Item Pt.3
08:44
106
Cart Total
03:53
107
Firestore DB No-SQL
07:02
108
addCollectionAndDocuments Pt.1
09:29
109
addCollectionAndDocuments Pt.2
07:05
110
Get Products + Categories From Firestore
09:25
111
Using Our CategoriesMap
09:10
112
Category Preview Component
07:40
113
Nested Routes in Shop
06:25
114
Category Page
08:52
115
Fixing Clashing Styles
09:10
116
Introducing Styled-Components
11:35
117
Styled-Components - Button
09:10
118
Styled-Component - Cart Dropdown
09:37
119
Styled-Component - Directory Item & Cart Icon
10:53
120
Styled-Component - Form Input Component
08:55
121
Last Touches
03:57
122
Deploying On Netlify
08:58
123
Adding Redirects For Netlify
09:35
124
Reducers explained
11:26
125
User Reducer
17:15
126
Cart Reducer Pt. 1
09:58
127
Cart Reducer Pt. 2
07:22
128
Cart Reducer Pt. 3
09:16
129
Redux Toolkit Aside
04:14
130
Redux vs Context: Access
08:50
131
Redux vs Context: Data Flow
04:53
132
React-Redux: Installation
10:40
133
React-Redux: Setting Up Our Store
07:14
134
React-Redux: Creating User Reducer
10:34
135
Redux Part: Selectors
06:08
136
Categories Reducer
07:46
137
Categories Selectors
08:02
138
Business Logic in Our Selectors
08:42
139
What Triggers useSelector
08:05
140
Demystifying Middleware
13:22
141
Redux Triggers Extra Re-renders
05:23
142
Reselect Library
13:42
143
Migrating Cart Context to Redux Pt. 1
08:43
144
Migrating Cart Context to Redux Pt. 2
05:54
145
Migrating Cart Context to Redux Pt. 3
08:38
146
Migrate Cart Context to Redux Pt. 4
06:39
147
Redux-Persist
07:06
148
Redux-Devtools
09:32
149
Asynchronous Redux: Redux-Thunk
08:11
150
Redux-Thunk Pt. 2
07:47
151
Redux-Thunk Pt. 3
08:33
152
Asynchronous Redux: Redux-Saga
08:00
153
Generator Functions
08:39
154
Redux-Saga: fetchCategoriesAsync Thunk to Saga
10:35
155
Redux-Saga: Converting onAuthStateChanged Listener to Promise
07:14
156
Redux-Saga: Check User Session Saga Pt. 1
11:05
157
Redux-Saga: Check User Session Saga Pt. 2
07:55
158
Redux-Saga: Sign in Sagas
09:05
159
Redux-Saga: Sign up Sagas
10:26
160
Redux-Saga: Sign out Sagas
08:31
161
Redux Toolkit Intro
08:34
162
Using createSlice
11:41
163
Using Redux Toolkit Action Creators
07:24
164
Non Serializable Value Middleware
10:35
165
Immutable Middleware
04:04
166
Categories to createSlice
04:38
167
Cart to createSlice
09:32
168
The Need for Serverless Functions
08:55
169
Serverless Functions Explained
06:58
170
Setting up Stripe
08:40
171
Setting up Our PaymentForm
08:20
172
Writing Our First Serverless Function
09:32
173
Finishing Stripe Payment
12:35
174
Tidying Up Our UI
12:57
175
Adding Auth With Netlify URL
01:24
176
Adding Environment Variables To Netlify
05:20
177
Typescript Introduction
07:52
178
Starting our Typing
08:15
179
Typescript Interfaces
09:52
180
Typescript Types & Third Party Library Types
11:50
181
ChangeEvent Type From React
03:30
182
Understanding Generics
11:21
183
Typing React's SetState
09:20
184
Crwn-Clothing Typescript Overview
07:55
185
Typing createAction
13:04
186
Typing User Action Creators
08:36
187
Typing User Selectors
08:47
188
The Problem With Discriminating Unions
07:46
189
Type Predicate Functions
05:54
190
Intersections + Return Types
08:36
191
withMatcher Type (
07:21
192
Improving Our Reducer Typing
09:16
193
Typing Redux Cart Files Pt. 1
09:21
194
Typing Redux Cart Files Pt. 2
07:27
195
Typing Out Firebase Utils
13:21
196
Typing User Actions
08:48
197
Typing User Reducer + Selectors
06:35
198
Typing Our Rootstate
09:40
199
Typing Third Party Libraries
02:24
200
Typing Our Custom Middleware
01:45
201
Typing Categories Saga
08:09
202
Typing User Sagas Pt. 1
08:54
203
Typing User Sagas Pt. 2
05:29
204
Typing Button Component
07:59
205
Typing Input & Form Components
09:31
206
Typing SVG Imports
07:17
207
Typing Our Payment Form
08:20
208
GraphQL Explained
05:34
209
GraphQL Playground
07:40
210
Graphql Queries
10:10
211
Categories Query
08:37
212
Updating Components To Consume GraphQL Values
06:30
213
Variables In useQuery & Caching
11:52
214
Mutations
05:47
215
Apollo vs Redux
05:18
216
Do Not Optimize For Performance Until You Need It
03:23
217
useCallback Pt.1
06:17
218
useCallback Pt. 2
04:01
219
useMemo
06:45
220
React Devtools Profiling & Memo
07:51
221
Code Splitting, Dynamic Imports, Suspense & Lazy
10:41
222
Firebase Rule Security
06:37
223
Don't Over Complicate
02:06
224
Be a Late Follower
02:57
225
Break Things Down
01:39
226
It Will Never Be Perfect
01:54
227
Progressive Web Apps
12:55
228
Progressive Web Apps Examples
06:16
229
PWA - HTTPS
06:12
230
PWA - App Manifest
06:13
231
PWA - Service Workers
13:16
232
PWA - Final Thoughts
02:04
233
PWA - Our Application
10:42
234
Global Styles and Media Queries
08:37
235
Remaining Mobile Styles
10:05
236
Section Overview
06:22
237
Types of Tests
02:59
238
Testing Libraries
15:29
239
Unit Tests
02:43
240
Integration Tests
02:47
241
Automation Testing
04:28
242
Final Note On Testing
02:57
243
Setting Up Jest
11:30
244
Our First Tests
11:11
245
Writing Tests
05:32
246
Asynchronous Tests
10:19
247
Asynchronous Tests 2
11:42
248
Mocks and Spies
12:51
249
Introduction To Enzyme
14:30
250
Snapshot Testing
09:30
251
Snapshot Testing + Code Coverage
04:55
252
Testing Stateful Components
11:17
253
Quick Recap
02:36
254
Testing Connected Components
23:51
255
Testing Connected Components 2
03:36
256
Testing Reducers
14:58
257
Testing Actions
18:28
258
Section Review
04:12
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
Unlock unlimited learning

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

Learn more about subscription

Books

Read Book Complete React Developer in 2023 (w/ Redux, Hooks, GraphQL)

#TitleTypeOpen
1Book 1 PDF

Related courses

Frequently asked questions

What prerequisites are necessary for this course?
This course is suitable for developers with some foundational knowledge of JavaScript. The initial lessons cover environment setup for both Mac and Windows, which suggests that a basic understanding of system configuration and command line operations would be beneficial. Familiarity with JavaScript concepts such as functions, objects, and arrays will also help in understanding React-specific topics like component architecture and state management.
What will I build by the end of the course?
By the end of the course, you will have built a massive e-commerce application similar to Shopify. This project incorporates a range of technologies such as React, Redux, Hooks, GraphQL, Firebase, and Stripe. The course is project-based, ensuring you apply what you learn practically, from setting up the project to deploying it into production.
Who is the target audience for this course?
The course is designed for developers aspiring to become Senior React Developers. It's particularly suited to those who want to work with modern front-end technologies and are interested in building scalable web applications. Developers aiming to work at top tech companies or enhance their portfolio with a comprehensive project will find this course valuable.
How does this course compare in depth and scope to other React courses?
This course is described as the most comprehensive online resource on React, covering both fundamental and advanced topics. It includes modern React features like Hooks and Context API, as well as integration with backend technologies such as Firebase and GraphQL. The inclusion of a full e-commerce project sets it apart by providing practical, hands-on experience rather than theoretical knowledge alone.
Does the course cover deployment and production-ready applications?
Yes, the course guides you from start to finish, including production deployment. It covers Scaffolding, React Router, and advanced topics such as Redux-Saga and Firebase, which are essential for creating production-ready applications. The course material ensures you not only build applications but also understand how to deploy them effectively.
What specific tools and platforms are taught in this course?
The course covers a wide array of tools and platforms including Create React App for starting projects, Redux for state management, GraphQL for data querying, Firebase for backend services, Stripe API for payment processing, and Styled-Components for styling. You will also learn about React Router, Context API, and Redux-Saga among other tools.
What topics are not covered in this course?
While the course is comprehensive, it focuses primarily on React and its ecosystem. It does not cover server-side rendering with Next.js or native mobile application development with React Native. The emphasis is on web applications using React and related tools, rather than full-stack or mobile development.