React ASP.NET Core Minimal APIs Tutorial (Small CRUD App)

In this video I demonstrate how to combine the popular front end JavaScript library React and the new ASP.NET Core 6 Minimal Web APIs.

At the end of it you'll have a minimal example CRUD Application that demonstrates how to combine the two. Can be used as a clean template to kickstart your CRUD apps.

Publishing to the Microsoft Azure Cloud is also covered.
The React app will be published to an Azure Static Web App Resource and the Minimal Web API to an Azure App Service Resource.

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

►► Blazor - Real World Developer Portfolio Course Discount Link:

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

►► DOWNLOAD SOURCE CODE

Buy link:

Free link:

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

►► LIVE DEMO

React Client:

ASP.NET Web API:

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

►► LINKS MENTIONED

Microsoft Docs ASP.NET Core Minimal Web APIs:

Traversy Media Free React Crash Course (React knowledge level I assume you have):

Microsoft Docs EF Core CLI:

Create React App:

Install Bootstrap to React:

GitHub YAML syntax:

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

►► TIMESTAMPS

0:00 - Intro & Demo
4:27 - Blazor Course
5:20 - Setting Up Dev Environment
10:20 - Creating & Cleaning the Server Project
16:17 - EF Core Code First Database
31:11 - Repository for DB Operations
38:49 - First API Endpoint
40:47 - Improving Swagger UI
45:48 - Other API Endpoints
55:14 - Creating & Cleaning the React Project
1:07:07 - Adding Bootstrap
1:10:16 - Displaying Posts in a Table
1:23:49 - Server CORS Policy
1:28:21 - Filling the Table with Posts
1:33:02 - Constants File with API Endpoints
1:42:59 - PostCreateForm Component
2:09:49 - PostUpdateForm Component
2:23:14 - Deleting Posts
2:30:50 - Publish Server to Azure App Service
2:38:33 - Publish React to Azure Static Web App + GitHub Actions
2:52:43 - Fix CORS Policy
2:55:11 - Final Commit & Closing Thoughts
2:57:05 - Thanks for watching

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

►► CREDITS
Lively Animated Desktop Wallpaper Software:

Motherboard Background Image:

Visit my website (example of what you can build with ASP.NET):

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Good luck on your developer journey!

#react #minimalapi #aspnetcore

[RubenHeerenDev]

Join the Discord community to chat with other devs and get help if you're stuck on something.

[jameshalstead]

I'm trying to teach myself dotnet. This is the first tutorial I've watched and while it took me 3x's longer than the video to follow along, I already feel pretty confident. I thought I was pretty decent with React/Node but you taught me some stuff in React I haven't done. I think it's time I start watching more advanced React tutorials... Awesome video and thank you for your time!

[jasonma]

Awesome tutorial. Especially the integration part of front end, back end and Azure.

[jamestreadway]

Dude your awesome and to the point no bs kind of teacher. Keep going!

[DLouis-ikjx]

Thanks a lot Ruben, very awesome demo of covering ASP.NET6 C#/React/Node.js/Web API/CRUD+Azure/gitHub/CICD in step by step!

[ryandeering]

Excellent video for familiarizing myself with the mini APIs. Hope to see more tutorials from you, you've got a knack for it.

[andrewbenson]

Loved this tutorial, learned loads especially not knowing any React/JS before hand. Thank you Ruben
My one feedback would be to structure the tutorial so it's a bit more incremental, as we were doing all the scripting upfront before testing anything was working. So for example, get the create form showing, demo, then do a button, demo, that kind of thing.
The tutorial was exactly what I was looking for, all the best.

[PsytekkLala]

Clap clap clap. Nice work! A tutorial from the beginning to the publishing. Very Nice!

[junioranheu]

Thank you so much for this tut, much appreciated, Ruben!

[Tyer]

This explanation is just super ♥️ ♥️♥️

[soznykc]

Thank you for video. Your explanation is perfect

[DENDYTWOO]

I like it very much. Thanks for this great tutorial, ive learned a lot

[theav.]

I wish the screen was on presentation mode. Too small. Great content regardless!

[tech-savant]

when i create post, it doesn't get added to the list instantly, only after clicking get posts from server again...

[aaronnolan]

You had to set up CORS on the server. I have a question for when we are working one smaller projects. Is it possible to combine the react client and backend in the same directory/repo so that they are under the same domain? This would allow for only one server and no need to configure CORS.

[jimmyopot]

As much as I appreciate this video for learning both dotnet and react, I wish it was more legible...Honestly, very amateur videos will get more views because the code can be clearly seen. But thanks, learning a lot.

[dsmith]

Thank you for the lesson. Hard to find Core 6 info out there right now. I have a random question. What extension are you using to show what arguments that are needed in gray? Not the Codelense reference lines but where it tells you that the argument needed is a ConnectionString. Keep up the good work!

[zawtunit]

Hi i got error sqlite is not available

[firemanhood]

have you watched your lesson? even on a laptop it is impossible to look at this font size.
Anyway, thanks for the lesson. It will be great if you pay attention to this detail.

[merrylane]

Thanks for the tutorial. It is very informative. I'm just starting out with React. Is there a reason why you prefer to use functions such as App(), PostCreateForm() instead of classes (components) that inherit from React.Component? Is that because you are not using JSX files or are you still using JSX when you return() a bunch of html?