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

Complete React Developer in 2019 (w/ Redux, Hooks, GraphQL)
Complete React Developer in 2019 (w/ Redux, Hooks, GraphQL)
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 37.5 Hours | 18.5 GB

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

Join a live online community of over 100,000+ developers and a course taught by industry experts that have actually worked both in Silicon Valley and Toronto with React.js. This is a brand new course just released July 2019!

Using the latest version of React: 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 2019. 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 Revisiting VirtualDOM + Unidirectional Data Flow
40 Asynchronous setState
41 Introducing Lifecycle Methods
42 React Lifecycle Methods – Mounting
43 React Lifecycle Methods – Updating
44 NPM vs YARN
45 React Lifecycle Methods – Unmounting
46 Section Review
47 Yihua’s VSCode font and settings
48 Create React App
49 Create React App 2
50 React Project Setup
51 Don’t Eject

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Master Project Mobile Support
233 Mobile Responsiveness
234 Mobile Responsiveness 2
235 Exercise Mobile Friendly App

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

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

Bonus Progressive Web App
253 Note About This Section
254 PWA – Final Thoughts
255 Converting Our App To PWA
256 Progressive Web Apps
257 Resources Progressive Web Apps
258 Progressive Web Apps Examples
260 Resources PWA – HTTPS
261 PWA – App Manifest
262 PWA – Service Workers
263 Resources PWA – Service Workers

Bonus Testing
264 Note About This Section
265 Setting Up Jest
266 Our First Tests
267 Writing Tests
268 Asynchronous Tests
269 Asynchronous Tests 2
270 Resources Jest Cheat Sheet
271 Mocks and Spies
272 Note Testing React Apps
273 Introduction To Enzyme
274 Snapshot Testing
275 Section Overview
276 Snapshot Testing + Code Coverage
277 Testing Stateful Components
278 Quick Recap
279 Testing Connected Components
280 Testing Connected Components 2
281 Testing Reducers
282 Testing Actions
283 Section Review
284 Testing In Our Master Project
285 Types of Tests
286 Testing Libraries
287 Note The Next Videos
288 Unit Tests
289 Integration Tests
290 Automation Testing
291 Final Note On Testing

Bonus Webpack + Babel
292 Introduction to Webpack + Babel
293 Webpack Config

Bonus Build a GatsbyJS Blog
294 Quick Note About This Section
295 Building Our Blog 5
296 Introduction to Gatsby.js
297 Starting a Gatsby Project
298 Gatsby Pages
299 Gatsby GraphQL + Markdown
300 Building Our Blog 1
301 Building Our Blog 2
302 Building Our Blog 3
303 Building Our Blog 4

Appendix 1 Key Developer Concepts
304 map()
305 Memoization
306 Currying
307 Promises
308 filter()
309 includes()
310 CWD 2019 Git + Github
311 CWD 2019 Git + Github 2
312 Async Await
313 find()
314 reduce()

Bonus Coupon Codes + Freebies
315 Coupon Codes