SPA and React Router Info | CodingAddict

Autoplay
Autocomplete

Previous Lesson Complete and Continue

React

Intro

Course Intro (0:41)
Main Course Repository
Useful Info
Q&A
What is React ? (6:04)
Goals (2:23)
Structure (1:01)
Requirements (1:52)

Dev Environment

Workflow Info (0:33)
Browser (0:55)
VS Code (1:52)
Terminal (1:15)
Node.js (3:43)
Create-React-App (11:16)

React Fundamentals

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)

VITE

VITE - Intro (1:53)
VITE - Install / Setup (8:49)

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

Intro (1:18)
Starter (0:35)
Setup (2:15)
GET Request (10:37)
Setup Headers (5:11)
POST Request (6:18)
Global Default (6:25)
Custom Instance (7:11)
Interceptors (10:01)
Important Info !!!

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)

Intro (1:37)
Tailwind Intro (9:52)
Project Setup (7:02)
Additional Assets (4:46)
Navbar (13:29)
Hero (9:04)
Custom Class (2:01)
Skills Section (11:07)
About Section (3:49)
Projects Section (9:57)

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)

Teach online with

SPA and React Router Info

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock