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

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

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 40h 24m | 19.5 GB

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

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, 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 2021. 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.

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 JavaScript to write clean code
+ Table of Contents

1 Course Outline
2 Join Our Online Classroom!
3 Exercise Meet The Community

React Key Concepts
4 React Concepts
5 The Birth of React.js
6 Declarative vs Imperative
7 Component Architecture
8 One Way Data Flow
9 UI Library
10 How To Be A Great React Developer
11 React Latest Version!
12 Web Developer Monthly

React Basics
13 Section Overview
14 Environment Setup for Mac
15 Environment Setup For Windows
16 NPM vs YARN
17 Yihua’s VSCode font and settings
18 VSCode settings update
19 Create React App
20 Create React App 2
21 React Project Setup
22 Don’t Eject
23 Class Components
24 Thinking In JSX
25 Dynamic Content
26 Optional map() + key attribute
27 Single Page Application
28 Fetching Content
29 Optional Promises
30 Architecting Our App
31 Card List Component
32 Quick note on quotes for string interpolation
33 Card Component
34 Exercise Breaking Into Components
35 State vs Props
36 SearchField State
37 React Events
38 Filtering State
39 Optional filter(), includes()
40 Search Box Component
41 Exercise Where To Put State
42 Class Methods and Arrow Functions
43 Exercise Event Binding
44 Quick Note Binding in React
45 Optional Git + Github
46 Optional Connecting With SSH To Github
47 Deploying Our App
48 NOTE CORS error
49 React and ReactDOM
50 Latest React Package Updates
51 Revisiting VirtualDOM + Unidirectional Data Flow
52 Asynchronous setState
53 Introducing Lifecycle Methods
54 React Lifecycle Methods – Mounting
55 React Lifecycle Methods – Updating
56 React Lifecycle Methods – Unmounting
57 Section Review

Master Project Setting Up E-commerce Project
58 Endorsements On LinkedIN
59 The Long Road Ahead
60 Project Overview
61 Github + Project Repositories
62 Course Guideline + Github Links
63 Quick Note About Github
64 Update for CRA v4.0.0+ and React 17+
65 E-commerce Homepage + SASS setup
66 Project Files + Modules
67 Project Component Architecture
68 CSS and SCSS files
69 Homepage and Directory Components
70 Styling Menu Items
71 Updated Google Fonts UI
72 Quick Note React 17
73 React 17 Updating Packages + Latest Version Of React

Master Project React Router and Routing
74 Routing In React
75 Routing In Our Project
76 React Router Dom
77 withRouter()

Master Project Forms + Components
78 Shopping Data
79 Shop Page
80 Collection Item
81 Header Component
82 Resources Importing SVG In React
83 Introducing Forms In React
84 Sign In Component
85 Form Input Component
86 Custom Button Component

Master Project Firebase + User Authentication
87 Section Overview
88 Firebase Introduction
89 IMPORTANT NOTE firebase version in the course!
90 Adding a Project to Firebase
91 Note about Github
92 Google Sign In Authentication
93 Cloning From This Point On
94 Google Sign In Authentication 2
95 Optional How to fix 403 restricted client error
96 Google Sign In Authentication 3
97 Firebase Firestore
98 Optional Async Await
99 Storing User Data In Firebase
100 Note Firestore update regarding permissions
101 Storing User Data In Our App
102 Sign Up Component
103 Sign Up With Email and Password
104 Sign In With Email and Password
105 Note on our Custom Button
106 Section Review

Master Project Redux 1
107 Section Overview
108 Redux Introduction
109 Redux Concepts
110 Redux In Our Application
111 Redux Actions and Reducers
112 Setting Up Redux 1
113 Setting Up Redux 2
114 connect() and mapStateToProps
115 mapDispatchToProps
116 User Redirect and User Action Type
117 Cart Component
118 Cart Dropdown Component
119 Implementing Redux In Cart
120 Add To Cart Styling
121 Cart Item Reducer
122 Adding Multiple Items To Cart
123 Optional find()
124 Cart Item Component
125 Optional reduce()
126 Selectors in Redux
127 Optional Memoization
128 Reselect Library
129 Quick correction on CartIcon re-rendering
130 User Selectors
131 Checkout Page
132 Checkout Page 2
133 Extensible Code
134 Dispatch Action Shorthand
135 Checkout Item Component
136 Remove Items From Cart
137 Remove Items At Checkout

Master Project Session Storage + Persistence
138 Local Storage and Session Storage
139 Redux Persist

Master Project Redux 2
140 Directory State Into Redux
141 Collection State Into Redux
142 Collection Overview Component

Master Project Advanced Routing
143 Nested Routing in Shop Page
144 Improving Naming Of Component
145 Collection Routing and Selector
146 Memoizing selectCollection and collectionUrlParam
147 Optional Currying

Master Project State Normalization
148 Data Normalization + Collection Page
149 Optional Hash Tables vs Arrays
150 Data Flow In Our App
151 Thinking About Data Flow

Master Project Stripe Payments Part 1
152 Introduction To Stripe
153 Stripe Integration
154 Note about TEST credit cards for Stripe
155 Cloning From This Point On
156 Finishing Touches + Look Ahead

Master Project Deploying To Production
157 Deploying To Heroku
158 Resources Buildpack
159 Linking Github to Heroku
160 Optional Git + Heroku commands
161 Optimizing Production Build

Master Project CSS in JS – styled-components
162 CSS in JS
163 styled-components
164 styled-components In Our App
165 Thinking About Tradeoffs
166 styled-components In Our App 2
167 styled-components In Our App 3
168 Exercise styled-components

Master Project Advanced Redux + Firebase
169 Section Overview
170 Quick Note Firebase
171 Firebase Refresher
172 Firebase Refresher 2
173 Moving Our Shop Data To Firebase
174 Moving Our Shop Data To Firebase 2
175 Reviewing What We Have Done
176 Bringing Shop Data To Our App
177 Adding Shop Data To Redux
178 NOTE Shop page may break

Master Project HOC Patterns
179 WithSpinner HOC
180 WithSpinner HOC 2
181 Quick Note About Next Lesson
182 Optional How To Build HOCs

Master Project Asynchronous Redux
183 Observables + Observer Pattern
184 Promise Pattern
185 Redux Thunk
186 What Does Redux Thunk Do
187 Debugging Our Code

Master Project Container Pattern
188 Container Pattern
189 Refactoring Is A Tradeoff

Master Project Redux-Saga
190 Introduction to Sagas
191 Correction about Saga flow
192 Generator Functions
193 Quick Note About Sagas
194 redux-saga
195 Redux Thunk Into Saga
196 take(), takeEvery(), takeLatest()
197 Root Saga
198 Planning Ahead With Sagas
199 Google Sign In Into Sagas
200 Email Sign In Into Sagas
201 Reviewing Our Sagas
202 Recreating Persistence
203 Note Small correction on user saga
204 Sign Out With Sagas
205 Clear Cart Saga
206 Solution Sign Up Saga

Master Project React Hooks
207 React Hooks Introduction (useState)
208 Why Did React Add Hooks
209 useEffect
210 Hook Rules
211 Converting Class Components With useState
212 useEffect In Our App
213 useEffect as ComponentWillUnmount()
214 useEffect Cheat Sheet
215 Custom Hooks
216 Custom Hooks 2
217 useReducer
218 useContext + useMemo + useCallback
219 Should You Adopt Hooks

Master Project Stripe Payments Part 2 – Backend
220 About This Section
221 Introduction To Backend
222 Cloning From This Point On
223 Note Do not push to github until end of section!
224 Creating our Server Inside the Project
225 Building A Basic Server
226 What We Are Building
227 Backend Payment Route
228 Connecting Client To Server
229 NOTE Ignoring client node modules
230 Deploying To Production

Master Project Context API
231 Quick note about cloning this repo
232 Introduction To Context API
233 Context Consumer + useContext Hook
234 Context Provider
235 Cart Context
236 Provider Context Pattern
237 Provider Context Pattern 2
238 Redux vs Context API

Master Project GraphQL + Apollo
239 Introduction To GraphQL
240 Course Guideline + Github Links
241 Note about next lesson
242 GraphQL Playground
243 Backend Code
244 GraphQL Playground 2
245 Introduction To Apollo
246 Apollo Container
247 Note Destructuring change in next lesson
248 Query With Variables
249 GraphQL vs Redux
250 Mutations On The Client
251 Resources Mutations
252 Mutations On The Client 2
253 Adding Items With Apollo
254 Adding Items With Apollo 2
255 Note Compose in next lesson
256 CartItem Count With Apollo
257 Exercises Adding More GraphQL
258 Should You Use GraphQL

Master Project Mobile Support
259 Mobile Responsiveness
260 Mobile Responsiveness 2
261 Exercise Mobile Friendly App

Master Project React Performance
262 Code Splitting Introduction
263 Introducing React Lazy
264 React Lazy + Suspense
265 Error Boundaries
266 React.memo, PureComponent, shouldComponentUpdate
267 Update on React Devtools
268 Performance In Our App
269 useCallback
270 useMemo
271 Gzipping and Compression
272 React Profiler
273 React Performance Cheat Sheet

React Interview Questions + Advice
274 Don’t Overcomplicate
275 Be A Late Follower
276 Break Things Down
277 It Will Never Be Perfect
278 Learning Guideline
279 Endorsements On LinkedIn
280 Become An Alumni
281 Common React Interview Questions

Bonus Progressive Web App
282 Note About This Section
283 Progressive Web Apps
284 Resources Progressive Web Apps
285 Progressive Web Apps Examples
287 Note on server.js code
288 Resources PWA – HTTPS
289 PWA – App Manifest
290 PWA – Service Workers
291 Resources PWA – Service Workers
292 PWA – Final Thoughts
293 Update for CRA v4.0.0+ and React 17+
294 Converting Our App To PWA
295 Addendum to Server.js

Bonus Firebase Security
296 Firebase Security Rules
297 User Security Rule
298 User Security Rule 2
299 More Security Rules
300 Coding Challenge Firebase Cart

Bonus Testing
301 Note About This Section
302 Section Overview
303 Types of Tests
304 Testing Libraries
305 Note The Next Videos
306 Unit Tests
307 Integration Tests
308 Automation Testing
309 Final Note On Testing
310 Setting Up Jest
311 Our First Tests
312 Writing Tests
313 Quick Note Upcoming API Endpoint
314 Asynchronous Tests
315 Asynchronous Tests 2
316 Resources Jest Cheat Sheet
317 Mocks and Spies
318 Note Testing React Apps
319 Introduction To Enzyme
320 Quick Note Empty Snapshots
321 Snapshot Testing
322 Snapshot Testing + Code Coverage
323 Testing Stateful Components
324 Quick Recap
325 Testing Connected Components
326 Testing Connected Components 2
327 Testing Reducers
328 Testing Actions
329 Section Review
330 Testing In Our Master Project

Bonus Webpack + Babel
331 Introduction to Webpack + Babel
332 Webpack Config

Bonus Build a GatsbyJS Blog
333 Quick Note About This Section
334 Introduction to Gatsby.js
335 Starting a Gatsby Project
336 Gatsby Pages
337 Gatsby GraphQL + Markdown
338 Building Our Blog 1
339 Building Our Blog 2
340 Building Our Blog 3
341 Building Our Blog 4
342 Building Our Blog 5

Appendix 1 Key Developer Concepts
343 map()
344 Promises
345 filter()
346 includes()
347 CWD Git + Github
348 Github Update Master — Main
349 CWD Git + Github 2
350 Async Await
351 find()
352 reduce()
353 Memoization
354 Currying

Open Source Projects
355 Contributing To Open Source
356 Contributing To Open Source 2
357 Exercise Contribute To Open Source

AMA + Bonus
358 AMA – 100,000 Students!!
359 Coding Challenges

360 Bonus Lecture