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

39h 24m 36s
English
Paid
October 7, 2024

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

More

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 Complete React Developer in 2023 (w/ Redux, Hooks, GraphQL)

Join premium to watch
Go to premium
# 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 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

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

# Title
1 Book 1

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

React - The full course

React - The full course

Duration 1 hour 20 minutes 10 seconds
React Simplified - Advanced

React Simplified - Advanced

Duration 11 hours 29 minutes 50 seconds
Crash Course: Build a Full-Stack Web App in a Weekend!

Crash Course: Build a Full-Stack Web App in a Weekend!

Duration 12 hours 13 minutes 30 seconds
MERN Stack Web Development with Ultimate Authentication

MERN Stack Web Development with Ultimate Authentication

Duration 9 hours 24 minutes 59 seconds
React Router v4

React Router v4

Duration 6 hours 44 minutes 1 second
Build Product Hunt with ReactJS and Firebase

Build Product Hunt with ReactJS and Firebase

Duration 4 hours 47 minutes 27 seconds
MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)

MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)

Duration 34 hours 4 minutes 17 seconds
Fullstack ASP.NET Core and React Masterclass | Learnify

Fullstack ASP.NET Core and React Masterclass | Learnify

Duration 20 hours 40 minutes 31 seconds