1. Introduction

• Welcome
• Why Should You Learn React?
• Live Demo - Final Project
• What We Will Build - Part 1
• What We Will Build - Part 2
• Course Prerequisites
• Project Resources
• Tools Needed
• Visual Studio Code Extensions

2. React Fundamentals FREE CHAPTER

• Set Up Basic HTML and Add React CDN
• First React Code
• Assignment 1 - Writing First React Code
• Creating Element and Rendering in React
• What Is JSX?
• Better Way to Create React Projects
• Create Project
• Run the Project
• Cleanup Project
• Make the Project Functional Again
• First React Component
• Assignment 2 - React Component
• Assignment 3 - Parent Child Component
• Assignment 3 Solution - Parent-Child Component
• Rules of JSX

3. React Components

• Work with Styles
• Adding Bootstrap Classes
• Work with Classes - Part 1
• Variables in JSX
• Assignment 3 - Adding Const
• Assignment 3 Solution - Adding Constant.
• HTML Element in JSX
• Student Component
• Export and Import Components
• Assignment 4 - Separating Student Component
• Assignment 4 Solution - Separating Student Component
• Props and Components
• Install Third-Party Libraries and Images
• Import Image and Header Design
• Footer and Main Body Component
• Assignment 5 - Fix Error and Designing
• Passing Components as Children
• Final Hierarchy
• Arrow Function
• Functional Versus Class Components
• Class Components
• Assignment 6 - Convert MainBody to Class Component

4. React State - CountOPedia

• Create CountOPedia
• Assignment 7 Solution – Set Up CountOPedia
• Counter Application Buttons
• Click Events
• Setting and Retrieving State
• Demo - React State
• State Summary
• New SetState Syntax
• CountOPedia UI
• Random Play and Reset Button
• Assignment 8 - Game Status and Last Play
• Assignment 8 Solution - Game Status and Last Play

5. ContactOPedia - CRUD Operations

• Create Project - ContactOPedia
• Add Components
• Skeleton of Components
• Add Contact UI
• Favorite and General Contact State
• Individual Contact UI
• Look and Feel ContactOPedia
• Add Contact Handler
• Add Contact in Action
• Add Validations
• Display Validation and Success Notification
• Toggle Favorites
• Assignment 9 - Delete Contact
• Assignment 9 Solution - Delete Contact
• Add Random User to Contact List
• Axios Call
• Demo - Adding Random Contact
• Assignment 10 - Remove All Contact
• Assignment 10 Solution - Remove all Contact
• Which Contact Has to Be Updated
• Toggle UI Based on Update
• Cancel Button in Action
• Update Contact - Part 1
• Update Contact - Part 2

6. CyclOPedia - Lifecycle Methods Class Components

• Create Project - CyclOPedia
• Set Up Random API
• Display Instructor
• componentDidUpdate
• Controlled Component
• Saving in Local Storage
• Separating Out Instructor
• componentWillUnmount
• Load Student List
• Bug Time

7. WatchOPedia - Hooks in React

• Create WatchOPedia
• Set Up Counter
• useState in Action
• Gotchas with useState
• Objects and State
• Another Gotcha with useState
• Something Exciting
• WatchOPedia Movie Setup
• Assignment 11 Solution - Display Movie List
• Assignment 12 Solution - Add a Movie to Watch

8. CyclOPedia - Lifecycle Methods Functional Components

• Initial Project
• Name and Feedback Input fields
• useEffect Overview
• useEffect - First Render Only
• useEffect - Unmount in Action
• Assignment 13 - Use Effect
• Assignment 13 Solution - Use Effect
• Load Student on Counter Update
• useRef and previous values
• useRef on Student Count
• More Common Uses of useRef
• uselD Hook

9. RouteOPedia - Routing in React

• Set Up RouteOPedia
• Create More Components
• First Route
• Link Component
• Assignment 14 - Product Routes
• Assignment 14 Solution- Product Routes
• Nested Routes
• Index in Nested Route
• Not Found
• Parameters in URL
• Assignment 15 - Parameters in URL
• NavLink Component
• Navigate Using useNavigate Hook
• Using Link Component to Navigate
• Another Navigation Method
• Navigate Back

10. ReduxOPedia - Redux and React

• Set Up ReduxOPedia
• Add Redux Store
• Create First Reducer and Actions
• Log State and Dispatch Action
• Retrieve Value from State
• Dispatching Action from React Component
• Assignment 16 - Counter Multiplier
• Assignment 16 Solution - Counter Multiplier
• Add Destination Slice
• Display Destinations
• Select Destination
• Display Selected Destination
• Reset Counter and Destination
• Listen to Actions of a Different Reducer
• Say NO to Magic Strings
• Custom Actions
• Alternative Approach for Import and Export

11. TravelOPedia - Redux Toolkit, Query, Mutations, and Slice

• Set Up TravelOPedia
• Set Up Destination Components
• Set Up JSON Server
• Create Destination API
• Fetch Records from API
• Add Destination Controller Component
• Add Mutations
• Call POST Mutation
• Query Versus Mutation
• Caching with RTK Query
• Tags in Action
• Assignment 17 - Delete Destination
• Assignment 17 Solution - Delete Destination
• Response from Query and Parameters
• Separating Out Individual Destination
• Assignment 18 - Edit Functionality
• Assignment 18 Solution - Edit Functionality
• Integrate RTK Query with Redux Store
• Call Another API
• Show Random Destination

12. ProjectOPedia

• Introduction
• Create ProjectOPedia
• Header and Footer
• Map through Project List
• Project List
• Add Routing
• Topics Covered

13. .NET API - Basic Setup

• API is Optional and You Can Use the API Right Here
• Set Up Storage Account for Images on Azure
• Create API Project
• Install NuGet Packages
• Set Up Connection String and DBContext
• Create SQL Tables and Push Migrations
• Add Name to AspNetUsers
• Create Menu Item Table
• Seed Menu Items
• Get Menu Item and API Response
• Get Individual Menu Item
• Add Storage Account Connection String
• Implement Blob Service

14. .NET API - Menu Item

• Create Menu Item
• Create Menu Item in Action
• Update Menu Item
• Delete Menu Item
• Correct Status Code and Success Flag

15. .NET API - Authentication and Authorization

• Add Login and Register DTOs
• Auth Controller and Dependency Injection
• Register in Action
• Login in Action
• JWT Token
• Add Authentication and Authorization Endpoints
• Set Up API for Authentication
• Add Security to Swagger

16. .NET API - Shopping Cart and Order

• Add Shopping Cart Models
• Shopping Cart Controller and Logic
• Update Shopping Cart Endpoint
• Test Shopping Cart Endpoint
• Get Shopping Cart
• Order Header and Details Model
• Order DTOs
• Get Order
• Create Order in Action
• Update Order Details
• Stripe Payment Endpoint
• Stripe Client Secret in Action
• Shopping Cart API Update
• Deploy API

17. Red Mango - Homepage

• Typescript Introduction
• Create App with TypeScript
• Package JSON
• File Cleanup
• Install Bootstrap and Bootstrap Icons
• Header and Footer Component
• Header UI
• Fetch Menu Items and Interfaces in TypeScript
• Better Structure
• Card Component
• Homepage UI
• Add Routing and Not Found
• Menu Item Details Page

18. Set Up Redux and RTK

• Add Redux and Redux Toolkit to Project
• Add Query to Fetch Menu Items
• Call Slice to Fetch Data
• Display Loading Text
• Assignment 19 - Load Menu Item Details
• Assignment 19 Solution - Load Menu Item Details
• Manage Quantity on Menu Item Details

19. Shopping Cart

• User ID for Shopping Cart
• Set Up Shopping Cart Query and Mutation
• Add to Cart in Action
• Assignment 20 - Add to Cart Homepage
• Assignment 20 Solution - Add to Cart Homepage
• Add Mini Loader to Homepage
• Mini Loader Component
• Main Loader
• Loader on Add to Cart in Details Page
• Shopping Cart Interface
• Get Shopping Cart and Store in Slice
• Shopping Cart Page
• Shopping Cart Summary
• Add Reducers to Shopping Cart Slice
• Shopping Cart Functional
• Show Distinct Items in Cart
• Display Pickup Details
• Controller Component Helper Method
• Loading Component

20. Authentication and Authorization

• Login and Register UI
• How Login and Register Will Work
• Add Auth API
• Authentication Slice and User Interface
• Controller Components in Register
• Response API Interface
• Register User
• Controller Login Fields
• Login in Action
• Add Token to Local Storage
• Decode JWT Token
• Toggle Login and Logout button
• Login and Logout in Action
• Small Bug with Authentication
• Toastify Notifications
• Add Loader on Register
• Add Test Components for Authentication and Authorization
• Authentication with HOC
• Authorization with HOC
• Only Authenticated User Can Add to Cart
• Dynamic User ID
• Cleanup Test Components

21. Payments

• Load User Details of Logged-In User
• Stripe and React
• Create Payment API
• Calling Payment API
• Use Location State
• Stripe Card Demo
• Order Summary UI
• Local Interfaces
• Dynamic Order Summary
• Stripe Processing
• Stripe success object

22. Order

• Order API
• Create Order Object to Create Order
• Create Order
• Order Confirmed Logic
• Order Confirmation Page
• Get Order Endpoints in API
• My Orders UI
• Dynamic My Orders
• Bug with My Orders
• Make a New Component for Order List
• Order Details
• Assignment 21 - Solve Data Bug
• Manage Orders Header based on Role
• Status Color Helper Method
• Display Badge for Order Status
• Back to Order Button
• Buttons for Next Status
• Order Status Badge on Order List
• Order API - PUT Endpoint
• Update Order Status
• Cancel and Completed Buttons Condition
• All Orders Page

23. Menu Items

• Create Menu Item List Page
• Assignment 22 - Dynamic Menu Item List
• Menu Item Upsert UI
• Controller Components Menu Item
• Upload Image in React
• Menu Item API Mutations
• Create Menu Item
• Update Designing
• Load Menu Item to Update
• Update Menu Item
• Category Dropdown
• Small Bug
• Delete Menu Item
• Assignment 23 - Data Goes Away on Refresh
• Assignment 23 - Bug Solution

24. Home UI

• Banner
• Renaming Folder
• Store Search Value in Redux
• Search in Banner
• Show all Category for Filter
• Category Filters in Action
• Sorting in Action
• Skip Getting Shopping Cart
• Authentication and Authorization Endpoints
• Deploy to Azure

25. Pagination and Search Order List

• Introduction
• Add Search to Orders in API
• Add Pagination to Orders in API
• Add UI Filters
• Controller Components
• Local Filters in Action
• API Filters in Action
• Small Bug
• Get Total Records
• Pagination in Action
• Page Size in Action