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

✨ Recommended Courses
➤ React : https://bit.ly/35pLyZP
➤ .Net Core API : https://bit.ly/3zaRaWY
➤ React + .Net Core API : https://bit.ly/35v8rez
➤ React + Material UI : https://bit.ly/2IKzMS4
➤ Real World Projects in React : https://bit.ly/3JeUZPw
➤ Complete Web Development Bootcamp : https://bit.ly/3b92YAQ

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

💖 Show Your Support ( Donation )
➤ https://bit.ly/3L36ut4 (PayPal)
➤ https://bit.ly/36lvWdV (Cards, Gpay, Apple Pay, UPIs)

🌀 Related Videos
https://bit.ly/2N9QjkE : Master Detail CRUD with React and Asp.Net Core API
http://bit.ly/2uqjZRz : React CRUD with and without Redux
http://bit.ly/2QwizgV : React js Todo App
https://goo.gl/ijPZQk : .Net Core Web API CRUD with Angular 7
https://goo.gl/AL18CP : Asp.Net Core MVC CRUD
https://goo.gl/ZHDEhP : Master Detail CRUD Web API + Angular

Subscribe to this channel Link to this video
► https://goo.gl/RFY5C2 ► http://bit.ly/2t0op0W

📚 Must-Read Books for All Programmers
Code Complete(2nd Edition) : https://geni.us/s6AK9t
The Art of Computer Programming : https://geni.us/Ko4H8m
Clean Code : https://geni.us/Jf9EBTB
Design Patterns : https://geni.us/OMPP
The Pragmatic Programmer : https://geni.us/8UM9F

💰 Purchase for Developers
💻 Laptops
MacBook Pro with M1 Chip : https://geni.us/7KGvnCU
Dell XPS 9570 : https://geni.us/rYB6
Microsoft Surface:https://geni.us/BJgeM
MacBook Air with M1 Chip : https://geni.us/fHZzRiB
ASUS ZenBook 13 : https://geni.us/LDKE
Lenovo Ideapad : https://geni.us/Mwvg2
⌨️ Keyboard : Das 4 Professional : https://geni.us/hkAdzi

🎬 All Playlist
http://bit.ly/2KQN9xF : Angular
http://bit.ly/30fPDMg : Asp.Net Core
http://bit.ly/325temF : React
http://bit.ly/2ws4utg : Python
https://goo.gl/viJcFs : Node.js
https://goo.gl/gvjUJ7 : Asp.Net MVC
https://bit.ly/3ggmmJz : Flutter
https://goo.gl/itVayJ : Web API
https://goo.gl/YJPPAH : MEAN Stack
https://goo.gl/s1zJxo : C# Tutorial
https://goo.gl/GXC2aJ : Asp.Net WebForm
https://goo.gl/vHS9Hd : C# WinForm
https://goo.gl/MLYS9e : MS SQL
https://goo.gl/5Vou7t : Crystal Report
https://goo.gl/qEWJCs : CG Exercises in C Program

🌟 About this Channel
CodAffection – [ 1 hour content weekly ].
This channel is all about teaching and motivating software developers to build applications/
websites in various technologies/ programming languages like Angular, React, NodeJS, Python, Asp.Net, C#, JavaScript, SQL, etc.
► For Sponsorship Contact here: https://bit.ly/2TjOt0q

🔗 Social Media Links
Blog : http://www.codaffection.com
Facebook : https://www.facebook.com/codaffection
Twitter : https://twitter.com/codaffection
Youtube : https://youtube.com/codaffection
GitHub : https://github.com/codaffection

#Reactjs #AspNetCore #CodAffection