React 18 Tutorial and Projects Course
Hands-on React: Create 25+ Projects. Includes Axios, Router 6, Query 5, Redux Toolkit. Dive into the dynamic world of front-end development with our comprehensive course on React 18, a cutting-edge JavaScript library used for creating engaging user interfaces.
Course Curriculum: 59 Hours of Content
Intro
Available in
days
days
after you enroll
Dev Environment
Available in
days
days
after you enroll
React Fundamentals
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
React Hooks and Advanced Topics
Available in
days
days
after you enroll
- 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)
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
React Query
Available in
days
days
after you enroll
- 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)
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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)
Available in
days
days
after you enroll
- 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)
Available in
days
days
after you enroll
Redux Toolkit
Available in
days
days
after you enroll
- 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)
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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)
Check your inbox to confirm your subscription