![React Bootcamp with .NET API (Router, Redux Toolkit, Hooks) [Video]](https://content.packt.com/V20954/cover_image_small.jpg)
React Bootcamp with .NET API (Router, Redux Toolkit, Hooks) [Video]
Subscription
FREE
Video
$109.99
What do you get with a Packt Subscription?
What do you get with a Packt Subscription?
What do you get with Video + Subscription?
What do you get with a Packt Subscription?
What do you get with eBook?
What do I get with Print?
What do you get with video?
What do you get with Audiobook?
Subscription
FREE
Video
$109.99
What do you get with a Packt Subscription?
What do you get with a Packt Subscription?
What do you get with Video + Subscription?
What do you get with a Packt Subscription?
What do you get with eBook?
What do I get with Print?
What do you get with video?
What do you get with Audiobook?
-
Free ChapterIntroduction
-
React Fundamentals
- 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
-
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
-
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
-
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
-
CyclOPedia - Lifecycle Methods Class Components
-
WatchOPedia - Hooks in React
-
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
-
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
-
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
-
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
-
ProjectOPedia
-
.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
-
.NET API - Menu Item
-
.NET API - Authentication and Authorization
-
.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
-
Red Mango - Homepage
-
Set Up Redux and RTK
-
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
-
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
-
Payments
-
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
-
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
-
Home UI
-
Pagination and Search Order List
About this video
React is a JavaScript library for building user interfaces, specifically for creating interactive and dynamic web applications. You will embark on various real-world projects that will help you grasp the fundamentals of React and dive into advanced concepts.
Starting with TaskOPedia, you will learn the basics of React and explore functional and class components by building a simple page. You will then progress to CountOPedia, to create an interactive counter application that tests your skills in managing React state.
Next, we will cover ContactOPedia, where you will perform CRUD operations on a contact list using React. After that delve into the world of lifecycle methods with CyclOPedia, exploring both class components and functional components. Hooks in React will be covered in WatchOPedia, while RouteOPedia will introduce you to routing concepts in React.
To enhance your state management skills, ReduxOPedia will guide you through integrating Redux with React, along with exploring the Redux toolkit for more efficient state management. The TravelOPedia module will focus on using Redux query and mutation for asynchronous calls, providing you with a comprehensive understanding of handling data in React applications.
The ProjectOPedia module focuses on creating a page that lists all the projects you have worked on during the course.
Finally, you will be building a complete real-world restaurant website. This project will allow customers to place orders using their credit cards, track order statuses, and enable administrators to manage and view orders effectively.
By the end of this course, you will not only be proficient in React but have the skills and confidence to develop full-stack applications, and you will have completed a comprehensive restaurant website with payment integration.
- Publication date:
- June 2023
- Publisher
- Packt
- Duration
- 22 hours 20 minutes
- ISBN
- 9781805129455