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

Udemy

Master React skills and knowledge to become an expert in designing large-scale e-commerce applications utilizing Redux, Hooks, GraphQL, and Firebase.

Online

₹ 4099

particular

details

                                    Medium of instructions
                                    English

                                    Mode of learning
                                    Self study

                                    Mode of Delivery
                                    Video and Text Based

Introduction

Course Outline
Join Our Online Classroom!
Exercise: Meet The Community
Monthly Coding Challenges, Free Resources and Guides

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
React Latest Version!
Web Developer Monthly

React Basics

Section Overview
Environment Setup for Mac
Environment Setup For Windows
NPM vs YARN
Yihua's VSCode font and settings
VSCode settings update
Create React App - NPX
Create React App - React-Scripts 1
Create React App - React-Scripts 2
Create React App - Everything Else
Don't Eject
Hooks vs Classes
Class Components
Thinking In JSX
Dynamic Content
Optional: map() + key attribute
Single Page Application
Fetching Content
Optional: Promises
Architecting Our App
Card List Component
Quick note on quotes for string interpolation
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

Master Project: Setting Up E-commerce Project

Endorsements On LinkedIN
The Long Road Ahead
Project Overview
Github + Project Repositories
Course Guideline + Github Links
Quick Note About Github
Update for CRA v4.0.0+ and React 17+
E-commerce Homepage + SASS setup
Project Files + Modules
Project Component Architecture
CSS and SCSS files
Homepage and Directory Components
Styling Menu Items
Updated Google Fonts UI
Quick Note: React 17
React 17: Updating Packages + Latest Version Of React

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
Important Note: firebase version in the course!
Adding a Project to Firebase
Note about Github
Firebase Compatibility Imports
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
Note: Use Cloud Firestore NOT Realtime Database
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
Note on our Custom Button
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
Cart 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
Quick correction on CartIcon re-rendering
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

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
Memoizing selectCollection and collectionUrlParam
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
Note about TEST credit cards for Stripe
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
Note: Shop page may break

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
Note: Small correction on user saga
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
Should You Adopt Hooks?

Master Project: Advanced React Hooks

React-Redux Hooks
useDispatch
useParams Part 1
useParams Part 2
useState Part 1
useState Part 2
useEffect Part 1
useEffect Part 2
useEffect Part 3
useMemo
useLayoutEffect

Master Project: Stripe Payments Part 2 - Backend

About This Section
Introduction To Backend
Cloning From This Point On
Note: Do not push to github until end of section!
Creating our Server Inside the Project
Building A Basic Server
Note: You don't need the CORS library anymore
What We Are Building
Quick note about next lecture: Stripe Dashboard and Private Keys
Backend Payment Route
Connecting Client To Server
Note: Ignoring client node_modules
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
Note about next lesson
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
Update on React Devtools
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
Course Review
The Final Challenge

Progressive Web App

Note About This Section
Progressive Web Apps
Opt-In Service Worker in CRA
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
Update for CRA v4.0.0+ and React 17+
Converting Our App To PWA
Addendum to Server.js

Firebase Security

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

Testing in React

Note About This Section
Section Overview
Updated Code For This Section
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
Quick Note: Upcoming API Endpoint + ES6 Modules
Asynchronous Tests
Asynchronous Tests 2
Resources: Jest Cheat Sheet
Mocks and Spies
Note: Testing React Apps
Enzyme vs React Testing Library
Introduction To Enzyme
Quick Note: Empty Snapshots
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

Webpack + Babel

Introduction to Webpack + Babel
Webpack Config

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
Github Update: Master --> Main
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
Bonus Lecture

Popular Courses

Popular Platforms

Popular Searches

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

Online

₹ 4099

Quick Facts

Course overview

The highlights

Program offerings

Course and certificate fees

Fees information

certificate availability

certificate providing authority

Who it is for

What you will learn

The syllabus