React Developer Tools | CodingAddict

Autoplay
Autocomplete

Previous Lesson Complete and Continue

React

Intro

Course Intro (13:06)
Main Course Repository
Useful Info
Discord Server
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 (6:23)
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)
Important Update !!!
Dark Mode - Javascript Check (5:25)
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)
Important Update !!!
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)
Important Update !!!
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)

Content Update

Important Info (2:13)

Typescript Tutorial

Intro and Setup (17:35)
Type Annotation (12:49)
Union Type and Type Any (15:15)
Arrays and Objects (18:32)
Function Params and Function Return (15:58)
Optional, Default and Rest Params (16:58)
Objects as Parameters and Excess Property Checks (14:40)
Type Alias and Intersection Type (20:40)
Interface Fundamentals (21:13)
Interface Advanced (26:01)
Tuples and Enums (17:18)
Type Assertion, Unknown and Never Types (22:45)
ES6 Modules (16:13)
Type Guarding - First Part (16:25)
Type Guarding - Second Part (15:26)
Generics (39:22)
Fetch Data and Declaration Files (32:40)
Classes (22:12)
Tasks Project - First Part (28:06)
Tasks Project - Second Part (13:54)

Typescript & React

Setup and Fundamentals (24:50)
UseState and Events (27:41)
Challenge and Solution (17:06)
Context API and useReducer (32:33)
Fetch Data (24:03)
Redux Toolkit (19:56)
Tasks Project (20:37)

Next.js Tutorial

Update !!!
Setup, Home Page and Link Component (12:58)
Nested Routes and CSS (13:05)
Layout, Navbar, Fonts and Metadata (14:44)
Server vs Client (9:12)
Fetching Data (15:34)
Nested Layouts and Dynamic Pages (9:49)
Images (20:52)
More Routing Options (7:41)
Server Actions and Actions Page Setup (13:32)
Actions File and Save User (14:27)
Fetch Users and Revalidate Cache (8:45)
useForStatus and useFormState (14:51)
Delete Button, Input Hidden and Bind Method (12:02)
Route Handlers - First Part (9:00)
Route Handlers - Second Part (13:26)
Middleware, Local Build and Cache (15:49)

Next.js Store App

Update !!!
Project Overview (10:44)
Setup (2:59)
Create Pages (3:51)
Important Update !!!
Shadcn Install (3:18)
Button Component (9:10)
Create Components (3:53)
Container Component (3:39)
Navbar Structure (5:14)
Logo Component (3:32)
NavSearch and CartButton Components (6:13)
Change Theme (3:09)
Toggle Dark Mode (11:17)
LinksDropdown Component (7:42)
Important Info !!!
Supabase Project (4:49)
Prisma Setup (3:58)
Connect Prisma to Supabase (7:11)
Prisma CRUD (3:35)
Practice Prisma Queries (6:06)
Product Model (4:28)
Seed Database (4:03)
Create More Components (4:16)
SectionTitle and EmptyList Components (3:41)
Fetch Products Functions (4:36)
Featured Products (5:33)
ProductsGrid Component (15:08)
Hero Component (5:01)
HeroCarousel Component (5:16)
Loading Container (10:30)
Products Container Component (19:34)
Products List Component (8:09)
NavSearch Component (15:39)
Fetch Product Details (9:31)
Product Details Page - Setup (8:23)
Deploy on Vercel (6:56)
Setup Toast Component (1:56)
Important Info !!!
Cerk Auth (10:40)
SignOutLink Component (4:08)
UserIcon Component (5:03)
LinkDropdown Component - Complete (6:49)
Tes Auth Provider in Production (4:18)
Admin Pages - Structure (13:46)
Restrict Access to Admin Pages (8:54)
Create Product Page (setup) and Faker Library (7:34)
Form Input Component (8:13)
More Form Components (11:52)
Submit Button Component (5:22)
Form Container Component (15:41)
Create Product Action - Initial Approach (12:49)
Zod Library (11:29)
Custom Error Messages (13:53)
Image Validation (7:45)
Upload Image to Supabase (14:14)
Fetch Admin Products (9:58)
Icon Button and Delete Product Action (8:51)
Admin Products - Complete (4:37)
Remove Old Image from Supabase Bucket (7:37)
Fetch Admin Product Details (3:38)
Edit Product Page (12:22)
Update Image Container (15:23)
Loading Table (5:17)
Favorite Model (5:37)
Favorite Buttons and Actions (9:37)
Favorite Button and Form (9:23)
Toggle Favorite Action (5:18)
Favorites Page (5:34)
React Share (12:11)
Review Model (8:38)
Rating Input and Submit Review Components (14:41)
Create Review Action (5:09)
Rating and Comment Components (9:37)
Product Reviews (12:00)
Product Rating Complete (4:30)
User Reviews and Delete Review Actions (4:00)
Reviews Page (10:42)
Restrict Access (6:23)
Cart and CartItem Model (9:43)
Select Product and Amount Component (13:18)
Add To Cart Component (8:11)
Add To Cart - First Part (11:48)
Add To Cart - Second Part (12:47)
Cart Page and Cart Totals Component (17:12)
Cart Items List Component (16:05)
Delete Cart Item (10:26)
Update Cart Item (6:55)
Bug Fix (7:40)
Order Model and Order Actions (8:52)
Orders and Sales Pages (14:53)
Stripe Setup and API Keys (3:01)
Refactor Order and createOrderAction (6:57)
Checkout Page (6:12)
Payment Route (12:17)
Confirm Route (4:56)
Test Stripe (3:59)
Deploy Bug Fix !!!
Atlas Setup - Optional Video !!! (6:09)

Next.js Jobify App

Intro (7:00)
Important Update !!!
Shadcn (18:54)
Layout, Home Page and Create Pages (14:46)
Clerk Auth and Nav Links (8:14)
Dashboard, Layout, Sidebar and Navbar (18:56)
Dropdown Links, Change and Toggle Theme (19:13)
Shadcn Form Component and Types (18:23)
Custom Form Components (12:06)
Create Job - Continued (10:35)
Prisma, Render and Create Job Action (18:23)
Toast Component, React Query Setup and Create Job Form Complete (15:13)
Get All Jobs Action and Page Setup (21:09)
Search Form (15:20)
Jobs List and Job Card (15:18)
Job Info and Delete Job (11:11)
Single Job Page and Edit Job Complete (13:33)
Seed Database (10:18)
Stats and Charts Actions (13:22)
Stats Cards, Loading Skeleton and Charts Container (15:59)
Button Container (15:19)
Complex Button Container (13:33)

Extra Projects

Course Complete
Extra Projects

Jobster

Intro and Setup (17:26)
Structure and Styled Components (23:18)
Setup Pages (32:01)
Error and Register page (first part) (36:00)
Register page (second part) (30:30)
HTTP Requests (30:19)
Login User and Dashboard Setup (33:42)
Navbar Setup and Toggle Functionality (26:35)
Small and Big Sidebar (22:41)
Profile Page (36:42)
Add Job Page - First Part (26:28)
Add Job Page - Second Part (31:38)
Create Job (23:59)
All Jobs (30:32)
Job Component (34:16)
Edit Job and Test User (40:48)
Stats Setup (24:11)
Charts Container (20:09)
Search Container (23:50)
Pagination (26:00)
Query Params (22:52)
Refactor Logout User (25:41)
Debounce (23:57)

Github Users

Setup and React Router (27:16)
First Pages, Context API and Mock Data (30:36)
Info Card and Followers Components (33:37)
Charts - First Part (27:50)
Calculate Most Used (28:47)
Calculate Most Popular (30:40)
Requests (33:32)
Requests - Second Part (29:23)
Auth (32:42)
Auth (second part) and Deploy (36:22)

Teach online with

React Developer Tools

Lesson content locked

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

Enroll in Course to Unlock