React Tutorial And Projects Course (2022) (updated 9/2022)

Learn React by Building 25+ Interesting Projects

What you'll learn
Make Great Projects Using React
Requirements
Strong Knowledge of HTML, CSS, JS is Required. ES6 is optional.
Description
React was released by Facebook's web development team in 2013 as a view library. React is one of the best choices for building modern web applications. React has a slim API, a robust and evolving ecosystem and a great community. In this course we will be learning React by creating various projects.If you want to learn more than just same old tutorial and instead create interesting projects using React.js this course is for you. During the course we will also cover redux-toolkit, which is the latest flavor of good old redux and build an interesting project with it. After each tutorial section we will build few projects to put see theory in action. You are not expected to build all projects, but the more course projects, you will complete the easier it's going to be to build your own applications, since you will know how to implement certain features in react. Here are few reasons why you should learn React.1. React is declarative2. React  makes app development easier3. The React community is amazing4. React is all about Reusable Components5. React is used by huge organizations6. React is SEO-friendly7. React fully embraces JavaScript8. React is unopinionated9. You’ll increase your earning power10. React has a fast learning curveAll Project Intros are available for preview.Here are some of the projects we are going to build in this course1. Birthday Reminder2. Tours3. Reviews4. Accordion5. Menu6. Tabs7. Slider8. Lorem Ipsum9. Color Generator10. Grocery Bud11. Navbar12. Sidebar and Modal13. Stripe Menu14. Cart15. Cocktails16. Markdown Preview17. Random Person18. Pagination19. Stock Photos20. Dark Mode21. Movies DB22. Hacker News23. Quiz24. Github Users25. E-Commerce26. Jobster

Overview

Section 1: Introduction and Setup

Lecture 1 What is React?

Lecture 2 Goals

Lecture 3 Structure

Lecture 4 Course Requirements

Lecture 5 Dev Environment Setup

Lecture 6 Text Editor Setup

Lecture 7 Video Blur Fix

Lecture 8 Course Review

Section 2: Install create-react-app

Lecture 9 Command Line Basics

Lecture 10 NPM Basics

Lecture 11 What is Create-react-app, Babel, Webpack

Lecture 12 Install Create-react-app

Lecture 13 Folder Structure

Lecture 14 Remove Boilerplate

Lecture 15 Update!!!

Section 3: React Basics Tutorial

Lecture 16 First Component

Lecture 17 Text Editor Setup

Lecture 18 First Component in Detail

Lecture 19 JSX Rules

Lecture 20 Nested Components and Tools

Lecture 21 Mini Book Project

Lecture 22 CSS

Lecture 23 JSX - CSS

Lecture 24 JSX - Javascript

Lecture 25 Props

Lecture 26 Props - Destructuring

Lecture 27 Props - Children

Lecture 28 Simple List

Lecture 29 Proper List

Lecture 30 Key Prop and Spread Operator

Lecture 31 Event Basics

Lecture 32 Import and Export Statements

Lecture 33 Free Hosting

Section 4: React Hooks and Advanced Topics

Lecture 34 Intro

Lecture 35 Starter Project

Lecture 36 Install Starter

Lecture 37 Starter Overview

Lecture 38 useState - Simple Use Case

Lecture 39 useState - Basics

Lecture 40 General Rules of Hooks

Lecture 41 useState - Array Example

Lecture 42 useState - Object Example

Lecture 43 useState - Multiple State Values

Lecture 44 Simple Counter

Lecture 45 Functional Update Form

Lecture 46 Matching Project

Lecture 47 useEffect - Basics

Lecture 48 useEffect - Conditional

Lecture 49 useEffect - Dependency List

Lecture 50 useEffect - Cleanup Function

Lecture 51 useEffect - Fetch Data

Lecture 52 Multiple Returns - Basics

Lecture 53 Multiple Returns - Fetching Example

Lecture 54 Short-Circuit Evaluation

Lecture 55 Ternary Operator

Lecture 56 Show/Hide Component

Lecture 57 Matching Projects

Lecture 58 Form Basics

Lecture 59 Controlled Inputs

Lecture 60 Add Item to the List

Lecture 61 Multiple Inputs

Lecture 62 Matching Projects

Lecture 63 useRef

Lecture 64 Matching Project

Lecture 65 useReducer - useState Setup

Lecture 66 useReducer - Refactor

Lecture 67 useReducer - Add Item

Lecture 68 useReducer - Remove Item

Lecture 69 Prop Drilling

Lecture 70 Context API / useContext

Lecture 71 Matching Projects

Lecture 72 Custom Hooks - useFetch

Lecture 73 PropTypes - Setup

Lecture 74 PropTypes - Images

Lecture 75 PropTypes - Default Values

Lecture 76 React Router 6 Update !!!

Lecture 77 React Optimization Warning!!!!

Lecture 78 React.memo

Lecture 79 useCallback

Lecture 80 useMemo

Lecture 81 useCallback - Fetch Example

Section 5: Basic Projects

Lecture 82 Intro

Lecture 83 Starter Project - Install and Overview

Lecture 84 Birthday Reminder - Intro

Lecture 85 Birthday Reminder - Setup

Lecture 86 Birthday Reminder - Complete

Lecture 87 Tours - Intro

Lecture 88 Tours - Fetch Data

Lecture 89 Tours - Display Tours

Lecture 90 Tours - Toggle Info

Lecture 91 Tours - Remove Tour

Lecture 92 Reviews - Intro

Lecture 93 Reviews - Info and React-Icons

Lecture 94 Reviews - Basic Setup

Lecture 95 Reviews - Prev and Next

Lecture 96 Reviews - Random

Lecture 97 Accordion - Intro

Lecture 98 Accordion - Complete

Lecture 99 Menu - Intro

Lecture 100 Menu - Display Items

Lecture 101 Menu - Buttons (manual approach)

Lecture 102 Menu - "all" Button

Lecture 103 Menu - Categories Buttons (dynamic approach)

Lecture 104 Tabs - Intro

Lecture 105 Tabs - Fetch Jobs

Lecture 106 Tabs - Display First Job

Lecture 107 Tabs - Display Buttons

Lecture 108 Slider - Intro

Lecture 109 Slider - Setup

Lecture 110 Slider - CSS Overview

Lecture 111 Slider - Setup Classes

Lecture 112 Slider - Prev and Next Buttons

Lecture 113 Slider - Autoplay

Lecture 114 Slider - Alternative

Lecture 115 Lorem Ipsum - Intro

Lecture 116 Lorem Ipsum - Structure

Lecture 117 Lorem Ipsum - Complete

Lecture 118 Color Generator - Intro

Lecture 119 Color Generator - Structure

Lecture 120 Color Generator - Color Values and Error

Lecture 121 Color Generator - Single Color

Lecture 122 Additional Info!!!

Lecture 123 Color Generator - Copy To Clipboard

Lecture 124 Grocery Bud - Intro

Lecture 125 Grocery Bud - Structure

Lecture 126 Grocery Bud - Add Items

Lecture 127 Grocery Bud - Alert

Lecture 128 Grocery Bud - Clear Items

Lecture 129 Grocery Bud - Remove Item

Lecture 130 Grocery Bud - Edit Item

Lecture 131 Grocery Bud - Local Storage

Lecture 132 Navbar - Intro

Lecture 133 Navbar - Basic Structure

Lecture 134 Navbar - Data

Lecture 135 Navbar - Simple Toggle

Lecture 136 Navbar - Class Toggle

Lecture 137 Additional Info

Lecture 138 Navbar - useRef

Lecture 139 Sidebar/Modal - Intro

Lecture 140 Sidebar/Modal - Structure

Lecture 141 Sidebar/Modal - Context

Lecture 142 Sidebar/Modal - Complete

Lecture 143 Stripe - Intro

Lecture 144 Stripe - Context Boilerplate

Lecture 145 Stripe - Navbar

Lecture 146 Stripe - Hero

Lecture 147 Stripe - Sidebar

Lecture 148 Stripe - Submenu

Lecture 149 Stripe - Location

Lecture 150 Stripe - Links

Lecture 151 Stripe - Hide Submenu

Lecture 152 Cart - Intro

Lecture 153 Cart - Setup Overview

Lecture 154 Cart - useReducer Setup

Lecture 155 Cart - Clear Cart

Lecture 156 Cart - Remove Single Item

Lecture 157 Cart - Increase

Lecture 158 Cart - Decrease

Lecture 159 Cart - Get Totals

Lecture 160 Cart - Fetch Data

Lecture 161 Cart - Toggle Amount

Section 6: React Router 6

Lecture 162 Intro

Lecture 163 Setup

Lecture 164 First Pages

Lecture 165 Page Components

Lecture 166 Link Component

Lecture 167 Error Page

Lecture 168 Navbar

Lecture 169 Nested Routes

Lecture 170 Shared Layout

Lecture 171 Index Pages

Lecture 172 NavLink

Lecture 173 URL Params - Setup

Lecture 174 Single Product Page

Lecture 175 useNavigate()

Lecture 176 Protected Route

Lecture 177 Products Page Refactor

Section 7: Axios HTTP Library

Lecture 178 Intro

Lecture 179 Setup

Lecture 180 GET Request

Lecture 181 Setup Headers

Lecture 182 POST Request

Lecture 183 Global Default

Lecture 184 Custom Instance

Lecture 185 Interceptors

Section 8: Cocktails API Project

Lecture 186 Cocktails - Intro

Lecture 187 Cocktails - Additional Info

Lecture 188 Cocktails - Setup Overview

Lecture 189 React Router 6 Update !!!

Lecture 190 Cocktails - React Router Setup

Lecture 191 Cocktails - Navbar

Lecture 192 Cocktails - About and Error

Lecture 193 Cocktails - Context API Setup

Lecture 194 Cocktails - API Overview

Lecture 195 Cocktails - Fetch Drinks

Lecture 196 Cocktails - Display List

Lecture 197 Cocktails - Search Form

Lecture 198 Cocktails - Single Cocktail Page

Lecture 199 Cocktails - Refactor to React Router 6

Lecture 200 Hosting (Netlify) - Drag and Drop

Lecture 201 Hosting (Netlify) - Continuous Deployment

Section 9: Additional Projects (API and External Libraries)

Lecture 202 Intro

Lecture 203 Markdown - Intro

Lecture 204 Markdown - Setup

Lecture 205 Markdown - Complete

Lecture 206 Random Person - Intro

Lecture 207 Random User - Setup

Lecture 208 Random User - Fetch User

Lecture 209 Random User - Buttons

Lecture 210 Pagination- Intro

Lecture 211 Pagination - Setup

Lecture 212 Pagination - Fetch/Display List

Lecture 213 Pagination - Paginate Logic

Lecture 214 Pagination - Display Single Page

Lecture 215 Pagination - Display Buttons

Lecture 216 Pagination - Prev and Next Buttons

Lecture 217 Stock Photos - Intro

Lecture 218 Stock Photos - Setup

Lecture 219 Stock Photos - Initial Fetch

Lecture 220 Stock Photos - ENV VAR

Lecture 221 Stock Photos - Display Photos

Lecture 222 Stock Photos - Scroll Event

Lecture 223 Stock Photos - Infinite Scroll

Lecture 224 Stock Photos - Search Query

Lecture 225 Stock Photos - Complete

Lecture 226 Stock Photos - useEffect Warning Alternative

Lecture 227 Stock Photos - Bug Fix 1

Lecture 228 Stock Photos - Bug Fix 2

Lecture 229 Dark Mode - Intro

Lecture 230 Dark Mode - Setup

Lecture 231 Dark Mode - moment.js

Lecture 232 Dark Mode - Toggle Theme

Lecture 233 Dark Mode - Local Storage

Lecture 234 Movie DB - Intro

Lecture 235 Movie DB - Setup

Lecture 236 Movie DB - API KEY

Lecture 237 React Router 6 Update !!!

Lecture 238 Movie DB - React Router

Lecture 239 Movie DB - Initial Fetch

Lecture 240 Movie DB - Movies Component

Lecture 241 Movie DB - Search Form

Lecture 242 Movie DB - Single Movie

Lecture 243 Movie DB - Refactor to useFetch

Lecture 244 Movie DB - Refactor to React Router 6

Lecture 245 Hacker News - Intro

Lecture 246 Hacker News - Setup

Lecture 247 Hacker News - API Overview

Lecture 248 Hacker News - Basic Structure

Lecture 249 Hacker News - Fetch Stories

Lecture 250 Hacker News - Display Stories

Lecture 251 Hacker News - Remove Story

Lecture 252 Hacker News - Search Form

Lecture 253 Hacker News - Prev and Next Buttons

Lecture 254 Quiz - Intro

Lecture 255 Quiz - Setup

Lecture 256 Quiz - API

Lecture 257 Quiz - Context Setup

Lecture 258 Quiz - Fetch Questions

Lecture 259 Quiz - Display Question

Lecture 260 Quiz - Next Question

Lecture 261 Quiz - checkAnswer

Lecture 262 Quiz - Show Modal

Lecture 263 Quiz - Setup Form Structure

Lecture 264 Quiz - HandleChange

Lecture 265 Quiz - HandleSubmit

Lecture 266 Quiz - Randomize Correct Answer

Section 10: Search Github Users

Lecture 267 Intro

Lecture 268 Starter Project Link

Lecture 269 Starter Project

Lecture 270 Setup Info

Lecture 271 React Router 6 Update !!!

Lecture 272 React Router Setup

Lecture 273 React Router Error

Lecture 274 Error Page

Lecture 275 Login Page

Lecture 276 Context API

Lecture 277 Mock Data

Lecture 278 Info Component

Lecture 279 Card Component

Lecture 280 Followers Component

Lecture 281 Repos Setup

Lecture 282 Fusion Charts Info

Lecture 283 First Chart

Lecture 284 Fusion Charts API

Lecture 285 Fusion Charts - Configuration Options

Lecture 286 Fusion Charts - Pie Chart

Lecture 287 Calculate Most Used Language

Lecture 288 Fusion Charts - Responsive

Lecture 289 Fusion Charts - Doughnut Chart

Lecture 290 Calculate Most Popular Language

Lecture 291 Fusion Charts - Column and Bar Charts

Lecture 292 Stars and Forks - Functionality

Lecture 293 Search Component

Lecture 294 Requests

Lecture 295 Error

Lecture 296 Search User

Lecture 297 Loading Spinner

Lecture 298 Repos and Followers

Lecture 299 Promise.allSettled()

Lecture 300 Auth0 Info

Lecture 301 Auth0 Setup

Lecture 302 Login - Logout

Lecture 303 Private Route

Lecture 304 Wrapper

Lecture 305 Local Storage

Lecture 306 Refactor to React Router 6

Lecture 307 Deploy Gotchas

Lecture 308 Deploy Project

Lecture 309 Finished Project

Section 11: E-Commerce Project

Lecture 310 Intro

Lecture 311 Info

Lecture 312 Starter Install

Lecture 313 Stater Overview

Lecture 314 Styled Components - Basics

Lecture 315 React Router 6 Update !!!

Lecture 316 React Router - Setup

Lecture 317 Navbar

Lecture 318 Cart Buttons

Lecture 319 Footer

Lecture 320 Sidebar

Lecture 321 Products Context Setup

Lecture 322 Sidebar Toggle

Lecture 323 Hot Reloading Fix

Lecture 324 Error Page

Lecture 325 About, Checkout Page

Lecture 326 Home Page - Hero

Lecture 327 Home Page - Services

Lecture 328 Home Page - Contact

Lecture 329 Formspree

Lecture 330 API Info

Lecture 331 Fetch Products Overview

Lecture 332 Fetch Products Complete

Lecture 333 Featured Products

Lecture 334 Format Price

Lecture 335 Fetch Single Product

Lecture 336 Single Product - Loading, Error

Lecture 337 Single Product - Base Return

Lecture 338 Single Product - Product Images

Lecture 339 Single Product - Stars (manual approach)

Lecture 340 Single Product - Stars (array approach)

Lecture 341 Single Product - Add To Cart - Colors

Lecture 342 Single Product - Add To Cart - Amount Buttons

Lecture 343 Filter Context Setup

Lecture 344 Products Page - Grid View

Lecture 345 Products Page - List View

Lecture 346 Sort Component - Basic Setup

Lecture 347 Sort Component - View Buttons

Lecture 348 Sort Component - Controlled Input

Lecture 349 Sort Functionality

Lecture 350 Filters - Default Values

Lecture 351 Filters - Text

Lecture 352 Filters - Unique Values

Lecture 353 Filters - Categories

Lecture 354 Filters - Companies

Lecture 355 Filters - Colors

Lecture 356 Filters - Price

Lecture 357 Filters - Shipping and Clear Filters

Lecture 358 Filter Functionality - Setup and Text Input

Lecture 359 Filter Functionality - Rest of the Filters

Lecture 360 Cart Context Setup

Lecture 361 AddToCart - Setup

Lecture 362 AddToCart Reducer - New Item

Lecture 363 AddToCart Reducer - Existing Item

Lecture 364 Cart Page Setup

Lecture 365 localStorage

Lecture 366 Cart Content

Lecture 367 Cart Columns

Lecture 368 Cart Totals

Lecture 369 Cart Item

Lecture 370 Cart - Remove Item and Clear Cart

Lecture 371 Cart - Toggle Amount

Lecture 372 Cart - Calculate Totals

Lecture 373 Switch React Version

Lecture 374 Additional Auth0 Info

Lecture 375 Auth0 - Setup

Lecture 376 Auth0 - Provider

Lecture 377 useContext Setup

Lecture 378 Auth0 - Login/Logout Buttons

Lecture 379 Auth0 - Toggle Values

Lecture 380 Auth0 - Hide Checkout

Lecture 381 Auth0 - Private Route

Lecture 382 Extra Content

Lecture 383 Install Extra Packages

Lecture 384 AuthWrapper

Lecture 385 Fix Warnings

Lecture 386 Stripe and Netlify Accounts

Lecture 387 Additional NETLIFY-CLI Info

Lecture 388 Install and Setup netlify-cli

Lecture 389 First Netlify Function

Lecture 390 Stripe Checkout - Setup

Lecture 391 Stripe Checkout - Imports

Lecture 392 Stripe Checkout - State Variables

Lecture 393 Stripe Checkout - Basic Return

Lecture 394 Netlify Function - /create-payment-setup

Lecture 395 Stripe Checkout - Get Client Secret

Lecture 396 Stripe Checkout - Complete

Lecture 397 Refactor To React Router 6

Lecture 398 Deploy To Netlify

Section 12: Old Redux Tutorial

Lecture 399 Info

Section 13: Redux Toolkit

Lecture 400 Intro

Lecture 401 Github

Lecture 402 Setup

Lecture 403 Install

Lecture 404 Store

Lecture 405 First Slice

Lecture 406 Redux Dev Tools

Lecture 407 useSelector

Lecture 408 Hero Icons

Lecture 409 Cart Items - Local Data

Lecture 410 Cart Container

Lecture 411 Cart Item

Lecture 412 Reducers - Clear Cart

Lecture 413 Reducers - Return State

Lecture 414 Reducers - Remove Item

Lecture 415 Reducers - Increase and Decrease

Lecture 416 Reducers - Calculate Totals

Lecture 417 Model Setup

Lecture 418 Modal Complete

Lecture 419 createAsyncThunk

Lecture 420 createAsyncThunk - More Options

Section 14: Jobster Project - Initial Setup

Lecture 421 Intro

Lecture 422 Overview

Lecture 423 Github Repository

Lecture 424 Setup

Lecture 425 Create New Application

Lecture 426 Title and Favicon

Lecture 427 Normalize.css and Default Styles

Section 15: Jobster Project - Landing Page

Lecture 428 Landing Page - Setup

Lecture 429 Landing Page - Structure

Lecture 430 Styled Components - Basics

Lecture 431 Style Landing Page

Section 16: Error Page

Lecture 432 Wrappers Folder

Lecture 433 Logo and Images

Lecture 434 Logo Component

Lecture 435 Setup Pages

Lecture 436 React Router - Setup

Lecture 437 Error Page

Lecture 438 Auto Imports

Section 17: Jobster Project - Register Page

Lecture 439 Register Page - Overview

Lecture 440 Register Page - Setup

Lecture 441 Switch To React 18

Lecture 442 FormRow Component

Lecture 443 Toggle Member

Lecture 444 Handle Change and Empty Values

Lecture 445 React Toastify

Lecture 446 User Slice - Setup

Lecture 447 Register and Login Placeholders

Lecture 448 HTTP Methods

Lecture 449 Jobs API

Lecture 450 Axios CustomFetch Instance

Lecture 451 Testing Register - HTTP(AJAX) Request

Lecture 452 Register User - HTTP(AJAX) Request

Lecture 453 Login User - HTTP(AJAX) Request

Lecture 454 Local Storage

Lecture 455 Programmatically Navigate To Dashboard

Section 18: Dashboard Setup

Lecture 456 Setup Dashboard Pages

Lecture 457 Complete SharedLayout

Lecture 458 Sidebar CSS Logic

Lecture 459 React Icons

Lecture 460 Navbar Structure

Lecture 461 Toggle Sidebar

Lecture 462 Toggle Logout Dropdown

Lecture 463 Logout Functionality

Lecture 464 Protected Route

Lecture 465 Small Sidebar - Setup

Lecture 466 Small Sidebar - Toggle

Lecture 467 Links Data

Lecture 468 Small Sidebar - Nav Links

Lecture 469 NavLinks Component

Lecture 470 Big Sidebar

Section 19: Profile Page

Lecture 471 Profile Page - Intro

Lecture 472 Profile Page - Setup

Lecture 473 Auth Request Overview

Lecture 474 Update User - Complete

Lecture 475 Authentication Error

Lecture 476 Refactor User Slice

Section 20: Add Job Page - First Stage

Lecture 477 Intro

Lecture 478 Job Slice

Lecture 479 Overview

Lecture 480 Structure

Lecture 481 FormRow Select

Lecture 482 HandleChange Reducer

Lecture 483 ClearValues Reducer

Lecture 484 Create Job Request - Overview

Lecture 485 Create Job Request - Complete

Lecture 486 User Location

Lecture 487 Logout Message

Section 21: All Jobs - First Stage

Lecture 488 Intro

Lecture 489 AllJobs Slice - Setup

Lecture 490 AllJobs Page Structure

Lecture 491 Container Setup

Lecture 492 GetAllJobs Request - Overview

Lecture 493 GetAllJobs Request - Complete

Lecture 494 Job Component Structure

Lecture 495 Job Info Component

Lecture 496 Moment.js

Lecture 497 Toggle Loading

Section 22: Add Job Page - Complete

Lecture 498 Delete Job Request

Lecture 499 Set Edit Job

Lecture 500 Edit Job Request

Section 23: Refactor App

Lecture 501 Job Thunk

Lecture 502 Authorization Header - File Approach

Lecture 503 Authorization Header - Utils Approach

Lecture 504 Authorization Header - Axios Interceptors Approach

Lecture 505 Test User

Section 24: Stats Page

Lecture 506 ShowStats Request

Lecture 507 Stats Page Structure

Lecture 508 Stats Container

Lecture 509 Stat Item

Lecture 510 Charts Container

Lecture 511 Recharts Library Update !!!

Lecture 512 Recharts Library

Lecture 513 Charts Complete

Section 25: All Jobs Page - Complete

Lecture 514 Search Container - Setup

Lecture 515 Search Container - Complete

Lecture 516 Handle Change and Clear Filters

Lecture 517 Pagination - Setup

Lecture 518 PageBtnContainer - Structure

Lecture 519 Change Page Functionality

Lecture 520 Query Params - Overview

Lecture 521 Query Params - Complete

Lecture 522 Change Page and isLoading

Lecture 523 Refactor AllJobs

Lecture 524 Clear Store

Lecture 525 Unauthorized Error

Section 26: Bonus

Lecture 526 Bonus

Everyone who wants to learn React