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.
If you find my videos helpful you can consider to support me
Source code:
Linkedin:
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
Watch video CRUD with React, Typescript & .NET 8 Web API, EF Core, SQLite online without registration, duration 02 hours 45 minute 18 second in high hd quality. This video was added by user Remigiusz Zalewski 31 January 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 7 thousand once and liked it 18 people.