Complete React Developer in 2023 (w/ Redux, Hooks, GraphQL)
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.
- Basic HTML, CSS and JavaScript knowledge
- You do not need any experience with React or any other JS framework!
- 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)
# | 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 |