CRUD with React, Typescript & .NET 8 Web API, EF Core, SQLite
In this video we will create from scratch CRUD with React, Typescript and .NET 8 Web Api together with CORS, fluent validation, mapster, global exception handling, entity framework core setup and SQLite database. This is a beginners course after which you will be able to create a simple React app with features of routing, displaying the contents in a table and performing CRUD operations on resources fetched from .NET 8 Web Api.
Struggling with slow EF Core operations?
With ZZZ Projects’ EF Core Extensions, you can boost performance like never before.
Experience up to 14× faster Bulk Insert, Update, Delete, and Merge — and cut your save time by as much as 94%.
https://entityframework-extensions.net
To get the access to the Source Code used in the video:
Support me on Patreon: / remigiuszzalewski
Follow me on LinkedIn: / remigiusz-zalewski
Follow me on Medium: / remigiuszzalewski
Check out my Blog: https://remigiuszzalewski.com
Timecodes:
Introduction : 0:00:00 - 0:00:48
Demo: 0:00:49 - 0:03:15
Creating .NET Web API: 0:03:16 - 0:03:50
Remove redundant code: 0:03:50 - 0:04:35
Adding class libraries: 0:04:36 - 0:07:42
Entity framework and SQLite nuGet setup: 0:07:43 - 0:09:45
MovieDbContext class: 0:09:46 - 0:10:34
Base entity class: 0:10:35 - 0:11:34
Movie entity class: 0:11:35 - 0:12:34
Setup of DbConext: 0:12:35 - 0:13:05
DbContext setup in Program.cs: 0:13:06 - 0:14:24
Appsettings.json file : 0:14:25 - 0:15:02
Dotnet EF migrations: 0:15:03 - 0:17:15
Applying migrations: 0:17:16 - 0:18:15
Show created sqlite database: 0:18:16 - 0:18:57
CQRS pattern: 0:18:58 - 0:20:34
MediatR nuGet package: 0:20:35 - 0:21:25
Setting up the CQRS structure: 0:21:26 - 0:25:23
QueryHandler: 0:25:24 - 0:26:45
Mapster nuGet package: 0:26:46 - 0:28:02
Mapping configuration: 0:28:03 - 0:28:38
DependencyInjection class and QueryHandler: 0:28:39 - 0:32:36
Changes in Program.cs: 0:32:37 - 0:33:16
GetMovieByIdQuery (extra code to QueryHandler, mappingConfig): 0:33:17 - 0:37:33
Commands-Create classes: 0:37:34 - 0:40:42
Commands-Update classes: 0:40:43 - 0:44:07
Commands-Delete classes: 0:44:08 - 0:46:21
Modules: 0:46:22 - 0:51:31
Request: 0:51:32 - 0:52:28
Endpoints in MovieModule: 0:52:29 - 0:57:21
Web API - check endpoints: 0:57:22 - 0:59:23
FluentValidation - CRUD classes: 0:59:24 - 1:05:16
GetMovieByQueryValidator: 1:05:17 - 1:06:37
Behaviors (Validator class): 1:06:38 - 1:11:20
Validation error class: 1:11:21 - 1:13:11
Validation exception class: 1:13:12 - 1:15:07
Check validation: 1:15:08 - 1:17:23
NotFoundException: 1:17:24 - 1:19:20
ExceptionHandler: 1:19:21 - 1:26:20
Setup ExceptionHandler in Program.cs: 1:26:21 - 1:28:20
Start on React (install node JS): 1:28:21 - 1:28:50
Create Client folder and npm create vite: 1:28:50 - 1:30:43
remove some of the auto-gen files/code: 1:30:44 - 1:31:48
react - think of which components to make: 1:31:49 - 1:33:17
react - create components: 1:33:18 - 1:35:13
react - create models: 1:35:14 - 1:38:04
react - make routers and interceptors (axios): 1:38:05 - 1:39:21
react - api (apiConnector) and npm install axios: 1:39:22 - 1:40:08
react - config tsx and apiConnector: 1:40:09 - 1:52:10
react - npm install semantic-ui-react: 1:52:11 - 1:54:15
react - MovieTable component: 1:54:16 - 1:59:57
react - MovieTableItem component: 1:59:58 - 2:00:47
react - MovieTable and MovieTableItem component: 2:00:48 - 2:05:50
react - app component: 2:05:51 - 2:07:09
CORS: 2:07:10 - 2:09:05
Demo of frontend: 2:09:06 - 2:09:26
react - routing (npm install react-router-dom): 2:09:27 - 2:12:33
react - more routing (main , app): 2:12:34 - 2:14:56
react - create movie (and movieTableItem): 2:14:57 - 2:16:48
react - movieForm (edit): 2:16:49 - 2:30:09
react - handle an error (and demo of the fronend/backend): 2:30:10 - 2:31:44
react - add a handle for API errors (axiosInterceptor): 2:31:45 - 2:39:52
react - add it to the app file (useEffect), also apiConnector: 2:39:53 - 2:43:44
react - add it to the app file (useEffect), also apiConnector: 2:39:53 - 2:44:30
#csharp #dotnet #crud #react
On this page of the site you can watch the video online CRUD with React, Typescript & .NET 8 Web API, EF Core, SQLite with a duration of hours minute second in good quality, which was uploaded by the user Remigiusz Zalewski 30 January 2024, share the link with friends and acquaintances, this video has already been watched 17,663 times on youtube and it was liked by 380 viewers. Enjoy your viewing!
