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.Net Cor...
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 Core We...
Authentication & Authorization in .Net Core Web API : • User Registration in Asp.Net Core Identity
Angular & .Net Core Web API CRUD: • Asp.Net Core Web API CRUD with Angular
🎉 Recommended Courses
➤ React & .NET Core API: https://bit.ly/35v8rez
➤ React: https://bit.ly/35pLyZP
➤ React Hook Form: https://bit.ly/3R3vhC2
➤ C#: https://bit.ly/4gc1nWv
📂 GitHub Repository
► http://bit.ly/2TXlO2Y
💌 For Business Inquiries
➤ codaffection@gmail.com
🚶♂️ 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
On this page of the site you can watch the video online Complete React CRUD with Asp.Net Core Web API | Full Stack Tutorial with a duration of hours minute second in good quality, which was uploaded by the user CodAffection 27 January 2020, share the link with friends and acquaintances, this video has already been watched 595,126 times on youtube and it was liked by 6.7 thousand viewers. Enjoy your viewing!
