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
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

zerotomastery.io

zerotomastery.io thumbnail
Whether you are just starting to learn to code or want to advance your skills, Zero To Mastery Academy will teach you React, Javascript, Python, CSS and more to help you advance your career, get hired and succeed at some of the top companies in the world.

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)

#Title
1Book 1