Udemy

Platform

English

Language

Web Development

Category

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

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

4.64 (12118 reviews)

59722

Students

40.5 hours

Content

Jan 2021

Last Update
$94.99
Regular Price

What you will 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 JavaScript to write clean code


Topics

React


Description

Just updated with all new React features for 2021 (React v17)! Join a live online community of over 400,000+ developers and a course taught by industry experts that have actually worked both in Silicon Valley and Toronto with React.js.

Using the latest version of React (React 17), 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, Tesla, 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 2021. Along the way, we will build a massive e-commerce application similar to Shopify using React, Redux, React Hooks, React Suspense, 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. 


Taught By:

Andrei Neagoie is the instructor of the highest rated Development courses on Udemy as well as one of the fastest growing. His graduates have moved on to work for some of the biggest tech companies around the world like Apple, Google, Amazon, JP Morgan, IBM, UNIQLO etc... He has been working as a senior software developer in Silicon Valley and Toronto for many years, and is now taking all that he has learned, to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life. 

Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student's valuable time.   Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities. 

Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way. 

Taking his experience in educational psychology and coding, Andrei's courses will take you on an understanding of complex subjects that you never thought would be possible.  

See you inside the courses!

--------

Yihua Zhang is one of the Instructors of Zero To Mastery, one of the highest rated and fastest growing Web Development academies on Udemy
. He has been working as a software developer for numerous years in Toronto for some of the largest tech companies in the world. He has also been working as an instructor for more than a decade. He is focused on bringing everything he has learned to help you achieve a new career as a developer, but also give you all the fundamental skills required to flourish in this incredible industry.


Yihua is a self taught developer, so he fully understands the challenges and mindset of coming into this industry from various other backgrounds. He has been on both sides of the table, as both an instructor and student numerous times so he can empathize with the difficulty of learning something new and challenging. Learning itself is a skill that needs to be practiced and improved upon, and he is dedicated to helping you improve and master that skill for yourself. Courses need to be practical, you need to be able to understand why you are learning the things that you are being taught. You need to understand the problem before you know the solution, and he prides himself on teaching you how to build professional, real world applications so you truly understand why you are doing things a specific way. He will teach you the mindset and skillset required to grow as a developer as fast as possible, so you can have the rich and fulfilling life that comes with this career.


Yihua's courses will guide you to build beautifully written and richly featured applications, while truly understanding all the complex concepts you will encounter along the way.




Screenshots

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

Content

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

Environment Setup for Mac

Environment Setup For Windows

NPM vs YARN

Yihua's VSCode font and settings

Create React App

Create React App 2

React Project Setup

Don't Eject

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

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

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

React Lifecycle Methods - Updating

React Lifecycle Methods - Unmounting

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

Section Review

Master Project: Setting Up E-commerce Project

The Long Road Ahead

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

Homepage and Directory Components

Styling Menu Items

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

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

Master Project: Redux 1

Section Overview

Redux Introduction

Redux Concepts

Redux In Our Application

Redux Actions and Reducers

Setting Up Redux 1

Setting Up Redux 2

connect() and mapStateToProps

mapDispatchToProps

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()

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

Remove Items At Checkout

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

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

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

Master Project: React Hooks

React Hooks Introduction (useState)

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

Custom Hooks 2

useReducer

useContext + useMemo + useCallback

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

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

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?

Master Project: Mobile Support

Mobile Responsiveness

Mobile Responsiveness 2

Exercise: Mobile Friendly App

Master Project: React Performance

Code Splitting Introduction

Introducing React Lazy

React Lazy + Suspense

Error Boundaries

React.memo, PureComponent, shouldComponentUpdate

Performance In Our App

useCallback

useMemo

Gzipping and Compression

React <Profiler>

React Performance Cheat Sheet

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

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

Resources: PWA - Service Workers

PWA - Final Thoughts

Converting Our App To PWA

Addendum to Server.js

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

Section Overview

Types of Tests

Testing Libraries

Note: The Next Videos

Unit Tests

Integration Tests

Automation Testing

Final Note On Testing

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

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

Bonus: Webpack + Babel

Introduction to Webpack + Babel

Webpack Config

Bonus: Build a GatsbyJS Blog

Quick Note About This Section

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

Building Our Blog 5

Appendix 1: Key Developer Concepts

map()

Promises

filter()

includes()

CWD: Git + Github

CWD: Git + Github 2

Async Await

find()

reduce()

Memoization

Currying

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



Reviews

Q
Quang8 October 2020

The voice of instructor is clear. I'm interesting in what I'm going to get when finishing this course!

S
Soraiavmv7 October 2020

Good intro! I really like it when instructors take the time to give us some historical background, and explain why is the concept we're learning about so important.

R
Rodrigo6 October 2020

The course is outdated and way too complex for beginners. The majority of the course is written in React using old and deprecated tools. They've added content over time that seemed out of context and patched to an old course instead of re-recording the entire course. I wouldn't mind paying more money for a properly updated course. They've introduced React Hooks later in the course briefly but didn't give too much importance. I don't recommend this course in 2020.

S
Stiofán3 October 2020

Started well, looked like a great course, but halt way through, issues occur where the instructor changes things but forgets to update the students on the changes., In the Q&A, where these issues are raised, the "teaching, assistant" merely repeatedly answers students questions by telling students to "clone the instructors code" and offers no further insight on the issue, which I find very poor, and hints that 1, the instructor has given up on the course, and 2, the assistant knows very little on the subject. Cannot rate this course any more because of this.

D
Dmitrii1 October 2020

It was interesting to take this course. I have years of experience and wanted to see if i missed something during my career and i found some information that was new for me) Thanks)

廖若雅26 February 2020

This course is completely awesome!! It really makes me realize react in a simple and practical way. :)

R
Renato25 February 2020

Yes, right now it's only "history"per say and most of it I already knew, but I like the way you guys explain it, and it really does matter

D
Dominique24 February 2020

Andrei, Yihua, I learned sooo much throughout this course : the most valuable skills are delivered through theory and practice. Your work is excellent! I'll play back your videos on demand when training on personal projects to really master React, Redux, etc. Thank you so much for your help. I am closer than ever to succeed in my career change and to become a React developer soon.

L
Lucas23 February 2020

I am now around 25% into the course and I really like it! The first part is a more theoretical overview of react but the little project already is fun to build. After that the Master Project starts and you get to know more and more details about react. The pace is relatively fast which I like because it allows you to learn fast if you have some background knowledge already! I take this course to be able to build a nice frontend for a long term side project of mine and I hope and think with the end of this course I won't have any problems doing so.

W
Wong22 February 2020

It's really an excellent course. It explains all the concept very clearly and the course is easy to follow step by step. Thank you for producing such a wonderful course.

K
Kazumasa22 February 2020

Thanks for the grateful cource.The reply to the question was quick and helpful.The description felt very kind.I don't think you will regret taking this course.

M
Matthew20 February 2020

One of the best online courses I have ever taken. Very detailed and informative. Both Andrei and Yihua are outstanding instructors.

J
Junrui20 February 2020

The course content is comprehensive and up to date. Both Andrei and Yihua make things very easy to understand. The pace is reasonable, though a bit slow to me personally. Overall, it's way beyond my expectation and definitely worth it.

C
Cory20 February 2020

I skipped the first three sections of this course because I already have a firm grasp on the basics of React and have built a few personal projects. So far the master project portion of the course has been very well thought out and easy to follow. The teaching style and explanations are great and easy to understand. The quality of instruction is second to none. I have picked up tips and tricks a long the way and feel like I've already improved my react skills despite not being a beginner. Andrei's courses are always full of gold and anyone on the fence needs to give his stuff a chance. YOU WILL NOT REGRET IT :)

S
Sergiu-Alexandru19 February 2020

At 50% of the course: The topics are very well organised and the course talks about very complex things but I feel like in a lot of parts the instructor goes to fast and doesn't explain enough and I find myself reaching for other resources a lot. I know the course would be 60 hours long with additional information but for people new to react it would be best. Conclusion: This is a must have course but don't expect to use only this course. You will feel confused a lot. For more info on good resources you can message me directly.


Coupons

StatusDateDiscount
Expired6/2/202095% OFF
Expired6/12/202095% OFF
Expired9/15/202095% OFF
Expired10/23/202093% OFF
Expired11/2/202095% OFF


2365628

Udemy ID

5/13/2019

Course created date

7/1/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram
Android PlayStore
Apple Appstore