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

39h 24m 36s
English
Paid

Course description

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

Read more about the course

Updated with all new React features for 2020! Join a live online community of over 200,000+ developers and a course taught by industry experts that have actually worked both in Silicon Valley and Toronto with React.js.

Using the latest version of React, this course is focused on efficiency. Never spend time on confusing, out of date, incomplete tutorials anymore. Graduates of Andrei’s courses are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, + other top tech companies.

We guarantee you this is the most comprehensive online resource on React. This project based course will introduce you to all of the modern toolchain of a React developer in 2020. Along the way, we will build a massive e-commerce application similar to Shopify using React, Redux, React Hooks, React Router, GraphQL, Context API, Firebase, Redux-Saga, Stripe + more. This is going to be a full stack app (MERN stack), using Firebase.

The curriculum is going to be very hands on as we walk you from start to finish of releasing a professional React project all the way into production. We will start from the very beginning by teaching you React Basics and then going into advanced topics so you can make good decisions on architecture and tools on any of your future ReactJS projects.

All code is going to be provided step by step and even if you don’t like to code along, you will get access to the the full master project code so anyone signed up for the course will have their own project to put on their portfolio right away.

The topics covered will be:

  • 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
  • React Performance
  • React Design Patterns
  • Testing with Jest, Enzyme and Snapshot testing
  • React Best Practices
  • Persistance + Session Storage
  • State Normalization
  • more

Wait wait… I know what you’re thinking. Why aren’t we building 10+ projects? Well, here’s the truth: Most courses teach you React and do just that. They show you how to get started, build 10 projects that are simple and easy to build in a day, and just add some CSS to make them look fancy. In real life though, you’re not building silly applications. When you apply to jobs, nobody is going to care that you built a really pretty To Do app. Employers want to see you build large apps that can scale, that have good architecture, and that can be deployed to production.

Let me tell you 3 reasons why this course is different from any other React tutorial online:

1. You will build the biggest project you will see in any course. This type of project would take you months to implement yourself.

2. This course is taught by 2 instructors that have actually worked for some of the biggest tech firms using React in production. Yihua has been working on some of the biggest e-commerce websites that you have definitely heard of and probably have shopped at. Andrei has worked on enterprise level React applications for large IPOed tech firms in Silicon Valley as well as Toronto. By having both of them teach, you get to see different perspective and learn from 2 senior developers as if you are working at a company together.

3. We learn principles that are important beyond just what you learn as a beginner. Using the instructor's experiences you learn about design patterns, how to architect your app, organize your code, structure your folders, and how to think about performance. Let’s just say we don’t shy away from the advanced topics.

This course is not about making you just code along without understanding the principles so that when you are done with the course you don’t know what to do other than watch another tutorial. No! This course will push you and challenge you to go from an absolute beginner in React to someone that is in the top 10% of React developers. 

Taught By:

Andrei Neagoie is the instructor of the highest rated Development courses on Udemy as well as one of the fastest growing. His graduates have moved on to work for some of the biggest tech companies around the world like Apple, Google, Amazon, JP Morgan, IBM, UNIQLO etc... He has been working as a senior software developer in Silicon Valley and Toronto for many years, and is now taking all that he has learned, to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life. 

Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student's valuable time.   Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities. 

Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way. 

Taking his experience in educational psychology and coding, Andrei's courses will take you on an understanding of complex subjects that you never thought would be possible.  

See you inside the courses!

Yihua Zhang is one of the Instructors of Zero To Mastery, one of the highest rated and fastest growing Web Development academies on Udemy
. He has been working as a software developer for numerous years in Toronto for some of the largest tech companies in the world. He has also been working as an instructor for more than a decade. He is focused on bringing everything he has learned to help you achieve a new career as a developer, but also give you all the fundamental skills required to flourish in this incredible industry.

Yihua is a self taught developer, so he fully understands the challenges and mindset of coming into this industry from various other backgrounds. He has been on both sides of the table, as both an instructor and student numerous times so he can empathize with the difficulty of learning something new and challenging. Learning itself is a skill that needs to be practiced and improved upon, and he is dedicated to helping you improve and master that skill for yourself. Courses need to be practical, you need to be able to understand why you are learning the things that you are being taught. You need to understand the problem before you know the solution, and he prides himself on teaching you how to build professional, real world applications so you truly understand why you are doing things a specific way. He will teach you the mindset and skillset required to grow as a developer as fast as possible, so you can have the rich and fulfilling life that comes with this career.

Yihua's courses will guide you to build beautifully written and richly featured applications, while truly understanding all the complex concepts you will encounter along the way.

Requirements:
  • Basic HTML, CSS and JavaScript knowledge
  • You do not need any experience with React or any other JS framework!
Who this course is for:
  • Students who are interested in going beyond a normal "beginner" tutorial
  • Programmers who want to learn the most in demand skill of a web developer
  • Developers that want to be in the top 10% of React Developers
  • Students who want to gain experience working on a scalable large application
  • Bootcamp or online tutorial graduates that want to go beyond the basics

What you'll learn:

  • Build enterprise level React applications and deploy to production
  • Learn to build reactive, performant, large scale applications like a senior developer
  • Learn the latest features in React including Hooks, Context API, Suspense, React Lazy + more
  • Master the latest ecosystem of a React Developer from scratch
  • Become the top 10% ReactJS Developer
  • Using GraphQL as a React Developer
  • Use Redux, Redux Thunk and Redux Saga in your applications
  • Learn to compare tradeoffs when it comes to different state management
  • Set up authentication and user accounts
  • Use Firebase to build full stack applications
  • Learn to lead React projects by making good architecture decisions and helping others on your team
  • Master React Design Patterns
  • Learn CSS in JS with styled-components
  • Routing with React Router
  • Converting apps to Progressive Web Apps
  • Testing your application with Jest, Enzyme and snapshot testing
  • Handling online payments with Stripe API
  • Using the latest ES6/ES7/ES8/ES9/ES10 JavaScript to write clean code

Watch Online

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

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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Master Custom React Hooks with TypeScript

Master Custom React Hooks with TypeScript

Sources: fullstack.io
Welcome to the course "Creating a Custom React Hook npm Package using React and TypeScript"! In this course, we will be developing...
2 hours 21 minutes 3 seconds
React Front To Back 2022

React Front To Back 2022

Sources: udemy, Brad Traversy
This course is for anyone that wants to learn React and also for React developers looking to build some projects and sharpen their skills. The first project (Feedback App) is st...
19 hours 57 minutes 45 seconds
Advanced React For Enterprise: React for senior engineers

Advanced React For Enterprise: React for senior engineers

Sources: udemy
Welcome to the React for Senior engineers course !! Knowledge of React is 100% required for this course. I've been working with React.js for over 5 years now,
6 hours 4 minutes 5 seconds
Go Full Stack with Spring Boot and React

Go Full Stack with Spring Boot and React

Sources: udemy
Welcome to this Amazing Course on Full Stack Web Development with React and Spring Boot. This course is designed to be a Perfect First Step as an Introduction to React and Full ...
11 hours 43 minutes 36 seconds
Redux

Redux

Sources: ui.dev (ex. Tyler McGinnis)
There's no better strategy for learning a new technology than building your own version of it. In this course, we'll take that to the extreme. First, you'll start off by buildin...
7 hours 13 minutes 23 seconds