Mô tả

Just FULLY updated and re-recorded with all new React features for 2023 (React v18)! Join a live online community of over 900,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 18), 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, Meta, + 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 2023. 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 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.



Bạn sẽ học được gì

Build enterprise level React applications and deploy to production (using React 18!)

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

Yêu cầu

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

Nội dung khoá học

36 sections

Introduction

5 lectures
Course Outline
04:57
Join Our Online Classroom!
04:01
Exercise: Meet Your Classmates & Instructor
01:40
ZTM Resources
04:23
Monthly Coding Challenges, Free Resources and Guides
00:40

React Key Concepts

8 lectures
React Concepts
02:06
The Birth of React.js
09:24
Declarative vs Imperative
06:18
Component Architecture
05:23
One Way Data Flow
06:10
UI Library
04:52
How To Be A Great React Developer
04:18
Web Developer Monthly
00:21

React Basics

58 lectures
Section Overview
06:13
Course Guideline + Code
00:16
Environment Setup for Mac
08:08
Environment Setup For Windows
09:53
NPM vs YARN
00:29
Yihua's VSCode font and settings
00:41
VSCode settings update
00:14
Create React App - NPX
11:00
Create React App - React-Scripts 1
11:42
Create React App - React-Scripts 2
11:44
Create React App - Everything Else
06:03
Don't Eject
01:57
Hooks vs Classes
02:13
Quick note: React 18 Strict Mode
00:28
Monsters Rolodex - Class Components
09:00
Monsters Rolodex - Component State
07:37
Monsters Rolodex - setState
09:27
Monsters Rolodex - States and Shallow Merge
05:57
Monsters Rolodex - setState and Secondary Callback
09:01
Monsters Rolodex - Mapping Arrays to Elements
09:26
Optional: map() + key attribute
00:32
Monsters Rolodex - Keys for Mapping
05:08
Monsters Rolodex - Single Page Applications (SPAs)
07:18
Monsters Rolodex - Lifecycle Method: componentDidMount
10:14
Optional: Promises
00:16
Monsters Rolodex - Renders & Re-renders in React
05:43
Monsters Rolodex - Input Search Box Component
11:19
Monsters Rolodex - Searching & Filtering
07:51
Optional: filter(), includes()
00:17
Monsters Rolodex - Storing Original Data
09:32
Monsters Rolodex - Optimizations
07:30
Monsters Rolodex - Understanding Components
07:56
Monsters Rolodex - CardList Component
07:09
Monsters Rolodex - Component Props
07:26
Monsters Rolodex - Rendering and Re-rendering part 2
07:05
Monsters Rolodex - SearchBox Component
08:49
Monsters Rolodex - CSS in React
09:29
Monsters Rolodex - CardList Component
07:01
Quick note on quotes for string interpolation
00:12
Monsters Rolodex - Finishing Touches
07:41
Functional vs Class Components
04:22
Class Component Lifecycle Methods Breakdown
05:21
Monsters Rolodex - Functional Component Intro
05:51
Pure & Impure Functions
06:22
Monsters Rolodex - Hooks: useState
07:10
Monsters Rolodex - Functional Component Re-rendering
06:47
Monsters Rolodex - Infinite Re-rendering
07:32
Monsters Rolodex - Hooks: useEffect
11:16
Monsters Rolodex - Remaining Components
05:50
React v18: Migrating from React v17 + ReactDOM v18 Changes
05:38
React v18: Strict Mode Changes
04:43
DOM and Virtual DOM
10:10
React and ReactDOM
11:07
React and ReactDOM part 2
06:25
ReactDOM v18 Changes
02:28
DOM Paint Flashing
06:09
Optional: Git + Github
00:52
Optional: Connecting With SSH To Github
00:44

Capstone Project: Intro + Setup

10 lectures
Endorsements On LinkedIN
00:40
Github Strategy
07:21
The Long Road Ahead
02:52
Project Overview
01:47
Scaffolding Our Capstone Project
07:15
Setting Up Our Categories
06:01
Adding Sass
06:56
Category Item Component
06:58
Directory Component
07:16
Adding Fonts
09:21

Routing + React-Router

7 lectures
Routing
06:18
Updating/Upgrading Libraries
08:22
Setting Up Our Homepage
11:16
React Router Outlet
07:01
Navigation Bar Component
05:04
React Router Link
07:44
Styling for Navigation + Logo
06:59

Authentication + Firebase

16 lectures
Setting Up Firebase
08:21
Authentication Flow
13:01
Optional: Async Await
00:20
Optional: How to fix 403: restricted_client error
00:27
Authenticating With Firebase
14:34
Introducing Firestore Data Models
06:49
Setting Up User Documents
14:03
Finish Creating User Documents
06:49
Sign In With Redirect
11:39
Sign Up Form Pt.1
15:10
Sign Up Form Pt.2
10:20
Sign Up With Email + Password
12:33
Generalizing Form Input Component
13:43
Custom Button Component
10:59
Sign In Form
10:47
Finishing Authentication Page
08:05

React Context For State Management

5 lectures
Need For Context
08:26
User Context
12:19
Re-rendering From Context
06:15
Signing Out
08:44
Exercise: Imposter Syndrome
02:55

Observer Pattern

3 lectures
Observer: onAuthStateChange
11:00
Finalizing Auth Listener
08:21
Observer Pattern
10:25

React Context Continued

14 lectures
New Shop Page
06:01
Products Context
06:46
Product Card Component
08:16
Cart Icon & Dropdown
09:27
Toggle Cart Open
07:56
Add To Cart Pt.1
08:46
Add To Cart Pt.2
10:40
Optional: reduce()
00:17
Cart Item Designs
08:08
Creating Checkout Page
08:18
Checkout Item Pt. 1
07:24
Checkout Item Pt.2
09:01
Checkout Item Pt.3
08:42
Cart Total
03:52

Firebase Database Storage

9 lectures
Firestore DB No-SQL
07:01
addCollectionAndDocuments Pt.1
09:28
addCollectionAndDocuments Pt.2
07:04
Get Products + Categories From Firestore
09:24
Optional: Hash Tables vs Arrays
00:13
Using Our CategoriesMap
09:09
Category Preview Component
07:39
Nested Routes in Shop
06:24
Category Page
08:51

CSS-In-JS + Styled-Components

7 lectures
Fixing Clashing Styles
09:09
Introducing Styled-Components
11:33
Styled-Components - Button
09:09
Styled-Component - Cart Dropdown
09:36
Styled-Component - Directory Item & Cart Icon
10:52
Styled-Component - Form Input Component
08:54
Last Touches
03:56

Deploying With Netlify

2 lectures
Deploying On Netlify
08:57
Adding Redirects For Netlify
09:34

Reducers

5 lectures
Reducers explained
11:25
User Reducer
17:14
Cart Reducer Pt. 1
09:56
Cart Reducer Pt. 2
07:21
Cart Reducer Pt. 3
09:15

Redux

19 lectures
Redux Toolkit Aside
04:13
Redux vs Context: Access
08:49
Redux vs Context: Data Flow
04:52
React-Redux: Installation
10:39
React-Redux: Setting Up Our Store
07:13
React-Redux: Creating User Reducer
10:33
React-Redux: Selectors
06:07
Categories Reducer
07:45
Categories Selectors
08:01
Business Logic in Our Selectors
08:41
What Triggers useSelector
08:04
Demystifying Middleware
13:21
Redux Triggers Extra Re-renders
05:22
Optional: Memoization
00:17
Reselect Library
13:41
Migrating Cart Context to Redux Pt. 1
08:42
Migrating Cart Context to Redux Pt. 2
05:53
Migrating Cart Context to Redux Pt. 3
08:37
Migrate Cart Context to Redux Pt. 4
06:38

Redux Extended Tools

2 lectures
Redux-Persist
07:05
Redux-Devtools
09:31

Asynchronous Redux: Redux-Thunk

3 lectures
Asynchronous Redux: Redux-Thunk
08:10
Redux-Thunk Pt. 2
07:46
Redux-Thunk Pt. 3
08:32

Asynchronous Redux: Redux-Saga

9 lectures
Asynchronous Redux: Redux-Saga
07:59
Generator Functions
08:38
Redux-Saga: fetchCategoriesAsync Thunk to Saga
10:34
Redux-Saga: Converting onAuthStateChanged Listener to Promise
07:13
Redux-Saga: Check User Session Saga Pt. 1
11:03
Redux-Saga: Check User Session Saga Pt. 2
07:54
Redux-Saga: Sign in Sagas
09:04
Redux-Saga: Sign up Sagas
10:25
Redux-Saga: Sign Out Sagas
08:30

Redux Toolkit

7 lectures
Redux Toolkit Intro
08:33
Using createSlice
11:40
Using Redux Toolkit Action Creators
07:23
Non Serializable Value Middleware
10:34
Immutable Middleware
04:03
Categories to createSlice
04:37
Cart to createSlice
09:31

Serverless Functions + Stripe

9 lectures
The Need for Serverless Functions
08:53
Serverless Functions Explained
06:57
Setting up Stripe
08:39
Setting Up Our PaymentForm
08:19
Writing Our First Serverless Function
09:30
Finishing Stripe Payment
12:34
Tidying Up Our UI
12:56
Adding Auth With Netlify URL
01:23
Adding Environment Variables For Netlify
05:19

Typescript Basics: Typing Monsters-Rolodex

7 lectures
Typescript Introduction
07:51
Starting our Typing
08:14
Typescript Interfaces
09:51
Typescript Types & Third Party Library Types
11:49
ChangeEvent Type From React
03:29
Understanding Generics
11:20
Typing React's setState
09:19

Typescript Advanced: Typing Redux + Crwn-Clothing

11 lectures
Crwn-Clothing Typescript Overview
07:54
Typing createAction & Function Overloading
13:03
Typing Category Action Creators
08:35
Typing Category Selectors
08:46
The Problem With Discriminating Unions
07:45
Type Predicate Functions
05:53
Intersections & Return Types
08:35
withMatcher Type
07:20
Improving Our Reducer Typing
09:15
Typing Redux Cart Files Pt. 1
09:20
Typing Redux Cart Files Pt. 2
07:26

Typescript Advanced: Typing Firebase + User Redux Files

3 lectures
Typing Firebase Utils
13:20
Typing User Actions
08:47
Typing User Reducer & Selectors
06:33

Typescript Advanced: Redux Store + Middleware

3 lectures
Typing Rootstate
09:39
Typing Third Party Libraries
02:23
Typing Our Custom Middleware
01:43

Typescript Advanced: Redux-Saga

3 lectures
Typing Categories Saga
08:08
Typing User Sagas Pt. 1
08:53
Typing User Sagas Pt. 2
05:28

Typescript Advanced: Typing Our Crwn-Clothing Components

4 lectures
Typing Button Component
07:58
Typing Input & Form Components
09:30
Typing SVG Imports
07:16
Typing Our Payment Form
08:19

GraphQL + Apollo Client

8 lectures
GraphQL Explained
05:33
Starting Repo + GraphQL Playground
07:39
Graphql Queries
10:09
Categories Query
08:36
Updating Components To Consume GraphQL Values
06:29
Variables in useQuery & Caching
11:51
Mutations
05:46
Apollo vs Redux
05:17

Performance Optimizations

6 lectures
Do Not Optimize For Performance Until You Need It
03:22
Hooks: useCallback Pt.1
06:16
Hooks: useCallback Pt. 2
03:59
Hooks: useMemo
06:44
React Devtools Profiling & React Memo
07:50
Code Splitting, Dynamic Imports, Suspense & Lazy
10:40

Firebase Rule Security

1 lectures
Firebase Firestore Security Rules
06:35

React Interview Questions + Advice

10 lectures
Don't Overcomplicate
02:05
Be A Late Follower
02:56
Break Things Down
01:38
It Will Never Be Perfect
01:53
Learning Guideline
00:10
Endorsements On LinkedIn
00:40
Become An Alumni
00:37
Common React Interview Questions
00:01
Course Review
1 question
The Final Challenge
1 question

Progressive Web App

15 lectures
Note About This Section
00:16
Progressive Web Apps
12:54
Opt-In Service Worker in CRA
00:54
Resources: Progressive Web Apps
00:16
Progressive Web Apps Examples
06:15
PWA - HTTPS
06:11
Resources: PWA - HTTPS
00:20
PWA - App Manifest
06:12
PWA - Service Workers
13:15
Resources: PWA - Service Workers
00:16
Update for CRA v4.0.0+ and React 17+
00:50
PWA - Final Thoughts
02:03
PWA - Our Application
10:41
Global Styles and Media Queries
08:36
Remaining Mobile Styles
10:04

Testing in React

46 lectures
Note About This Section
00:31
Section Overview
06:21
Updated Code For This Section
00:06
Types of Tests
02:58
Testing Libraries
15:28
Note: The Next Videos
00:27
Unit Tests
02:42
Integration Tests
02:46
Automation Testing
04:27
Final Note On Testing
02:56
Setting Up Jest
11:29
Our First Tests
11:10
Writing Tests
05:31
Quick Note: Upcoming API Endpoint + ES6 Modules
00:42
Asynchronous Tests
10:18
Asynchronous Tests 2
11:41
Resources: Jest Cheat Sheet
00:12
Mocks and Spies
12:50
Exercise: #1 - Testing With Jest
00:16
Enzyme vs React Testing Library
01:02
Introduction To Enzyme
14:29
Resources: Enzyme
00:12
Quick Note: Empty Snapshots
00:18
Snapshot Testing
09:29
Snapshot Testing + Code Coverage
04:54
Testing Stateful Components
11:16
Quick Recap
02:35
Testing Connected Components
23:50
Testing Connected Components 2
03:35
Testing Reducers
14:57
Testing Actions
18:27
Section Review
04:11
Aside - React Testing Library
04:03
Basics of RTL - Render and Screen
08:56
Button Tests - Part 1
09:31
Button Tests - Part 2
05:21
Render with Providers and Cart Icon Tests
14:21
Navigation Tests - Part 1
10:48
Navigation Tests - Part 2
05:56
Product Card and Testing Redux Actions
07:17
Navigation Tests - Part 3
08:41
Category Tests and React-Router-Dom Mocks
11:47
Category Reducer Test
07:57
Category Selector Test
06:09
Category Sagas Tests - Part 1
09:21
Category Sagas Tests - Part 2
13:57

Webpack + Babel

2 lectures
Introduction to Webpack + Babel
12:10
Webpack Config
10:40

Build a GatsbyJS Blog

10 lectures
Quick Note About This Section
00:47
Introduction to Gatsby.js
07:55
Starting a Gatsby Project
09:03
Gatsby Pages
09:29
Gatsby GraphQL + Markdown
08:39
Building Our Blog 1
10:53
Building Our Blog 2
09:12
Building Our Blog 3
06:54
Building Our Blog 4
07:26
Building Our Blog 5
09:32

Appendix 1: Key Developer Concepts

14 lectures
map()
05:48
Promises
14:57
filter()
02:55
includes()
12:50
CWD: Git + Github
17:40
Github Update: Master --> Main
00:29
CWD: Git + Github 2
16:52
Async Await
09:35
find()
03:06
reduce()
06:51
Memoization
07:47
Currying
04:24
ES6 Classes
08:44
Inheritance
14:41

Open Source Projects

3 lectures
Contributing To Open Source
14:08
Contributing To Open Source 2
09:40
Exercise: Contribute To Open Source
00:47

AMA + Bonus

4 lectures
Thank You!
01:17
AMA - 100,000 Students!!
38:30
Coding Challenges
00:29
Special Bonus Lecture
00:16

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.