Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

ASP.NET Core and React - The Complete Guide

Name: ASP.NET Core and React - The Complete Guide
Rating: 4.0 (69 reviews)

The complete guide to build applications using ASP.NET Core 6, React and Entity Framework Core

Created byVictor Lins

Last updated 3/2022

English

What you'll learn

How to develop an interactive single page application (SPA) using React js
How to build a Web API using ASP NET Core 6 (.NET 6)
How to use Entity Framework Core to manipulate database records
How to allow users to create, read, update and delete items in the web page using Axios
How to document a Web API using Swagger
How to install and use Microsoft SQL Server Studio
How to install and publish an application in IIS

Course content

7 sections • 43 lectures • 3h 40m total length

Course overview1:51
Setting up the environment5:23
Hi, the source code is attached in this lecture.
To execute it, please:
1 - Download and extract the file
2 - Open the solution in VS22 and compile it
3 - Right click on the folder "ClientApp" > Select the option "Open in Terminal" > and execute the command "npm install"
4 - Wait until all node packages are downloaded and installed
5 - Open SQL Server and create the database and table (execute the script inside the folder "SQL")
6 - Run the application
GitHub Repository: https://github.com/VictorLins/AspNetCoreWithReact

Introduction to ASP.NET Core 62:42
The source code of this project can be found in the lecture "Setting up the environment"
Creating React ASP.NET Core project2:40
The source code of this project can be found in the lecture "Setting up the environment".
Exploring project structure and key files6:08
The source code of this project can be found in the lecture "Setting up the environment"
Dependency injection8:58
The source code of this project can be found in the lecture "Setting up the environment"
Custom middleware6:51
The source code of this project can be found in the lecture "Setting up the environment"

Introduction to Entity Framework Core2:57
The source code of this project can be found in the lecture "Setting up the environment"
Configuring Entity Framework in the project5:08
The source code of this project can be found in the lecture "Setting up the environment"
Installing SQL Server1:41
The source code of this project can be found in the lecture "Setting up the environment"
Creating database and tables2:17
The source code of this project can be found in the lecture "Setting up the environment"
Creating Library entity in the project10:36
The source code of this project can be found in the lecture "Setting up the environment"
Creating GET method8:25
The source code of this project can be found in the lecture "Setting up the environment"
Creating ADD method4:30
The source code of this project can be found in the lecture "Setting up the environment"
Creating UPDATE method4:57
The source code of this project can be found in the lecture "Setting up the environment"
Creating DELETE method2:42
The source code of this project can be found in the lecture "Setting up the environment"

Introduction to ASP.NET Core Web API3:08
The source code of this project can be found in the lecture "Setting up the environment"
Creating API controller and configuring Swagger7:48
The source code of this project can be found in the lecture "Setting up the environment"
Configuring GET method2:30
The source code of this project can be found in the lecture "Setting up the environment"
Configuring UPDATE method2:25
The source code of this project can be found in the lecture "Setting up the environment"
Configuring CREATE method2:11
The source code of this project can be found in the lecture "Setting up the environment"
Configuring DELETE method1:52
The source code of this project can be found in the lecture "Setting up the environment"

Introduction to React1:50
The source code of this project can be found in the lecture "Setting up the environment"
JSX2:04
The source code of this project can be found in the lecture "Setting up the environment"
Virtual DOM1:15
The source code of this project can be found in the lecture "Setting up the environment"
Component7:34
The source code of this project can be found in the lecture "Setting up the environment"
Props3:28
The source code of this project can be found in the lecture "Setting up the environment"
React Effect Hook and LifeCycle Methods3:41
The source code of this project can be found in the lecture "Setting up the environment"
State and Mutability4:56
The source code of this project can be found in the lecture "Setting up the environment"
Event Handling7:01
The source code of this project can be found in the lecture "Setting up the environment"
Conditional rendering7:46
The source code of this project can be found in the lecture "Setting up the environment"
Iterations5:31
The source code of this project can be found in the lecture "Setting up the environment"
Forms5:03
The source code of this project can be found in the lecture "Setting up the environment"
Refs5:17
The source code of this project can be found in the lecture "Setting up the environment"

Adding Axios and designing the page10:07
The source code of this project can be found in the lecture "Setting up the environment"
Cross-Origin Requests (CORS)4:02
The source code of this project can be found in the lecture "Setting up the environment"
Get item7:49
The source code of this project can be found in the lecture "Setting up the environment"
Update item14:16
The source code of this project can be found in the lecture "Setting up the environment"
Insert item7:52
The source code of this project can be found in the lecture "Setting up the environment"
Delete item3:20
The source code of this project can be found in the lecture "Setting up the environment"
Adding SweetAlert for notification6:36
The source code of this project can be found in the lecture "Setting up the environment"
Handling errors in the Front-End5:25
The source code of this project can be found in the lecture "Setting up the environment"

Requirements

Basic knowledge in C# and JavaScript

Description

In this course you will learn how to develop a complete functional application using ASP.NET Core 6, that connects to a database, allowing users to visualize, create, edit and delete elements directly from a friendly and well designed web page using React.js, one of the most powerful front-end libraries on the market.

At the end of this course, you will have sufficient knowledge to develop your own complete application using ASP.NET Core, React.js and Entity Framework Core connecting to a database.

Some of the topics that we will cover during this course:

• Setting up the environment

• Introduction to ASP.NET Core 6

• Dependency injection

• Custom middleware

• Introduction to Entity Framework Core

• Creating database and table in Microsoft SQL Server

• Designing CRUD operations in C# using Entity Framework Core

• Introduction to ASP.NET Core Web API

• Documenting our Web API using Swagger

• Introduction to React

• JSX

• Virtual DOM

• Component

• Props

• React Effect Hook

• State and Mutability

• Event Handling

• Conditional Rendering

• Cross-Origin Requests (CORS)

• Adding Axios to connect our front-end with our back-end

• Adding SweetAlert for notification

• Handling errors in the Front-End

In the last lecture, you will learn how you can deploy the solution that you've developed in IIS.

Who this course is for:

.NET developers who want to learn React js
React developers who want to learn .NET Core
Technology Enthusiasts
Technical Team Leader
Designers

ASP.NET Core and React - The Complete Guide

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 7min

ASP.NET Core 65 lectures • 27min

Entity Framework Core9 lectures • 43min

ASP.NET Core Web API6 lectures • 20min

React12 lectures • 55min

Connecting Front-End with Back-End8 lectures • 59min

Publishing in IIS1 lecture • 8min

Requirements

Description

Who this course is for: