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

React js CRUD Operations: Insert, Update, Delete, and Retrieve are implemented with Asp.Net Core Web API from Scratch.

🚀 Udemy Course on React Hook Form

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

📂 GitHub Repository

💖 Buy me a Coffee

🌀 Related Videos

🔗 Find me in

#Reactjs #AspNetCore #CodAffection

[thisaintmyrealname]

Thank you for not letting a single line of code go unexplained. This has served me well as a React/Redux refresher, and a .NetCore primer.

[davidpereira]

I really really... fall in love with this channel! Thanks for all the tutorials;

[czip]

Hey, I just wanted to say that you are a rockstar. This is a perfect tutorial and you're very good at showing how all the pieces fit together.

[demniker]

What a great video. You even explain the reasoning behind the smallest details. Thank you!

[gcfhornet]

Man, your tutorial saved my life. Simply great. Thanks a lot.

[EricPerezDesign]

Good Tutorial. The pace is good for experienced developers. You cover allot of really good topics and techniques. This really helped me speed up my knowledge.

[stavvers]

amazing tutorial! thank you so much. i love you approaching of explaining even the smallest detail. Exactly how a tutorial should be!

[carloscardenas]

Of course I will buy you a coffee, I really need to learn this because of my job and I was kind of frustrated, thanks for this amazing tutorial 👍🏽

[jonassamaitis]

I love it! Great work! I followed through all the way but was using it for my own app just using your techniques all the way. Rockstar for sure! :)

[mukeshjangid]

Your Explaining the Curd Operation is very excellent.

[sharefmoufaq]

thank you man it's exactly what I was searching for

[daviddonadze]

Ooh I was hoping for this. I learned Angular from you and now I will learn React. 🙋‍♂️

[GorgeousPuree]

Wow, the usefulness of this video is priceless. Thank you very much.

[DanielCruz.developer]

Keep them coming .net core and angular react vuejs!!! Thank you sir...

[MaryReed-np]

Great video! Exactly what I was looking for to get up and running including the middleware set up. Thanks!

[jayanehrukumar]

Hi @CodAffection, nice video . understood a lot of concepts in this video. Thank you very much for your efforts

[swapnarenukunta]

what a tutorial, this is a very good one for react, thanks a lot.

[mbybitar]

Thanks alot
I hope so to make a tutorial for authintication using react and web api ❤️

[mohamedbechere]

Awesome video. i appreciate your efforts in this and all of your videos.

[nglars]

Awesome video my guy! Thanks for the help.