Intro
Dev Environment
React Fundamentals
-
Intro (0:58)
-
Github Repository
-
Folder Structure (8:59)
-
Remove Boilerplate (2:27)
-
First Component (10:13)
-
Extra Settings (12:53)
-
Create Element (4:31)
-
JSX Rules (9:41)
-
Nest Components (4:03)
-
React Developer Tools (2:12)
-
Booklist (10:26)
-
CSS (10:32)
-
Local Images (public folder) (7:16)
-
JSX - CSS (7:27)
-
JSX - Javascript (6:30)
-
Props - Basic Setup (9:40)
-
Props - Somewhat Dynamic Setup (4:29)
-
Props - Multiple Approaches (4:45)
-
Children Prop (6:30)
-
Simple List (8:35)
-
Proper List (6:25)
-
Key Prop (4:07)
-
Object as a Prop (5:34)
-
Event Basics (13:08)
-
Form Submission (5:50)
-
Form Submission - Button Example (3:41)
-
Anonymous Function (arrow) (3:20)
-
Components Feature (5:08)
-
Prop Drilling (5:40)
-
Complex Example - Intro (2:02)
-
Complex Example - Bug (3:42)
-
Complex Example - Fix (3:21)
-
ES6 Modules (9:58)
-
Local Images (src folder) (5:42)
-
Numbers Challenge (6:28)
-
Title Challenge (2:25)
-
Build Folder (2:33)
-
Deployment (2:46)
Backroads Application
-
Setup (0:26)
-
Intro (1:57)
-
Install (3:20)
-
SRC Boilerplate (8:14)
-
Structure (10:50)
-
Components (6:32)
-
Nav Logo (2:36)
-
Smooth Scroll (3:21)
-
Page Links (7:34)
-
Social Links (7:26)
-
Hero and About Components (2:16)
-
Title Component (4:30)
-
Services Component (4:10)
-
Tours Component (7:56)
-
Footer Component (5:01)
-
Alternative Approach - Page Links Component (7:04)
-
Alternative Approach - More Components (12:09)
-
Continuous Deployment - Setup (5:57)
-
Continuous Deployment - Benefits (5:27)
-
Continuous Deployment - "Gotcha" (4:55)
React Hooks and Advanced Topics
-
Intro (0:52)
-
Github Repository
-
Setup (2:31)
-
Overview (8:54)
-
Error Example (3:37)
-
UseState Fundamentals (9:55)
-
Initial Render and Re-renders (3:01)
-
General Rules of React Hooks (2:36)
-
UseState Array Example - Setup (6:12)
-
UseState Array Example - Complete (7:29)
-
UseState - Extra Info (1:31)
-
UseState - Object Example (5:17)
-
Auto Batching Info (1:28)
-
UseState Object Example - Complete (5:54)
-
UseState Set Function "Gotcha" (3:15)
-
UseState Functional Update Form (4:21)
-
UseState - SetTimeout Example (4:13)
-
Matching Project
-
Code Example (6:00)
-
UseEffect - Fundamentals (7:02)
-
UseEffect - Multiple Effects (3:57)
-
UseEffect Fetch Challenge - Intro (3:34)
-
UseEffect Fetch Challenge - Complete (9:19)
-
UseEffect Clean Up Info (1:15)
-
Multiple Returns (5:45)
-
Multiple Returns - Fetch Data Setup (3:39)
-
Multiple Returns - Fetch Data (9:09)
-
Fetch Error "Gotcha" (4:01)
-
Order Matters (6:46)
-
Fetch Function Location (2:54)
-
React Hooks Rules (2:16)
-
Vanilla.js (optional) (5:17)
-
Short Circuit - Overview (5:23)
-
Short Circuit - Examples (7:41)
-
Ternary Operator (4:04)
-
Toggle Challenge (5:45)
-
User Challenge (5:50)
-
UseEffect Cleanup Function - Setup/Challenge (6:40)
-
UseEffect - Timer Example (5:30)
-
UseEffect - Event Listeners Example (3:29)
-
You Might Not Need an Effect (3:36)
-
Matching Project
-
Project Structure - Folder Example (6:22)
-
Project Structure - Named Exports (4:22)
-
Project Structure - Export Group (6:43)
-
Leverage Javascript - Intro (4:59)
-
Leverage Javascript - Challenge (7:13)
-
Leverage Javascript - Complete (10:06)
-
Forms - Setup (5:01)
-
Controlled Inputs (10:02)
-
User Challenge - Setup (2:48)
-
User Challenge - Add New Users (9:20)
-
User Challenge - Remove User (2:08)
-
Multiple Inputs (11:54)
-
Checkbox Input (3:40)
-
Select Inputs (4:38)
-
FormData API (11:11)
-
Matching Projects
-
useRef - DOM Node (7:22)
-
useRef - Initial Render (4:53)
-
Matching Projects
-
Custom Hooks - Toggle (5:55)
-
Custom Hooks - Fetch Person (6:47)
-
Custom Hooks - Generic Fetch (3:27)
-
Context API - Challenge (2:51)
-
Context API - Prop Drilling (11:04)
-
Context API - Solution (8:06)
-
Context API - Custom Hook (3:05)
-
Context API - Global Setup (11:34)
-
Matching Projects
-
UseReducer - Intro (2:30)
-
UseReducer - Challenge (5:16)
-
UseReducer - Setup (9:52)
-
Reducer Basics (9:47)
-
Actions and Default State (5:26)
-
Reset List (1:35)
-
Remove Person (4:25)
-
Import / Export (4:45)
-
Matching Projects
-
Performance - Intro (0:40)
-
Component Re-renders (5:02)
-
React Dev Tools (4:20)
-
Lower State (3:36)
-
Lower State - Challenge (5:20)
-
React.memo() (3:43)
-
Mind Grenade (5:11)
-
UseCallback Hook (5:20)
-
UseCallback Hook - Common Use Case (2:22)
-
UseMemo Hook (5:28)
-
UseTransition Hook (7:57)
-
React Suspense (9:27)
Fundamental Projects (with steps)
-
Important Info !!!
-
Intro (3:01)
-
Setup (13:44)
-
Setup - Figma File (2:06)
-
Birthday Buddy - Setup (1:55)
-
Birthday Buddy - Import List (5:02)
-
Birthday Buddy - Render List (6:16)
-
Birthday Buddy - Clear List (2:24)
-
Birthday Buddy - CSS (optional) (13:48)
-
Tours - Setup (1:11)
-
Tours - Fetch Tours (7:46)
-
Tours - Render Tours (11:55)
-
Tours - Remove Tour (3:59)
-
Tours - Read More (6:32)
-
Tours - Refetch (4:35)
-
Tours - CSS (optional) (18:37)
-
Reviews - Setup (0:53)
-
Reviews - Data (3:21)
-
Reviews - React Icons (3:47)
-
Reviews - First Person (4:30)
-
Reviews - Prev and Next (5:06)
-
Reviews - Check Number (4:19)
-
Reviews - Random Person (4:02)
-
Reviews - Modulus Operator (6:22)
-
Reviews - CSS (optional) (13:10)
-
Questions - Setup (0:56)
-
Questions - Render List (7:31)
-
Questions - Toggle Info (4:16)
-
Questions - Alternative Setup (11:05)
-
Questions - CSS (Optional) (8:40)
-
Menu - Setup (0:44)
-
Menu - Title Component (3:26)
-
Menu - Render Items (6:34)
-
Menu - Unique Categories (7:05)
-
Menu - Display Categories (2:57)
-
Menu - Filter (5:12)
-
Menu - CSS (optional) (10:47)
-
Tabs - Setup (0:46)
-
Tabs - Fetch Jobs (6:39)
-
Tabs - Display Job (5:55)
-
Tabs - Duties and UUID Library (6:46)
-
Tabs - Button Container (2:28)
-
Tabs - Current Item (4:48)
-
Tabs - CSS (optional) (12:57)
-
Slider - Setup (1:40)
-
Slider - Structure (10:07)
-
Slider - CSS (12:04)
-
Slider - Initial Logic (6:11)
-
Slider - Current Item (8:16)
-
Slider - Autoslide (autoplay) (3:37)
-
Slider - Library Info (1:07)
-
Slider - React Slick Setup (9:06)
-
Slider - React Slick Complete (9:05)
-
Lorem Ipsum - Setup (0:56)
-
Lorem Ipsum - Structure (6:43)
-
Lorem Ipsum - Submit Form (6:43)
-
Lorem Ipsum - Nanoid Library (1:52)
-
Lorem Ipsum - CSS (optional) (5:26)
-
Color Generator - Setup (1:49)
-
Color Generator - Form Structure (6:59)
-
Color Generator - HTML Color Input (2:38)
-
Color Generator - Values.js Library (3:27)
-
Color Generator - Render List (8:46)
-
Color Generator - React Toastify (4:54)
-
Color Generator - Change / Add Color (6:47)
-
Color Generator - Clipboard API (3:58)
-
Color Generator - CSS (optional) (10:15)
-
Grocery Bud - Setup (1:21)
-
Grocery Bud - Form Component (6:48)
-
Grocery Bud - Add Item (8:03)
-
Grocery Bud - Render Items (4:05)
-
Grocery Bud - Single Item (5:41)
-
Grocery Bud - Remove Item (1:37)
-
Grocery Bud - Local Storage (11:47)
-
Grocery Bud - Edit Item (global setup) (5:30)
-
Grocery Bud - React Toastify (3:56)
-
Grocery Bud - CSS (optional) (8:43)
-
Navbar - Setup (1:19)
-
Navbar - Data (2:08)
-
Navbar - Initial Setup (10:01)
-
Navbar - Initial Setup CSS (5:45)
-
Navbar - Fixed Setup (6:05)
-
Navbar - Dynamic Setup (8:19)
-
Navbar - Question (5:19)
-
Navbar - Complete (11:44)
-
Sidebar/Modal - Setup (0:56)
-
Sidebar/Modal - Components (2:44)
-
Sidebar/Modal - Global Context (6:57)
-
Sidebar/Modal - Home Component (6:13)
-
Sidebar/Modal - Modal Component (15:04)
-
Sidebar/Modal - Sidebar Component JSX (5:37)
-
Sidebar/Modal - Sidebar CSS (9:11)
-
Sidebar/Modal - Sidebar Toggle (2:24)
-
Strapi - Setup (1:04)
-
Strapi - Data (1:43)
-
Strapi - Global Context (4:49)
-
Strapi - Components (6:13)
-
Strapi - Navbar CSS (5:48)
-
Strapi - Hero (5:58)
-
Strapi - Sidebar JSX (8:16)
-
Strapi - Sidebar CSS (10:56)
-
Strapi - NavLinks (8:10)
-
Strapi - PageId Logic (3:34)
-
Strapi - Submenu JSX (8:12)
-
Strapi - Submenu CSS (10:10)
-
Strapi - Hide Submenu (part 1) (6:54)
-
Strapi - Hide Submenu (part 2) (12:13)
-
Cart - Intro (0:51)
-
Cart - Setup (5:33)
-
Cart - Global Context (3:14)
-
Cart - UseReducer Setup (6:30)
-
Cart - Setup Actions (4:23)
-
Cart - Data Structures (3:50)
-
Cart - Map Object (6:42)
-
Cart - Switch to Map() (5:25)
-
Cart - Clear Cart (4:09)
-
Cart - Remove Item (7:34)
-
Cart - Increase Amount (4:22)
-
Cart - Decrease Amount (3:26)
-
Cart - Calculate Totals (7:35)
-
Cart - Fetch Structure (4:36)
-
Cart - Fetch Complete (4:27)
-
Cart - CSS (optional) (17:30)
Axios HTTP Library
React Query
-
Intro (2:43)
-
Starter (0:37)
-
Useful Info
-
Server Setup (back-end) (6:46)
-
Tasks App Setup (front-end) (4:29)
-
Axios Custom Instance (5:09)
-
HTTP Methods (7:55)
-
API Docs (0:01)
-
React Query - Intro (3:00)
-
React Query - Install and Setup (1:55)
-
Important Update !!!
-
First Query (7:22)
-
Render Data (5:30)
-
Error Handling (5:56)
-
Thunder Client (3:58)
-
Create Task - Challenge (8:27)
-
Create Task - Initial Setup (9:02)
-
UseMutation Helpers (8:27)
-
Edit Task - Challenge (4:35)
-
Edit Task - Complete (5:31)
-
Delete Task (4:53)
-
Refactor (12:42)
-
Alternative Server Setup (2:20)
Unsplash Images Project (with React Query)
-
Intro (0:34)
-
Download (0:16)
-
Starter (1:21)
-
Structure (5:10)
-
Dark Theme - Initial Setup (6:07)
-
Dark Theme - Add / Remove Class (4:13)
-
Dark Theme - CSS (10:43)
-
Dark Theme - User Prefers Dark Mode (CSS) (2:39)
-
SearchForm (6:55)
-
Unsplash API - Info (0:28)
-
Unsplash API - Register (0:41)
-
Obtain Correct URL (8:03)
-
Setup React Query (2:47)
-
Setup Query (3:30)
-
Render Images (5:39)
-
React Query Dev Tools (2:15)
-
Setup Global SearchValue (5:15)
-
UseQuery Fix (4:04)
-
Dark Mode - Javascript Check (5:25)
-
Important Update !!!
-
Local Storage (3:10)
-
ENV Variables (5:26)
-
Deploy (5:25)
-
CSS (optional) (11:31)
Contentful CMS Project
-
Download (0:21)
-
Intro (1:43)
-
Setup (0:50)
-
Hero Component (4:35)
-
Undraw (1:54)
-
Projects Data (4:51)
-
Headless CMS (1:28)
-
Create Contentful Account (0:43)
-
Content Type (4:31)
-
Content (5:52)
-
Contentful API Docs (6:50)
-
Contentful SDK - Install and Setup (4:06)
-
Fetch Projects (9:22)
-
Render Projects (3:54)
-
Deploy (5:59)
-
Webhooks (4:17)
-
CSS (optional) (10:29)
MixMaster (React Router 6.4+ and React Query)
-
Setup (0:30)
-
Intro (1:08)
-
Starter (0:56)
-
SPA and React Router Info (3:12)
-
Basic Router (4:39)
-
Setup Pages (6:31)
-
Link Component (3:40)
-
Nested Pages (8:50)
-
Nested Pages - More Complex Example (3:23)
-
Navbar (5:02)
-
Styled Components - Setup (5:41)
-
Styled Components - Wrapper (4:41)
-
Navbar CSS (optional) (9:08)
-
About Page (2:17)
-
Page Layout (3:06)
-
Error Page (6:21)
-
Error Page - CSS (4:26)
-
Loader Info (4:59)
-
Loader - Landing Page (1:35)
-
CocktailDB Overview (2:15)
-
Fetch Drinks (5:00)
-
Single Page Error (6:33)
-
CocktailList (7:18)
-
CocktailCard (5:10)
-
CocktailList and CocktailCard CSS (optional) (5:53)
-
Global Loading and Context (6:32)
-
Single Cocktail - Setup (7:15)
-
Single Cocktail - Render (4:52)
-
Ingredients Challenge (7:14)
-
Additional Check (5:00)
-
Single Cocktail CSS (optional) (5:17)
-
React Toastify - Setup (1:36)
-
Newsletter Structure (5:56)
-
HTML Form Submission (4:35)
-
Action - Setup (8:25)
-
Submit Form (6:37)
-
Handle Errors (8:50)
-
Navigation State (2:11)
-
SearchForm - Structure (4:08)
-
SearchForm - Complete (6:56)
-
SearchForm CSS (optional) (2:06)
-
React Query - Setup (5:15)
-
React Query - Landing Page Setup (7:34)
-
React Query - Landing Page Complete (5:02)
-
React Query - Single Cocktail Page (5:48)
-
Redirects (1:01)
WebDev Portfolio (Tailwind CSS)
Redux Toolkit
-
Intro (2:44)
-
Github (0:20)
-
Setup (2:46)
-
Install (3:46)
-
Store (3:32)
-
First Slice (7:39)
-
Redux Dev Tools (1:40)
-
useSelector (8:37)
-
Hero Icons (3:04)
-
Cart Items - Local Data (2:15)
-
Cart Container (9:08)
-
Cart Item (3:24)
-
Reducers - Clear Cart (7:38)
-
Reducers - Return State (2:45)
-
Reducers - Remove Item (6:38)
-
Reducers - Increase and Decrease (6:20)
-
Reducers - Calculate Totals (6:08)
-
Modal Setup (2:28)
-
Modal Complete (9:29)
-
createAsyncThunk (13:03)
-
createAsyncThunk - More Options (9:24)
-
Builder Callback Notation (5:27)
Comfy Store (React Router 6.4+, RTK, Axios, React Query)
-
Intro (6:30)
-
DaisyUI (9:51)
-
Assets (1:43)
-
VITE + TailwindCSS (4:35)
-
DaisyUI Setup (1:48)
-
Install Dependencies (0:48)
-
Create Pages (7:20)
-
Route Structure (11:19)
-
Error Page (7:02)
-
Form Input (5:38)
-
Login Page (9:59)
-
Submit Button (3:42)
-
Register Page (5:39)
-
Custom Class (2:36)
-
Header Component (5:30)
-
Navbar Structure (12:24)
-
NavLinks Component (4:31)
-
Toggle Component (3:41)
-
Add Theme (3:12)
-
Set Theme (6:43)
-
About Page (4:19)
-
Hero Component (9:35)
-
Base URL (6:50)
-
Landing Loader (9:56)
-
Featured Products (12:24)
-
Format Price (3:35)
-
Fetch Single Product (8:42)
-
Render Single Product (5:15)
-
Single Product - Colors (5:43)
-
Single Product - Amount (6:23)
-
Generate Amount Inputs (4:32)
-
Products Page - Setup (8:06)
-
Products List (11:36)
-
Products Container (9:50)
-
Filters - Search Input (8:31)
-
Filters - Select Input (8:44)
-
Filters - Range Input (8:17)
-
Filters - Checkbox Input (3:43)
-
Global Loading (3:27)
-
Filters - Params (14:10)
-
Pagination - Setup (9:26)
-
Pagination - Complete (7:17)
-
Redux Toolkit - Setup (9:22)
-
Add To Cart Functionality (5:09)
-
AddItem Reducer (8:35)
-
Refactor and Local Storage (6:26)
-
Clear, Remove and Edit Reducers (9:13)
-
Cart Page (9:05)
-
Cart Totals (5:13)
-
Cart Items - Setup (14:42)
-
Cart Items - Functionality (4:12)
-
User Slice - Setup (5:26)
-
Refactor Theme Toggle (5:22)
-
Logout and Access User (14:25)
-
Register User - Docs (6:46)
-
Register User - Complete (6:02)
-
Login User - Setup (2:36)
-
Access RTK Store in Action (5:19)
-
Login Page - Action Complete (6:35)
-
Login User - Reducer (4:02)
-
Demo User (6:20)
-
Checkout Page - Setup (5:41)
-
Checkout Page - Restrict Access (5:46)
-
Create Order Request (6:15)
-
Checkout Form - Setup (5:17)
-
Checkout Form - Complete (9:36)
-
Auth Errors (4:20)
-
Orders Request (3:53)
-
Orders Page - Setup (8:39)
-
Orders List (11:45)
-
Complex Pagination (15:25)
-
React Query - Setup (5:44)
-
React Query - Landing Page (3:46)
-
React Query - Single Product Page (4:26)
-
React Query - All Products Page (5:50)
-
React Query - Orders Page (6:35)
-
React Query - Remove Queries (3:18)
Jobster
-
Intro (3:16)
-
Overview (5:34)
-
Github Repository (0:47)
-
Setup (2:50)
-
Create New Application (4:57)
-
Title and Favicon (2:22)
-
Normalize.css and Default Styles (4:40)
-
Landing Page - Setup (4:23)
-
Landing Page - Structure (3:41)
-
Styled Components - Basics (8:11)
-
Style Landing Page (10:36)
-
Wrappers Folder (4:23)
-
Logo and Images (2:18)
-
Logo Component (5:28)
-
Setup Pages (3:38)
-
React Router - Setup (5:37)
-
Error Page (4:56)
-
Auto Imports (2:20)
-
Register Page - Overview (5:24)
-
Register Page - Setup (6:49)
-
Switch To React 18 (2:19)
-
FormRow Component (7:24)
-
Toggle Member (6:46)
-
Handle Change and Empty Values (7:38)
-
React Toastify (6:44)
-
User Slice - Setup (7:10)
-
Register and Login Placeholders (8:57)
-
HTTP Methods (5:37)
-
Jobs API (4:54)
-
Axios Custom Fetch Instance (3:22)
-
Testing Register - HTTP (AJAX) Request (6:57)
-
Register User - HTTP (AJAX) Request (9:26)
-
Login User - HTTP (AJAX) Request (3:59)
-
Local Storage (7:17)
-
Programmatically Navigate To Dashboard (4:48)
-
Setup Dashboard Pages (7:42)
-
Complete SharedLayout (5:34)
-
Sidebar CSS Logic (4:19)
-
React Icons (3:26)
-
Navbar Structure (7:48)
-
Toggle Sidebar (3:54)
-
Toggle Logout Dropdown (2:30)
-
Logout Functionality (4:14)
-
Protected Route (4:41)
-
Small Sidebar - Setup (3:49)
-
Small Sidebar - Toggle (2:14)
-
Links Data (4:03)
-
Small Sidebar - Nav Links (5:01)
-
NavLinks Component (2:57)
-
Big Sidebar (4:34)
-
Profile Page - Intro (7:18)
-
Profile Page - Setup (12:06)
-
Auth Request Overview (6:11)
-
Update User - Complete (11:06)
-
Authentication Error (6:18)
-
Refactor User Slice (7:53)
-
Add Job - Overview (2:00)
-
Job Slice (6:28)
-
Add Job Code - Overview (3:47)
-
Structure (8:59)
-
FormRow Select (11:24)
-
HandleChange Reducer (4:30)
-
ClearValues Reducer (2:56)
-
Create Job Request - Overview (5:25)
-
Create Job Request - Complete (10:09)
-
User Location (5:20)
-
Logout Message (3:03)
-
All Jobs - Overview (1:37)
-
AllJobs Slice - Setup (4:13)
-
AllJobs Page Structure (3:12)
-
Container Setup (10:08)
-
GetAllJobs Request - Overview (4:48)
-
GetAllJobs Request - Complete (6:32)
-
Job Components Structure (11:41)
-
Job Info Component (4:55)
-
Moment.js (2:08)
-
Toggle Loading (4:25)
-
Delete Job Request (11:04)
-
Set Edit Job (6:32)
-
Edit Job Request (10:06)
-
Job Thunk (5:24)
-
Authorization Header - File Approach (3:34)
-
Authorization Header - Utils Approach (2:02)
-
Authorization Header - Axios Interceptors Approach (7:05)
-
Test User (6:03)
-
ShowStats Request (10:22)
-
Stats Page Structure (4:40)
-
Stats Container (5:13)
-
Stat Item (3:55)
-
Charts Container (6:45)
-
Course Update !!!
-
Recharts Library (2:30)
-
Charts Complete (10:52)
-
Search Container - Setup (4:45)
-
Search Container - Complete (12:09)
-
Handle Change and Clear Filters (6:55)
-
Pagination - Setup (8:10)
-
PageBtnContainer - Structure (10:40)
-
Change Page Functionality (7:09)
-
Query Params - Overview (11:27)
-
Query Params - Complete (6:05)
-
Change Page and isLoading (5:19)
-
Refactor AllJobs (3:38)
-
Clear Store (9:42)
-
Unauthorized Error (9:29)
-
Refactor Extra Reducers To Builder Notation (2:52)
-
Debounce - Intro (2:23)
-
Debounce - Vanilla JS (9:55)
-
Refactor to LocalSearch (4:06)
-
Setup Debounce (7:33)
