Complete React Developer Zero To Mastery

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

Last updated 2022-01-10 | 4.6

- 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

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/ES10/ES11 JavaScript to write clean code

* Requirements

* Basic HTML
* CSS and JavaScript knowledge
* You do not need any experience with React or any other JS framework!

Description

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/ES10/ES11 JavaScript to write clean code

Course content

36 sections • 385 lectures

Introduction 4 lectures

Course Outline Preview 04:57

Join Our Online Classroom! Preview 01:15

Exercise: Meet The Community Preview 01:25

Monthly Coding Challenges, Free Resources and Guides Preview 00:40

React Key Concepts 9 lectures

React Concepts Preview 02:06

The Birth of React.js Preview 09:24

Declarative vs Imperative Preview 06:18

Imperative programming is a way to write code in a manner that has clear instructions and order using control flow: Do this, then do that, then do this. With Imperative programming you tell the machine exactly the steps to take to accomplish a task. Declarative programming on the other hand, is a way to write code by describing what you want done, without writing each step and control flow. Example: jQuery is very imperative, while React.js is very declarative.

Component Architecture Preview 05:23

One Way Data Flow Preview 06:10

UI Library Preview 04:52

How To Be A Great React Developer Preview 04:18

React Latest Version! Preview 00:18

Web Developer Monthly Preview 00:21

React Basics 48 lectures

Section Overview Preview 06:13

Environment Setup for Mac Preview 08:08

Environment Setup For Windows Preview 09:53

NPM vs YARN Preview 00:29

Yihua's VSCode font and settings Preview 00:44

VSCode settings update Preview 00:14

Create React App - NPX Preview 11:00

Create React App - React-Scripts 1 Preview 11:42

Create React App - React-Scripts 2 Preview 11:44

Create React App - Everything Else Preview 06:03

Don't Eject Preview 01:57

Hooks vs Classes Preview 02:13

Class Components Preview 05:26

Thinking In JSX Preview 05:44

Dynamic Content Preview 05:40

Optional: map() + key attribute Preview 00:32

Single Page Application Preview 05:37

Fetching Content Preview 05:47

Optional: Promises Preview 00:16

Architecting Our App Preview 06:20

Card List Component Preview 08:06

Quick note on quotes for string interpolation Preview 00:12

Card Component Preview 07:13

Exercise: Breaking Into Components Preview 04:02

State vs Props Preview 07:21

SearchField State Preview 09:42

React Events Preview 05:00

Filtering State Preview 05:54

Optional: filter(), includes() Preview 00:17

Search Box Component Preview 07:44

Exercise: Where To Put State? Preview 03:57

Class Methods and Arrow Functions Preview 10:02

Exercise: Event Binding Preview 05:31

Quick Note: Binding in React Preview 00:12

Optional: Git + Github Preview 00:52

Optional: Connecting With SSH To Github Preview 00:47

Deploying Our App Preview 07:21

NOTE: CORS error Preview 00:23

React and ReactDOM Preview 11:09

Latest React Package Updates Preview 10:23

Revisiting VirtualDOM + Unidirectional Data Flow Preview 14:20

Asynchronous setState Preview 14:47

Introducing Lifecycle Methods Preview 07:15

React Lifecycle Methods - Mounting Preview 06:03

React Lifecycle Methods - Updating Preview 12:58

React Lifecycle Methods - Unmounting Preview 03:13

When should we use a functional component vs a class component?

Let's take a quick quiz to see which of React's two component types is best used when we don't need local state.

Section Review Preview 03:02

Master Project: Setting Up E-commerce Project 16 lectures

Endorsements On LinkedIN Preview 00:39

The Long Road Ahead Preview 02:52

Project Overview Preview 01:47

Github + Project Repositories Preview 04:47

Course Guideline + Github Links Preview 00:10

Quick Note About Github Preview 00:38

Update for CRA v4.0.0+ and React 17+ Preview 00:48

E-commerce Homepage + SASS setup Preview 13:19

Project Files + Modules Preview 07:11

Project Component Architecture Preview 04:07

CSS and SCSS files Preview 00:12

Homepage and Directory Components Preview 14:49

Styling Menu Items Preview 08:28

Updated Google Fonts UI Preview 00:20

Quick Note: React 17 Preview 00:25

React 17: Updating Packages + Latest Version Of React Preview 07:59

Master Project: React Router and Routing 5 lectures

Note about react-router version Preview 00:22

Routing In React Preview 04:31

Routing In Our Project Preview 09:09

React Router Dom Preview 15:22

withRouter() Preview 09:26

Master Project: Forms + Components 9 lectures

Shopping Data Preview 01:59

Shop Page Preview 12:38

Collection Item Preview 09:32

Header Component Preview 09:27

Resources: Importing SVG In React Preview 00:17

Introducing Forms In React Preview 07:22

Sign In Component Preview 09:23

Form Input Component Preview 08:41

Custom Button Component Preview 06:07

Master Project: Firebase + User Authentication 23 lectures

Section Overview Preview 03:15

Firebase Introduction Preview 07:27

IMPORTANT NOTE: firebase version in the course! Preview 01:00

Adding a Project to Firebase Preview 04:07

Note about Github Preview 00:37

Firebase Compatibility Imports Preview 00:24

Google Sign In Authentication Preview 07:41

Cloning From This Point On Preview 00:15

Google Sign In Authentication 2 Preview 09:43

Optional: How to fix 403: restricted_client error Preview 00:26

Google Sign In Authentication 3 Preview 09:42

NOTE: Use Cloud Firestore NOT Realtime Database Preview 00:08

Firebase Firestore Preview 11:06

Optional: Async Await Preview 00:20

Storing User Data In Firebase Preview 17:09

Note: Firestore update regarding permissions Preview 00:40

Storing User Data In Our App Preview 09:19

Sign Up Component Preview 10:13

Sign Up With Email and Password Preview 04:56

Sign In With Email and Password Preview 03:19

Note on our Custom Button Preview 00:27

Firebase unsubscribe method

Let's take a quiz to remember the fundamental pattern we must follow if we use the onAuthStateChanged() or onSnapshot() methods!

Section Review Preview 02:14

Master Project: Redux 1 31 lectures

Section Overview Preview 02:09

Redux Introduction Preview 04:40

Redux Concepts Preview 09:41

Redux In Our Application Preview 10:23

Redux Actions and Reducers Preview 08:19

Setting Up Redux 1 Preview 14:58

Setting Up Redux 2 Preview 10:26

connect() and mapStateToProps Preview 04:12

mapDispatchToProps Preview 09:09

User Redirect and User Action Type Preview 05:18

Cart Component Preview 05:08

Cart Dropdown Component Preview 04:24

Implementing Redux In Cart Preview 10:03

Add To Cart Styling Preview 06:14

Cart Item Reducer Preview 14:14

Adding Multiple Items To Cart Preview 08:02

Optional: find() Preview 00:17

Cart Item Component Preview 07:15

Optional: reduce() Preview 00:18

Selectors in Redux Preview 08:31

Optional: Memoization Preview 00:22

Reselect Library Preview 08:22

Quick correction on CartIcon re-rendering Preview 00:53

User Selectors Preview 07:41

Checkout Page Preview 08:35

Checkout Page 2 Preview 07:02

Extensible Code Preview 02:53

Dispatch Action Shorthand Preview 03:41

Checkout Item Component Preview 08:18

Remove Items From Cart Preview 08:42

Remove Items At Checkout Preview 12:35

Master Project: Session Storage + Persistence 2 lectures

Local Storage and Session Storage Preview 08:02

Redux Persist Preview 11:01

Master Project: Redux 2 3 lectures

Directory State Into Redux Preview 12:09

Collection State Into Redux Preview 07:47

Why do we need Redux? React.js is a view library which means that as our applications get larger and larger, we will have more and more data or state that needs to be displayed and updated on a website. Redux helps us manage this larger and larger state by moving all of this data into a single store or JavaScript object so programmers can better manage large applications.