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

Complete React Developer in 2020 (w/ Redux, Hooks, GraphQL)
Complete React Developer in 2020 (w/ Redux, Hooks, GraphQL)
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 39.5 Hours | 19.4 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: 16.10+ and 16.8+, 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 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.

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

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

Master Project Setting Up E-commerce Project
53 The Long Road Ahead
54 Homepage and Directory Components
55 Styling Menu Items
56 Project Overview
57 Github + Project Repositories
58 Course Guideline + Github Links
59 Quick Note About Github
60 E-commerce Homepage + SASS setup
61 Project Files + Modules
62 Project Component Architecture
63 CSS and SCSS files

Master Project React Router and Routing
64 Routing In React
65 Routing In Our Project
66 React Router Dom
67 withRouter()

Master Project Forms + Components
68 Shopping Data
69 Shop Page
70 Collection Item
71 Header Component
72 Resources Importing SVG In React
73 Introducing Forms In React
74 Sign In Component
75 Form Input Component
76 Custom Button Component

Master Project Firebase + User Authentication
77 Section Overview
78 Firebase Firestore
79 Optional Async Await
80 Storing User Data In Firebase
81 Storing User Data In Our App
82 Sign Up Component
83 Sign Up With Email and Password
84 Sign In With Email and Password
85 Section Review
86 Firebase Introduction
87 Adding a Project to Firebase
88 Note about Github
89 Google Sign In Authentication
90 Cloning From This Point On
91 Google Sign In Authentication 2
92 Optional How to fix 403 restricted client error
93 Google Sign In Authentication 3

Master Project Redux 1
94 Section Overview
95 User Redirect and User Action Type
96 Cart Component
97 Card Dropdown Component
98 Implementing Redux In Cart
99 Add To Cart Styling
100 Cart Item Reducer
101 Adding Multiple Items To Cart
102 Optional find()
103 Cart Item Component
104 Optional reduce()
105 Redux Introduction
106 Selectors in Redux
107 Optional Memoization
108 Reselect Library
109 User Selectors
110 Checkout Page
111 Checkout Page 2
112 Extensible Code
113 Dispatch Action Shorthand
114 Checkout Item Component
115 Remove Items From Cart
116 Redux Concepts
117 Remove Items At Checkout
118 Redux In Our Application
119 Redux Actions and Reducers
120 Setting Up Redux 1
121 Setting Up Redux 2
122 connect() and mapStateToProps
123 mapDispatchToProps

Master Project Session Storage + Persistence
124 Local Storage and Session Storage
125 Redux Persist

Master Project Redux 2
126 Directory State Into Redux
127 Collection State Into Redux
128 Collection Overview Component

Master Project Advanced Routing
129 Nested Routing in Shop Page
130 Improving Naming Of Component
131 Collection Routing and Selector
132 Optional Currying

Master Project State Normalization
133 Data Normalization + Collection Page
134 Optional Hash Tables vs Arrays
135 Data Flow In Our App
136 Thinking About Data Flow

Master Project Stripe Payments Part 1
137 Introduction To Stripe
138 Stripe Integration
139 Cloning From This Point On
140 Finishing Touches + Look Ahead

Master Project Deploying To Production
141 Deploying To Heroku
142 Resources Buildpack
143 Linking Github to Heroku
144 Optional Git + Heroku commands
145 Optimizing Production Build

Master Project CSS in JS – styled-components
146 CSS in JS
147 styled-components
148 styled-components In Our App
149 Thinking About Tradeoffs
150 styled-components In Our App 2
151 styled-components In Our App 3
152 Exercise styled-components

Master Project Advanced Redux + Firebase
153 Section Overview
154 Quick Note Firebase
155 Firebase Refresher
156 Firebase Refresher 2
157 Moving Our Shop Data To Firebase
158 Moving Our Shop Data To Firebase 2
159 Reviewing What We Have Done
160 Bringing Shop Data To Our App
161 Adding Shop Data To Redux

Master Project HOC Patterns
162 WithSpinner HOC
163 WithSpinner HOC 2
164 Quick Note About Next Lesson
165 Optional How To Build HOCs

Master Project Asynchronous Redux
166 Observables + Observer Pattern
167 Promise Pattern
168 Redux Thunk
169 What Does Redux Thunk Do
170 Debugging Our Code

Master Project Container Pattern
171 Container Pattern
172 Refactoring Is A Tradeoff

Master Project Redux-Saga
173 Introduction to Sagas
174 Email Sign In Into Sagas
175 Reviewing Our Sagas
176 Recreating Persistence
177 Sign Out With Sagas
178 Clear Cart Saga
179 Solution Sign Up Saga
180 Generator Functions
181 Quick Note About Sagas
182 redux-saga
183 Redux Thunk Into Saga
184 take(), takeEvery(), takeLatest()
185 Root Saga
186 Planning Ahead With Sagas
187 Google Sign In Into Sagas

Master Project React Hooks
188 React Hooks Introduction (useState)
189 Custom Hooks 2
190 useReducer
191 useContext + useMemo + useCallback
192 Why Did React Add Hooks
193 useEffect
194 Hook Rules
195 Converting Class Components With useState
196 useEffect In Our App
197 useEffect as ComponentWillUnmount()
198 useEffect Cheat Sheet
199 Custom Hooks

Master Project Stripe Payments Part 2 – Backend
200 About This Section
201 Introduction To Backend
202 Cloning From This Point On
203 Creating our Server Inside the Project
204 Building A Basic Server
205 What We Are Building
206 Backend Payment Route
207 Connecting Client To Server
208 Deploying To Production

Master Project Context API
209 Quick note about cloning this repo
210 Introduction To Context API
211 Context Consumer + useContext Hook
212 Context Provider
213 Cart Context
214 Provider Context Pattern
215 Provider Context Pattern 2
216 Redux vs Context API

Master Project GraphQL + Apollo
217 Introduction To GraphQL
218 GraphQL vs Redux
219 Mutations On The Client
220 Resources Mutations
221 Mutations On The Client 2
222 Adding Items With Apollo
223 Adding Items With Apollo 2
224 Note Compose in next lesson
225 CartItem Count With Apollo
226 Exercises Adding More GraphQL
227 Should You Use GraphQL
228 Course Guideline + Github Links
229 GraphQL Playground
230 Backend Code
231 GraphQL Playground 2
232 Introduction To Apollo
233 Apollo Container
234 Note Destructuring change in next lesson
235 Query With Variables

Master Project Mobile Support
236 Mobile Responsiveness
237 Mobile Responsiveness 2
238 Exercise Mobile Friendly App

Master Project React Performance
239 Code Splitting Introduction
240 React Profiler
241 Introducing React Lazy
242 React Lazy + Suspense
243 Error Boundaries
244 React.memo, PureComponent, shouldComponentUpdate
245 Performance In Our App
246 useCallback
247 useMemo
248 Gzipping and Compression

React Interview Questions + Advice
249 Don’t Overcomplicate
250 Be A Late Follower
251 Break Things Down
252 It Will Never Be Perfect
253 Learning Guideline
254 Endorsements On LinkedIn
255 Become An Alumni
256 Common React Interview Questions

Bonus Progressive Web App
257 Note About This Section
258 Resources PWA – Service Workers
259 PWA – Final Thoughts
260 Converting Our App To PWA
261 Addendum to Server.js
262 Progressive Web Apps
263 Resources Progressive Web Apps
264 Progressive Web Apps Examples
266 Note on server.js code
267 Resources PWA – HTTPS
268 PWA – App Manifest
269 PWA – Service Workers

Bonus Firebase Security
270 Firebase Security Rules
271 User Security Rule
272 User Security Rule 2
273 More Security Rules
274 Coding Challenge Firebase Cart

Bonus Testing
275 Note About This Section
276 Setting Up Jest
277 Our First Tests
278 Writing Tests
279 Asynchronous Tests
280 Asynchronous Tests 2
281 Resources Jest Cheat Sheet
282 Mocks and Spies
283 Note Testing React Apps
284 Introduction To Enzyme
285 Snapshot Testing
286 Section Overview
287 Snapshot Testing + Code Coverage
288 Testing Stateful Components
289 Quick Recap
290 Testing Connected Components
291 Testing Connected Components 2
292 Testing Reducers
293 Testing Actions
294 Section Review
295 Testing In Our Master Project
296 Types of Tests
297 Testing Libraries
298 Note The Next Videos
299 Unit Tests
300 Integration Tests
301 Automation Testing
302 Final Note On Testing

Bonus Webpack + Babel
303 Introduction to Webpack + Babel
304 Webpack Config

Bonus Build a GatsbyJS Blog
305 Quick Note About This Section
306 Building Our Blog 5
307 Introduction to Gatsby.js
308 Starting a Gatsby Project
309 Gatsby Pages
310 Gatsby GraphQL + Markdown
311 Building Our Blog 1
312 Building Our Blog 2
313 Building Our Blog 3
314 Building Our Blog 4

Appendix 1 Key Developer Concepts
315 map()
316 Memoization
317 Currying
318 Promises
319 filter()
320 includes()
321 CWD Git + Github
322 CWD Git + Github 2
323 Async Await
324 find()
325 reduce()

Open Source Projects
326 Contributing To Open Source
327 Contributing To Open Source 2
328 Exercise Contribute To Open Source

AMA + Bonus
329 AMA – 100,000 Students!!
330 Coding Challenges

331 Bonus Special Thank You Gift