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

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

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 42h 19m | 26.6 GB

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

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
  • Set up authentication and user accounts
  • Learn to compare tradeoffs when it comes to different state management
  • 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
Table of Contents

Introduction
1 Course Outline
2 Join Our Online Classroom!
3 Exercise Meet The Community
4 Monthly Coding Challenges, Free Resources and Guides

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

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

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

Master Project React Router and Routing
77 Routing In React
78 Routing In Our Project
79 React Router Dom
80 withRouter()

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

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

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

Master Project Session Storage + Persistence
143 Local Storage and Session Storage
144 Redux Persist

Master Project Redux 2
145 Directory State Into Redux
146 Collection State Into Redux
147 Collection Overview Component

Master Project Advanced Routing
148 Nested Routing in Shop Page
149 Improving Naming Of Component
150 Collection Routing and Selector
151 Memoizing selectCollection and collectionUrlParam
152 Optional Currying

Master Project State Normalization
153 Data Normalization + Collection Page
154 Optional Hash Tables vs Arrays
155 Data Flow In Our App
156 Thinking About Data Flow

Master Project Stripe Payments Part 1
157 Introduction To Stripe
158 Stripe Integration
159 Note about TEST credit cards for Stripe
160 Cloning From This Point On
161 Finishing Touches + Look Ahead

Master Project Deploying To Production
162 Deploying To Heroku
163 Resources Buildpack
164 Linking Github to Heroku
165 Optional Git + Heroku commands
166 Optimizing Production Build

Master Project CSS in JS – styled-components
167 CSS in JS
168 styled-components
169 styled-components In Our App
170 Thinking About Tradeoffs
171 styled-components In Our App 2
172 styled-components In Our App 3
173 Exercise styled-components

Master Project Advanced Redux + Firebase
174 Section Overview
175 Quick Note Firebase
176 Firebase Refresher
177 Firebase Refresher 2
178 Moving Our Shop Data To Firebase
179 Moving Our Shop Data To Firebase 2
180 Reviewing What We Have Done
181 Bringing Shop Data To Our App
182 Adding Shop Data To Redux
183 NOTE Shop page may break

Master Project HOC Patterns
184 WithSpinner HOC
185 WithSpinner HOC 2
186 Quick Note About Next Lesson
187 Optional How To Build HOCs

Master Project Asynchronous Redux
188 Observables + Observer Pattern
189 Promise Pattern
190 Redux Thunk
191 What Does Redux Thunk Do
192 Debugging Our Code

Master Project Container Pattern
193 Container Pattern
194 Refactoring Is A Tradeoff

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

Master Project React Hooks
212 React Hooks Introduction (useState)
213 Why Did React Add Hooks
214 useEffect
215 Hook Rules
216 Converting Class Components With useState
217 useEffect In Our App
218 useEffect as ComponentWillUnmount()
219 useEffect Cheat Sheet
220 Custom Hooks
221 Custom Hooks 2
222 useReducer
223 Should You Adopt Hooks

Master Project Advanced React Hooks
224 React-Redux Hooks
225 useDispatch
226 useParams Part 1
227 useParams Part 2
228 useState Part 1
229 useState Part 2
230 useEffect Part 1
231 useEffect Part 2
232 useEffect Part 3
233 useMemo
234 useLayoutEffect

Master Project Stripe Payments Part 2 – Backend
235 About This Section
236 Introduction To Backend
237 Cloning From This Point On
238 Note Do not push to github until end of section!
239 Creating our Server Inside the Project
240 Building A Basic Server
241 Note You don’t need the CORS library anymore
242 What We Are Building
243 Quick note about next lecture Stripe Dashboard and Private Keys
244 Backend Payment Route
245 Connecting Client To Server
246 NOTE Ignoring client node modules
247 Deploying To Production

Master Project Context API
248 Quick note about cloning this repo
249 Introduction To Context API
250 Context Consumer + useContext Hook
251 Context Provider
252 Cart Context
253 Provider Context Pattern
254 Provider Context Pattern 2
255 Redux vs Context API

Master Project GraphQL + Apollo
256 Introduction To GraphQL
257 Course Guideline + Github Links
258 Note about next lesson
259 GraphQL Playground
260 Backend Code
261 GraphQL Playground 2
262 Introduction To Apollo
263 Apollo Container
264 Note Destructuring change in next lesson
265 Query With Variables
266 GraphQL vs Redux
267 Mutations On The Client
268 Resources Mutations
269 Mutations On The Client 2
270 Adding Items With Apollo
271 Adding Items With Apollo 2
272 Note Compose in next lesson
273 CartItem Count With Apollo
274 Exercises Adding More GraphQL
275 Should You Use GraphQL

Master Project Mobile Support
276 Mobile Responsiveness
277 Mobile Responsiveness 2
278 Exercise Mobile Friendly App

Master Project React Performance
279 Code Splitting Introduction
280 Introducing React Lazy
281 React Lazy + Suspense
282 Error Boundaries
283 React.memo, PureComponent, shouldComponentUpdate
284 Update on React Devtools
285 Performance In Our App
286 useCallback
287 useMemo
288 Gzipping and Compression
289 React Profiler
290 React Performance Cheat Sheet

React Interview Questions + Advice
291 Don’t Overcomplicate
292 Be A Late Follower
293 Break Things Down
294 It Will Never Be Perfect
295 Learning Guideline
296 Endorsements On LinkedIn
297 Become An Alumni
298 Common React Interview Questions

Progressive Web App
299 Note About This Section
300 Progressive Web Apps
301 Opt-In Service Worker in CRA
302 Resources Progressive Web Apps
303 Progressive Web Apps Examples
304 PWA – HTTPS
305 Note on server.js code
306 Resources PWA – HTTPS
307 PWA – App Manifest
308 PWA – Service Workers
309 Resources PWA – Service Workers
310 PWA – Final Thoughts
311 Update for CRA v4.0.0+ and React 17+
312 Converting Our App To PWA
313 Addendum to Server.js

Firebase Security
314 Firebase Security Rules
315 User Security Rule
316 User Security Rule 2
317 More Security Rules
318 Coding Challenge Firebase Cart

Testing in React
319 Note About This Section
320 Section Overview
321 Updated Code For This Section
322 Types of Tests
323 Testing Libraries
324 Note The Next Videos
325 Unit Tests
326 Integration Tests
327 Automation Testing
328 Final Note On Testing
329 Setting Up Jest
330 Our First Tests
331 Writing Tests
332 Quick Note Upcoming API Endpoint + ES6 Modules
333 Asynchronous Tests
334 Asynchronous Tests 2
335 Resources Jest Cheat Sheet
336 Mocks and Spies
337 Note Testing React Apps
338 Enzyme vs React Testing Library
339 Introduction To Enzyme
340 Quick Note Empty Snapshots
341 Snapshot Testing
342 Snapshot Testing + Code Coverage
343 Testing Stateful Components
344 Quick Recap
345 Testing Connected Components
346 Testing Connected Components 2
347 Testing Reducers
348 Testing Actions
349 Section Review
350 Testing In Our Master Project

Webpack + Babel
351 Introduction to Webpack + Babel
352 Webpack Config

Build a GatsbyJS Blog
353 Quick Note About This Section
354 Introduction to Gatsby.js
355 Starting a Gatsby Project
356 Gatsby Pages
357 Gatsby GraphQL + Markdown
358 Building Our Blog 1
359 Building Our Blog 2
360 Building Our Blog 3
361 Building Our Blog 4
362 Building Our Blog 5

Appendix 1 Key Developer Concepts
363 map()
364 Promises
365 filter()
366 includes()
367 CWD Git + Github
368 Github Update Master — Main
369 CWD Git + Github 2
370 Async Await
371 find()
372 reduce()
373 Memoization
374 Currying

Open Source Projects
375 Contributing To Open Source
376 Contributing To Open Source 2
377 Exercise Contribute To Open Source

AMA + Bonus
378 AMA – 100,000 Students!!
379 Coding Challenges
380 Bonus Lecture

Homepage