Complete React CRUD with Asp.Net Core Web API | Full Stack Tutorial

🍒 Related Videos
Master Detail CRUD with React and Asp.Net Core API:    • Asp.Net Core Web API Master Detail CRUD  
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  
Image Upload with React & Web API:    • Image Upload in React with Asp.Net Co...  
Authentication & Authorization in .Net Core Web API :    • User Registration in Asp.Net Core Ide...  
Angular & .Net Core Web API CRUD:    • Asp.Net Core Web API CRUD with Angular  

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

📂 GitHub Repository
► http://bit.ly/2TXlO2Y

💖 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 CRUD Operations: Insert, Update, Delete, and Retrieve are implemented with Asp.Net Core Web API from Scratch.

First of all, we build Web API in Asp.Net Core with SQL Server and Entity Framework. Defined DB Model with EF Code First Approach, then created Asp.Net Controller with web methods for CRUD Operations.

Created React App with create-react-app package. A Form is designed using Material-UI.
Implemented Validation per control as well as whole form. Web API is consumed during Form Submission and Retrieved
existing records once the app is rendered. For State management, we used Redux. Unlike previous react tutorials, here we created React component with React Hooks.

Points discussed :
- Build Web API in Asp.Net Core with CRUD web methods
- React Form Design with Material UI
- Implemented CRUD with Redux
- Enabled CORS in Web API
- Consume API web methods from React
- Real-Time Form Validation
- etc

Tools Used : VS Code, Visual Studio, SSMS, Postman

Discussion @ Time
___________________
0:02:10 - Define Asp.Net Core DBModel
0:11:12 - Controller for CRUD
0:14:56 - Test Web API with Postman
0:17:47 - Create React js App
0:20:42 - Intro to Redux
0:27:57 - Implement Redux store, action & reducer
0:35:14 - Consume .Net Core Web API
0:43:05 - Map Redux data & actions to components
0:49:07 - Enable CORS in Asp.Net Core
0:53:53 - Integrate Material UI to React App
1:04:48 - Design Form with Material UI
1:10:19 - React Hook Component with Re-usable code for form
1:21:12 - Form Validation
1:32:19 - Redux Actions & Reducer for Insert, Update & Delete
1:38:07 - Insert New Record to DB
1:40:35 - Edit a Record
1:50:35 - Show Toast Message
1:53:32 - Delete Operation

#Reactjs #AspNetCore #CodAffection