Master Detail CRUD with React JS & Asp.Net Core Web API | Restaurant App Project

Опубликовано: 23 Февраль 2021
на канале: CodAffection

84,187

1.4k

🍒 Related Videos
Prev. Video:    • Asp.Net Core Web API Master Detail CRUD
Normal CRUD with React & .Net Core API:    • Complete React CRUD with Asp.Net Core...
React Quiz App with Web API:    • Build a React.js Quiz App with Asp.Ne...
Everyone's favourite way of creating React forms:    • React Hook Form - 1. Introduction
Authentication & Authorization in .Net Core Web API :    • User Registration in Asp.Net Core Ide...

🚀 Udemy Course on React Hook Form (Popular React Form Library)
➤ https://bit.ly/4cv7DXF (Discount auto-applied)

📂 GitHub Repository
➤ http://bit.ly/2MeoCax

💖 Channel Support
➤ Paypal: https://bit.ly/3L36ut4
➤ UPI App: https://geni.us/ScanQRCode
➤ Amazon: https://geni.us/AmazonAffiliated

💌 For Business Inquiries
➤ [email protected]

🚶‍♂️ Follow us
Facebook :   / codaffection
Discord :   / discord
Twitter :   / codaffection

---
React.js Master Detail CRUD Operations within a Restaurant App.

This is the second video in the series of Master Detail CRUD with Asp.Net Core API and React.js. In this video, we build a react.js application from scratch. Inside that, we have created a master-detail form for creating and managing the order in a restaurant application. By consuming Asp.Net Core Web API, Master Detail CRUD operations Insert, Update, Retrieve and Delete are implemented.

Discussion @ Time :
____________________________________
0:00:00 - Introduction.
0:02:51 - Create React js App. & App Structure.
0:08:37 - Install Material UI.
0:10:15 - Design a Form for Master (Order Summary).
0:57:43 - Populate Customer DropDown with the Collection from the API.
1:01:31 - Make HTTP Request to Web API from React JS & Enable CORS.
1:14:36 - Add Component to list and search all food items.
1;27:44 - Select Food Items to the Order.
1:34:30 - Create Component to List Select Food Items and managing them.
1:56:22 - Calculate Order Grand Total.
2:01:18 - Form Validation.
2:10:05 - Create an Order or Submit an Order.
2:13:17 - Retrieve and Display existing Order.
2:27:16 - Update an entire Order.
2:54:12 - Notification Component.
2:58:11 - Delete an entire Order.

#CodAffection #ReactJS #MasterDetail