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

Introduction
Course Outline
Join Our Online Classroom!
Exercise Meet The Community

React Key Concepts
React Concepts
The Birth of React.js
Declarative vs Imperative
Component Architecture
One Way Data Flow
UI Library
How To Be A Great React Developer
Web Developer Monthly

React Basics
Section Overview
Class Components
Thinking In JSX
Dynamic Content
Optional map() + key attribute
Single Page Application
Fetching Content
Optional Promises
Architecting Our App
Card List Component
Card Component
Environment Setup for Mac
Exercise Breaking Into Components
State vs Props
SearchField State
React Events
Filtering State
Optional filter(), includes()
Search Box Component
Exercise Where To Put State
Class Methods and Arrow Functions
Exercise Event Binding
Environment Setup For Windows
Quick Note Binding in React
Optional Git + Github
Optional Connecting With SSH To Github
Deploying Our App
React and ReactDOM
Latest React Package Updates
Revisiting VirtualDOM + Unidirectional Data Flow
Asynchronous setState
Introducing Lifecycle Methods
React Lifecycle Methods – Mounting
NPM vs YARN
React Lifecycle Methods – Updating
React Lifecycle Methods – Unmounting
When should we use a functional component vs a class component
Section Review
Yihua’s VSCode font and settings
Create React App
Create React App 2
React Project Setup
Don’t Eject

Master Project Setting Up E-commerce Project
The Long Road Ahead
Homepage and Directory Components
Styling Menu Items
Project Overview
Github + Project Repositories
Course Guideline + Github Links
Quick Note About Github
E-commerce Homepage + SASS setup
Project Files + Modules
Project Component Architecture
CSS and SCSS files

Master Project React Router and Routing
Routing In React
Routing In Our Project
React Router Dom
withRouter()

Master Project Forms + Components
Shopping Data
Shop Page
Collection Item
Header Component
Resources Importing SVG In React
Introducing Forms In React
Sign In Component
Form Input Component
Custom Button Component

Master Project Firebase + User Authentication
Section Overview
Firebase Firestore
Optional Async Await
Storing User Data In Firebase
Note Firestore update regarding permissions
Storing User Data In Our App
Sign Up Component
Sign Up With Email and Password
Sign In With Email and Password
Firebase unsubscribe method
Section Review
Firebase Introduction
Adding a Project to Firebase
Note about Github
Google Sign In Authentication
Cloning From This Point On
Google Sign In Authentication 2
Optional How to fix 403 restricted client error
Google Sign In Authentication 3

Master Project Redux 1
Section Overview
User Redirect and User Action Type
Cart Component
Card Dropdown Component
Implementing Redux In Cart
Add To Cart Styling
Cart Item Reducer
Adding Multiple Items To Cart
Optional find()
Cart Item Component
Optional reduce()
Redux Introduction
Selectors in Redux
Optional Memoization
Reselect Library
User Selectors
Checkout Page
Checkout Page 2
Extensible Code
Dispatch Action Shorthand
Checkout Item Component
Remove Items From Cart
Redux Concepts
Remove Items At Checkout
Redux In Our Application
Redux Actions and Reducers
Setting Up Redux 1
Setting Up Redux 2
connect() and mapStateToProps
mapDispatchToProps

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

Master Project Redux 2
Directory State Into Redux
Collection State Into Redux
Collection Overview Component

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

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

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

Master Project Deploying To Production
Deploying To Heroku
Resources Buildpack
Linking Github to Heroku
Optional Git + Heroku commands
Optimizing Production Build

Master Project CSS in JS – styled-components
CSS in JS
styled-components
styled-components In Our App
Thinking About Tradeoffs
styled-components In Our App 2
styled-components In Our App 3
Exercise styled-components

Master Project Advanced Redux + Firebase
Section Overview
Quick Note Firebase
Firebase Refresher
Firebase Refresher 2
Moving Our Shop Data To Firebase
Moving Our Shop Data To Firebase 2
Reviewing What We Have Done
Bringing Shop Data To Our App
Adding Shop Data To Redux

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

Master Project Asynchronous Redux
Observables + Observer Pattern
Promise Pattern
Redux Thunk
What Does Redux Thunk Do
Debugging Our Code

Master Project Container Pattern
Container Pattern
Refactoring Is A Tradeoff

Master Project Redux-Saga
Introduction to Sagas
Google Sign In Into Sagas
Email Sign In Into Sagas
Reviewing Our Sagas
Recreating Persistence
Sign Out With Sagas
Clear Cart Saga
Solution Sign Up Saga
Correction about Saga flow
Generator Functions
Quick Note About Sagas
redux-saga
Redux Thunk Into Saga
take(), takeEvery(), takeLatest()
Root Saga
Planning Ahead With Sagas

Master Project React Hooks
React Hooks Introduction (useState)
Custom Hooks 2
useReducer
useContext + useMemo + useCallback
Should You Adopt Hooks
Why Did React Add Hooks
useEffect
Hook Rules
Converting Class Components With useState
useEffect In Our App
useEffect as ComponentWillUnmount()
useEffect Cheat Sheet
Custom Hooks

Master Project Stripe Payments Part 2 – Backend
About This Section
Introduction To Backend
Cloning From This Point On
Creating our Server Inside the Project
Building A Basic Server
What We Are Building
Backend Payment Route
Connecting Client To Server
Deploying To Production

Master Project Context API
Quick note about cloning this repo
Introduction To Context API
Context Consumer + useContext Hook
Context Provider
Cart Context
Provider Context Pattern
Provider Context Pattern 2
Redux vs Context API

Master Project GraphQL + Apollo
Introduction To GraphQL
GraphQL vs Redux
Mutations On The Client
Resources Mutations
Mutations On The Client 2
Adding Items With Apollo
Adding Items With Apollo 2
Note Compose in next lesson
CartItem Count With Apollo
Exercises Adding More GraphQL
Should You Use GraphQL
Course Guideline + Github Links
GraphQL Playground
Backend Code
GraphQL Playground 2
Introduction To Apollo
Apollo Container
Note Destructuring change in next lesson
Query With Variables

Master Project Mobile Support
Mobile Responsiveness
Mobile Responsiveness 2
Exercise Mobile Friendly App

Master Project React Performance
Code Splitting Introduction
React Profiler
React Performance Cheat Sheet
Introducing React Lazy
React Lazy + Suspense
Error Boundaries
React.memo, PureComponent, shouldComponentUpdate
Performance In Our App
useCallback
useMemo
Gzipping and Compression

React Interview Questions + Advice
Don’t Overcomplicate
Be A Late Follower
Break Things Down
It Will Never Be Perfect
Learning Guideline
Endorsements On LinkedIn
Become An Alumni
Common React Interview Questions

Bonus Progressive Web App
Note About This Section
Resources PWA – Service Workers
PWA – Final Thoughts
Converting Our App To PWA
Addendum to Server.js
Progressive Web Apps
Resources Progressive Web Apps
Progressive Web Apps Examples
PWA – HTTPS
Note on server.js code
Resources PWA – HTTPS
PWA – App Manifest
PWA – Service Workers

Bonus Firebase Security
Firebase Security Rules
User Security Rule
User Security Rule 2
More Security Rules
Coding Challenge Firebase Cart

Bonus Testing
Note About This Section
Setting Up Jest
Our First Tests
Writing Tests
Asynchronous Tests
Asynchronous Tests 2
Resources Jest Cheat Sheet
Mocks and Spies
Note Testing React Apps
Introduction To Enzyme
Snapshot Testing
Section Overview
Snapshot Testing + Code Coverage
Testing Stateful Components
Quick Recap
Testing Connected Components
Testing Connected Components 2
Testing Reducers
Testing Actions
Section Review
Testing In Our Master Project
Types of Tests
Testing Libraries
Note The Next Videos
Unit Tests
Integration Tests
Automation Testing
Final Note On Testing

Bonus Webpack + Babel
Introduction to Webpack + Babel
Webpack Config

Bonus Build a GatsbyJS Blog
Quick Note About This Section
Building Our Blog 5
Introduction to Gatsby.js
Starting a Gatsby Project
Gatsby Pages
Gatsby GraphQL + Markdown
Building Our Blog 1
Building Our Blog 2
Building Our Blog 3
Building Our Blog 4

Appendix 1 Key Developer Concepts
map()
Memoization
Currying
Promises
filter()
includes()
CWD Git + Github
CWD Git + Github 2
Async Await
find()
reduce()

Open Source Projects
Contributing To Open Source
Contributing To Open Source 2
Exercise Contribute To Open Source

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

Extras
Bonus Special Thank You Gift!