IIRF Online > Development > Web Development > React JS > Complete React Developer (w/ Redux, Hooks, GraphQL)
Complete React Developer (w/ Redux, Hooks, GraphQL) by Udemy
Updated! Become a Senior React Developer. Build a massive E-commerce app with Redux, Hooks, GraphQL, Stripe, Firebase
Course Highlights
- 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
Skills you will learn!
Curriculum
5 Topics
Course Outline
Join Our Online Classroom!
Exercise: Meet Your Classmates & Instructor
ZTM Resources
Monthly Coding Challenges Free Resources and Guides
8 Topics
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
58 Topics
Section Overview
Course Guideline + Code
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
Quick note: React 18 Strict Mode
Monsters Rolodex - Class Components
Monsters Rolodex - Component State
Monsters Rolodex - setState
Monsters Rolodex - States and Shallow Merge
Monsters Rolodex - setState and Secondary Callback
Monsters Rolodex - Mapping Arrays to Elements
Optional: map() + key attribute
Monsters Rolodex - Keys for Mapping
Monsters Rolodex - Single Page Applications (SPAs)
Monsters Rolodex - Lifecycle Method: componentDidMount
Optional: Promises
Monsters Rolodex - Renders & Re-renders in React
Monsters Rolodex - Input Search Box Component
Monsters Rolodex - Searching & Filtering
Optional: filter() includes()
Monsters Rolodex - Storing Original Data
Monsters Rolodex - Optimizations
Monsters Rolodex - Understanding Components
Monsters Rolodex - CardList Component
Monsters Rolodex - Component Props
Monsters Rolodex - Rendering and Re-rendering part 2
Monsters Rolodex - SearchBox Component
Monsters Rolodex - CSS in React
Monsters Rolodex - CardList Component
Quick note on quotes for string interpolation
Monsters Rolodex - Finishing Touches
Functional vs Class Components
Class Component Lifecycle Methods Breakdown
Monsters Rolodex - Functional Component Intro
Pure & Impure Functions
Monsters Rolodex - Hooks: useState
Monsters Rolodex - Functional Component Re-rendering
Monsters Rolodex - Infinite Re-rendering
Monsters Rolodex - Hooks: useEffect
Monsters Rolodex - Remaining Components
React v18: Migrating from React v17 + ReactDOM v18 Changes
React v18: Strict Mode Changes
DOM and Virtual DOM
React and ReactDOM
React and ReactDOM part 2
ReactDOM v18 Changes
DOM Paint Flashing
Optional: Git + Github
Optional: Connecting With SSH To Github
10 Topics
Endorsements On LinkedIN
Github Strategy
The Long Road Ahead
Project Overview
Scaffolding Our Capstone Project
Setting Up Our Categories
Adding Sass
Category Item Component
Directory Component
Adding Fonts
7 Topics
Routing
Updating/Upgrading Libraries
Setting Up Our Homepage
React Router Outlet
Navigation Bar Component
React Router Link
Styling for Navigation + Logo
16 Topics
Setting Up Firebase
Authentication Flow
Optional: Async Await
Optional: How to fix 403: restricted_client error
Authenticating With Firebase
Introducing Firestore Data Models
Setting Up User Documents
Finish Creating User Documents
Sign In With Redirect
Sign Up Form Pt.1
Sign Up Form Pt.2
Sign Up With Email + Password
Generalizing Form Input Component
Custom Button Component
Sign In Form
Finishing Authentication Page
5 Topics
Need For Context
User Context
Re-rendering From Context
Signing Out
Exercise: Imposter Syndrome
3 Topics
Observer: onAuthStateChange
Finalizing Auth Listener
Observer Pattern
14 Topics
New Shop Page
Products Context
Product Card Component
Cart Icon & Dropdown
Toggle Cart Open
Add To Cart Pt.1
Add To Cart Pt.2
Optional: reduce()
Cart Item Designs
Creating Checkout Page
Checkout Item Pt. 1
Checkout Item Pt.2
Checkout Item Pt.3
Cart Total
9 Topics
Firestore DB No-SQL
addCollectionAndDocuments Pt.1
addCollectionAndDocuments Pt.2
Get Products + Categories From Firestore
Optional: Hash Tables vs Arrays
Using Our CategoriesMap
Category Preview Component
Nested Routes in Shop
Category Page
7 Topics
Fixing Clashing Styles
Introducing Styled-Components
Styled-Components - Button
Styled-Component - Cart Dropdown
Styled-Component - Directory Item & Cart Icon
Styled-Component - Form Input Component
Last Touches
2 Topics
Deploying On Netlify
Adding Redirects For Netlify
5 Topics
Reducers explained
User Reducer
Cart Reducer Pt. 1
Cart Reducer Pt. 2
Cart Reducer Pt. 3
19 Topics
Redux Toolkit Aside
Redux vs Context: Access
Redux vs Context: Data Flow
React-Redux: Installation
React-Redux: Setting Up Our Store
React-Redux: Creating User Reducer
React-Redux: Selectors
Categories Reducer
Categories Selectors
Business Logic in Our Selectors
What Triggers useSelector
Demystifying Middleware
Redux Triggers Extra Re-renders
Optional: Memoization
Reselect Library
Migrating Cart Context to Redux Pt. 1
Migrating Cart Context to Redux Pt. 2
Migrating Cart Context to Redux Pt. 3
Migrate Cart Context to Redux Pt. 4
2 Topics
Redux-Persist
Redux-Devtools
3 Topics
Asynchronous Redux: Redux-Thunk
Redux-Thunk Pt. 2
Redux-Thunk Pt. 3
9 Topics
Asynchronous Redux: Redux-Saga
Generator Functions
Redux-Saga: fetchCategoriesAsync Thunk to Saga
Redux-Saga: Converting onAuthStateChanged Listener to Promise
Redux-Saga: Check User Session Saga Pt. 1
Redux-Saga: Check User Session Saga Pt. 2
Redux-Saga: Sign in Sagas
Redux-Saga: Sign up Sagas
Redux-Saga: Sign Out Sagas
7 Topics
Redux Toolkit Intro
Using createSlice
Using Redux Toolkit Action Creators
Non Serializable Value Middleware
Immutable Middleware
Categories to createSlice
Cart to createSlice
9 Topics
The Need for Serverless Functions
Serverless Functions Explained
Setting up Stripe
Setting Up Our PaymentForm
Writing Our First Serverless Function
Finishing Stripe Payment
Tidying Up Our UI
Adding Auth With Netlify URL
Adding Environment Variables For Netlify
7 Topics
Typescript Introduction
Starting our Typing
Typescript Interfaces
Typescript Types & Third Party Library Types
ChangeEvent Type From React
Understanding Generics
Typing React's setState
11 Topics
Crwn-Clothing Typescript Overview
Typing createAction & Function Overloading
Typing Category Action Creators
Typing Category Selectors
The Problem With Discriminating Unions
Type Predicate Functions
Intersections & Return Types
withMatcher Type
Improving Our Reducer Typing
Typing Redux Cart Files Pt. 1
Typing Redux Cart Files Pt. 2
3 Topics
Typing Firebase Utils
Typing User Actions
Typing User Reducer & Selectors
3 Topics
Typing Rootstate
Typing Third Party Libraries
Typing Our Custom Middleware
3 Topics
Typing Categories Saga
Typing User Sagas Pt. 1
Typing User Sagas Pt. 2
4 Topics
Typing Button Component
Typing Input & Form Components
Typing SVG Imports
Typing Our Payment Form
8 Topics
GraphQL Explained
Starting Repo + GraphQL Playground
Graphql Queries
Categories Query
Updating Components To Consume GraphQL Values
Variables in useQuery & Caching
Mutations
Apollo vs Redux
6 Topics
Do Not Optimize For Performance Until You Need It
Hooks: useCallback Pt.1
Hooks: useCallback Pt. 2
Hooks: useMemo
React Devtools Profiling & React Memo
Code Splitting Dynamic Imports Suspense & Lazy
1 Topic
Firebase Firestore Security Rules
10 Topics
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
15 Topics
Note About This Section
Progressive Web Apps
Opt-In Service Worker in CRA
Resources: Progressive Web Apps
Progressive Web Apps Examples
PWA - HTTPS
Resources: PWA - HTTPS
PWA - App Manifest
PWA - Service Workers
Resources: PWA - Service Workers
Update for CRA v4.0.0+ and React 17+
PWA - Final Thoughts
PWA - Our Application
Global Styles and Media Queries
Remaining Mobile Styles
46 Topics
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
Exercise: #1 - Testing With Jest
Enzyme vs React Testing Library
Introduction To Enzyme
Resources: 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
Aside - React Testing Library
Basics of RTL - Render and Screen
Button Tests - Part 1
Button Tests - Part 2
Render with Providers and Cart Icon Tests
Navigation Tests - Part 1
Navigation Tests - Part 2
Product Card and Testing Redux Actions
Navigation Tests - Part 3
Category Tests and React-Router-Dom Mocks
Category Reducer Test
Category Selector Test
Category Sagas Tests - Part 1
Category Sagas Tests - Part 2
2 Topics
Introduction to Webpack + Babel
Webpack Config
10 Topics
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
14 Topics
map()
Promises
filter()
includes()
CWD: Git + Github
Github Update: Master --> Main
CWD: Git + Github 2
Async Await
find()
reduce()
Memoization
Currying
ES6 Classes
Inheritance
3 Topics
Contributing To Open Source
Contributing To Open Source 2
Exercise: Contribute To Open Source
4 Topics
Thank You!
AMA - 100000 Students!!
Coding Challenges
Special Bonus Lecture
Complete React Developer (w/ Redux, Hooks, GraphQL)
Related React JS Courses
Thank You!
Your review has been submitted successfully.