Skip to main content

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

39h 48m
English
Free

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

0:00 0:00
#Lesson TitleDuration
1Complete React Developer: Zero to Mastery03:49
2Course Outline04:58
3React Concepts02:07
4The Birth of React.js09:25
5Declarative vs Imperative06:19
6Component Architecture05:24
7One Way Data Flow06:11
8UI Library04:53
9How To Be A Great React Developer04:19
10Section Overview04:06
11Environment Setup For Mac08:09
12Environment Setup For Windows09:54
13Getting Started with Toolkits11:13
14Introducing Monsters Rolodex01:55
15Getting Started with Vite05:45
16Vite Packages12:51
17Vite Scripts10:30
18Update React to 1907:00
19Installing and Using Yarn04:02
20Understanding React main.jsx08:12
21Intro to JSX08:21
22Components and useState - Part 108:46
23useState Setter Function - Part 208:39
24Basics of Props10:58
25Iterating Components Through an Array08:57
26Rendering09:20
27useState and Re-rendering11:45
28Side Effects and useEffect10:14
29Fetching User Data08:09
30Getting Images with RoboHash03:33
31Folder Structure and Components13:10
32Filtering by Search Input06:54
33Finishing Styles10:23
34Scaffolding a project with Create React App09:38
35Don't Eject01:58
36DOM & Virtual DOM10:12
37React & ReactDOM11:08
38React & ReactDOM part 206:26
39ReactDOM v18 Changes02:29
40DOM Paint Flashing06:10
41The Long Road Ahead02:53
42Project Overview01:48
43Github Strategy07:23
44Scaffolding Our Capstone Project07:16
45Setting Up Our Categories06:02
46Adding Sass06:57
47Category Item Component07:00
48Directory Component07:17
49Adding Fonts09:22
50Routing06:19
51Updating/Upgrading Libraries08:23
52Setting Up Our Homepage08:23
53React Router Outlet11:17
54Navigation Bar Component11:17
55React Router Link07:02
56Styling for Navigation + Logo05:05
57Setting Up Firebase07:45
58Authentication Flow07:00
59Authenticating With Firebase08:22
60Introducing Firestore Data Models13:02
61Setting Up User Documents14:35
62Finish Creating User Documents06:50
63Sign In With Redirect14:05
64Sign Up Form Pt.106:50
65Sign Up Form Pt.211:40
66Sign Up With Email + Password15:11
67Generalizing Form Input Component10:21
68Custom Button Component12:34
69Sign In Form11:00
70Finishing Authentication Page10:48
71Need For Context08:06
72User Context08:27
73Re-rendering From Context12:20
74Signing Out06:16
75Exercise: Imposter Syndrome08:45
76Observer: onAuthStateChange02:56
77Finalizing Auth Listener11:01
78Observer Pattern08:22
79New Shop Page10:27
80Products Context06:02
81Product Card Component06:47
82Cart Icon & Dropdown08:17
83Toggle Cart Open09:29
84Add To Cart Pt.107:57
85Add To Cart Pt.208:47
86Cart Item Designs10:41
87Creating Checkout Page08:09
88Decrement Checkout Item Quantity08:19
89Checkout Item Pt.207:25
90Checkout Item Pt.309:02
91Cart Total08:44
92Firestore DB No-SQL03:53
93addCollectionAndDocuments Pt.107:02
94addCollectionAndDocuments Pt.209:29
95Get Products + Categories From Firestore07:05
96Using Our CategoriesMap09:25
97Category Preview Component09:10
98Nested Routes in Shop07:40
99Category Page06:25
100Fixing Clashing Styles08:52
101Introducing Styled-Components09:10
102Styled-Components - Button11:35
103Styled-Component - Cart Dropdown09:10
104Styled-Component - Directory Item & Cart Icon09:37
105Styled-Component - Form Input Component10:53
106Last Touches08:55
107Deploying On Netlify03:57
108Adding Redirects For Netlify08:58
109Reducers explained09:35
110User Reducer11:26
111Cart Reducer Pt. 117:15
112Cart Reducer Pt. 209:58
113Cart Reducer Pt. 307:22
114Redux Toolkit Aside09:16
115Redux vs Context: Access04:14
116Redux vs Context: Data Flow08:50
117React-Redux: Installation04:53
118React-Redux: Setting Up Our Store07:14
119React-Redux: Creating User Reducer10:34
120Redux Part: Selectors06:08
121Categories Reducer07:46
122Categories Selectors08:02
123Business Logic in Our Selectors08:42
124What Triggers useSelector08:05
125Demystifying Middleware13:22
126Redux Triggers Extra Re-renders05:23
127Reselect Library13:42
128Migrating Cart Context to Redux Pt. 108:43
129Migrating Cart Context to Redux Pt. 205:54
130Migrating Cart Context to Redux Pt. 308:38
131Migrate Cart Context to Redux Pt. 406:39
132Redux-Persist07:06
133Redux-Devtools09:32
134Asynchronous Redux: Redux-Thunk08:11
135Redux-Thunk Pt. 207:47
136Redux-Thunk Pt. 308:33
137Asynchronous Redux: Redux-Saga08:00
138Generator Functions08:39
139Redux-Saga: fetchCategoriesAsync Thunk to Saga10:35
140Redux-Saga: Converting onAuthStateChanged Listener to Promise07:14
141Redux-Saga: Check User Session Saga Pt. 111:05
142Redux-Saga: Check User Session Saga Pt. 207:55
143Redux-Saga: Sign in Sagas09:05
144Redux-Saga: Sign up Sagas10:26
145Redux-Saga: Sign out Sagas08:31
146Redux Toolkit Intro08:34
147Using createSlice11:41
148Using Redux Toolkit Action Creators07:24
149Non Serializable Value Middleware10:35
150Immutable Middleware04:04
151Categories to createSlice04:38
152Cart to createSlice09:32
153The Need for Serverless Functions08:55
154Serverless Functions Explained06:58
155Setting up Stripe08:40
156Setting up Our PaymentForm08:20
157Writing Our First Serverless Function09:32
158Finishing Stripe Payment12:35
159Tidying Up Our UI12:57
160Adding Auth With Netlify URL01:24
161Adding Environment Variables To Netlify05:20
162Typescript Introduction07:52
163Starting our Typing08:15
164Typescript Interfaces09:52
165Typescript Types & Third Party Library Types11:50
166ChangeEvent Type From React03:30
167Understanding Generics11:21
168Typing React's SetState09:20
169Crwn-Clothing Typescript Overview07:55
170Typing createAction13:04
171Typing User Action Creators08:36
172Typing User Selectors08:47
173The Problem With Discriminating Unions07:46
174Type Predicate Functions05:54
175Intersections + Return Types08:36
176withMatcher Type07:21
177Improving Our Reducer Typing09:16
178Typing Redux Cart Files Pt. 109:21
179Typing Redux Cart Files Pt. 207:27
180Typing Out Firebase Utils13:21
181Typing User Actions08:48
182Typing User Reducer + Selectors06:35
183Typing Our Rootstate09:40
184Typing Third Party Libraries02:24
185Typing Our Custom Middleware01:45
186Typing Categories Saga08:09
187Typing User Sagas Pt. 108:54
188Typing User Sagas Pt. 205:29
189Typing Button Component07:59
190Typing Input & Form Components09:31
191Typing SVG Imports07:17
192Typing Our Payment Form08:20
193GraphQL Explained05:34
194GraphQL Playground07:40
195Graphql Queries10:10
196Categories Query08:37
197Updating Components To Consume GraphQL Values06:30
198Variables In useQuery & Caching11:52
199Mutations05:47
200Apollo vs Redux05:18
201Do Not Optimize For Performance Until You Need It03:23
202useCallback Pt.106:17
203useCallback Pt. 204:01
204useMemo06:45
205React Devtools Profiling & Memo07:51
206Code Splitting, Dynamic Imports, Suspense & Lazy10:41
207React Compiler05:23
208Firebase Rule Security06:37
209Don't Over Complicate02:06
210Be a Late Follower02:57
211Break Things Down01:39
212It Will Never Be Perfect01:54
213Progressive Web Apps12:55
214Progressive Web Apps Examples06:16
215PWA - HTTPS06:12
216PWA - App Manifest06:13
217PWA - Service Workers13:16
218PWA - Final Thoughts02:04
219PWA - Our Application10:42
220Global Styles and Media Queries08:37
221Remaining Mobile Styles10:05
222Section Overview06:22
223Types of Tests02:59
224Testing Libraries15:29
225Unit Tests02:43
226Integration Tests02:47
227Automation Testing04:28
228Final Note On Testing02:57
229Setting Up Jest11:30
230Our First Tests11:11
231Writing Tests05:32
232Asynchronous Tests10:19
233Asynchronous Tests 211:42
234Mocks and Spies12:51
235Introduction To Enzyme14:30
236Snapshot Testing09:30
237Snapshot Testing + Code Coverage04:55
238Testing Stateful Components11:17
239Quick Recap02:36
240Testing Connected Components23:51
241Testing Connected Components 203:36
242Testing Reducers14:58
243Testing Actions18:28
244Section Review04:12
245Aside - React Testing Library04:05
246Basics of RTL - Render and Screen08:57
247Button Tests - Part 109:33
248Button Tests - Part 205:22
249Render with Providers and Cart Icon Tests14:22
250Navigation Tests - Part 110:49
251Navigation Tests - Part 205:57
252Product Card and Testing Redux Actions07:18
253Navigation Tests - Part 308:42
254Category Tests and React-Router-Dom Mocks11:48
255Category Reducer Test07:58
256Category Selector Test06:10
257Category Sagas - Part 109:22
258Category Sagas - Part 213:58
259Introduction to Webpack + Babel12:11
260Webpack Config10:41
261Introduction to Gatsby.js07:56
262Starting a Gatsby Project09:04
263Gatsby Pages09:30
264Gatsby GraphQL + Markdown08:40
265Building Our Blog 110:54
266Building Our Blog 209:13
267Building Our Blog 306:55
268Building Our Blog 407:27
269Building Our Blog 509:33
270map()05:49
271Promises14:58
272filter()02:56
273includes()12:51
274CWD: Git + Github17:41
275CWD: Git + Github 216:53
276Async Await09:36
277find()03:07
278reduce()06:52
279Memoization07:48
280Currying04:25
281ES6 Classes08:45
282Inheritance14:42
283Thank You!01:18
284AMA - 100,000 Students!!38:31

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React Node AWS - Build infinitely Scaling MERN Stack App

React Node AWS - Build infinitely Scaling MERN Stack App

Sources: udemy
Master the art of building a highly scalable real world project using MERN Stack for a new startup that will scale infinitely. I will demonstrate how you could launch a project...
25 hours 1 minute 19 seconds
React Redux Ecommerce - Master MERN Stack Web Development

React Redux Ecommerce - Master MERN Stack Web Development

Sources: udemy
Master MERN Stack Web Development building Ultimate E-commerce app with React Redux Ant Design Firebase NodeJs and MongoDB. This project will have almost all the features you wa...
43 hours 9 minutes 35 seconds
Make 20 React Apps

Make 20 React Apps

Sources: Chris Sev
Learn React best practices and concepts that you can use on the job, in side projects, and in any React app.
12 hours 20 minutes 3 seconds
The Official React Query Course - query.gg

The Official React Query Course - query.gg

Sources: ui.dev (ex. Tyler McGinnis)
React Query has been one of the fastest growing and most popular third party libraries in the React ecosystem, and this course will teach you everything you...
4 hours 17 minutes 17 seconds