Complete guide to building an app with .Net Core and React

9,814 students enrolled

Complete guide to building an app with .Net Core and React

The complete guide to building an app from start to finish using ASP.NET Core, React (with Typescript) and Mobx

Bestseller

9,808 students enrolled

Created by Neil Cummings

Last updated 5/2020

English

English [Auto], French [Auto]

Preview this course

Complete guide to building an app with .Net Core and React

$132.99 $189.99 30% off

5 hours left at this price!

30-Day Money-Back Guarantee

36.5 hours on-demand video
4 downloadable resources
Full lifetime access
Access on mobile and TV

Certificate of Completion

Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business

What you'll learn

Learn how to build an application from start to publishing with .Net Core (v2.2), React (with Typescript) and Mobx
How to build a Web API in .Net Core with Clean Architecture using the CQRS + Mediator pattern
How to use AutoMapper and MediatR packages in the .Net projects
How to build a multi-project solution with .Net Core
How to use Entity Framework Core as the Object Relational Mapper
How to integrate ASPNET Core SignalR into an application for real time web communication
How to add Identity and Authentication using .Net Core Identity
How to build a Client side application for the API with React
How to use MobX as a state management library
How to build our own Photo upload widget with a Dropzone and a Cropper to resize images

+ – Introduction

4 lectures 24:51

Course Introduction

Preview 05:58

Setting up the dev environment

Preview 07:37

Visual Studio Code extensions

08:42

Source code and resources for this course

Preview 02:34

+ – Walking Skeleton Part 1 - API

14 lectures 01:39:14

Section 2 introduction

05:38

Creating the ASP.NET Core solutions and projects using the DotNet CLI

07:32

Creating the project references using the DotNet CLI

Preview 05:30

Reviewing the Project files

15:27

Running the application

07:45

Creating a Domain entity

02:40

Creating the DbContext and service

10:12

Adding our first Entity Framework code first migration

05:52

Creating the database

07:25

Seeding data using Entity Framework fluent configuration

Preview 05:06

Using Dependancy Injection

08:54

Introduction to Postman

03:07

Saving our changes into Source control using Git

07:29

Section 2 summary

06:37

+ – Walking Skeleton Part 2 - Client

16 lectures 01:28:41

Section 3 introduction

01:12

Using create-react-app to create our React application

04:17

Reviewing the React project files

07:13

Introduction to React - Concepts

04:52

Introduction to React - Components

04:57

Introduction to Typescript

04:31

Typescript basics demo

09:02

Using Typescript with React

11:10

Adding React dev tools

04:25

React Class Components

03:20

Using React State

05:24

Fetching data from the API

07:42

Adding CORS support to the API

05:40

Adding Semantic UI to our app

07:47

Clean up and saving our code to source control

03:57

Summary of section 3

03:12

+ – Building a CRUD application in .Net Core using the CQRS + Mediator pattern

14 lectures 01:40:46

Section 4 introduction

02:42

Adding the Activity entity

06:28

Seeding Activity data

08:13

Commands and Queries - CQRS

07:12

Introduction to MediatR

04:49

Creating our first Query handler

07:19

Creating the Activities API Controller

Preview 09:31

Adding the Details Handler

06:49

Cancellation Tokens

09:55

Adding the Create handler

12:18

Dealing with boilerplate code in our handlers

05:45

Adding an Edit handler

10:26

Adding a Delete handler

07:24

Summary of section 4

01:55

+ – Building a CRUD application in React

21 lectures 02:28:08

Section 5 introduction

02:58

Introduction to React Hooks

07:02

Folder structure in React

05:00

Getting a list of activities from the API

02:34

Adding an Activity interface in Typescript

08:25

Refactoring our class component to use React Hooks

11:25

Adding the Navigation bar

08:17

Styling React components

06:52

Adding the Activity Dashboard

05:25

Creating the Activity List

08:02

Adding the Activity Details component

04:42

Adding the Activity Form component

04:21

Selecting an individual Activity

13:57

Adding an edit mode to display the form

04:07

Adding a create activity mode

07:50

Initialising the form with data

07:50

Controlled components in React

10:53

Handling form submission

14:18

Fixing issues with the dates in the form

07:28

Adding the delete functionality

05:18

Summary of section 5

01:24

9 lectures 43:27

Section 6 introduction

03:10

Setting up the agent.ts file

07:16

Listing our activities

03:45

Updating an Activity

05:09

Adding a delay to our API methods

03:44

Adding a loading component

05:00

Adding a loading indicator for submitting data

05:14

Isolating the loading indicator on the delete button

09:18

Summary of section 6

00:51

15 lectures 01:48:49

Section 7 introduction

01:51

Introduction to MobX

09:49

Setting up a MobX store

09:33

Refactoring the activity list to use the store

13:20

Refactoring the select activity function

13:59

Using Async Await in our methods

06:22

Refactoring the create activity method

08:21

MobX computed properties

03:48

Using an Observable Map

04:55

Adding the edit activity action

11:27

Adding the delete activity action

05:44

Cleaning up our code

02:53

Enabling MobX strict mode

10:27

Adding MobX dev tools

04:25

Summary of section 7

01:55

+ – React Router

15 lectures 01:32:02

Section 8 introduction

02:56

Setting up React Router

04:20

Setting up our Routes

04:48

Adding Links and NavLinks

04:20

Adding the Details link

02:23

Getting an Activity from the API

09:09

Using Route params

09:48

Navigating via code

03:21

Routing to the edit form

10:05

Using a Fully Uncontrolled Component with a key to reset component state

12:48

Navigating after submission

09:14

Moving the home page outside of our navigation routes

04:08

Scrolling to the top of the page on navigation

04:30

More code clean up

09:39

Summary of section 8

00:33

+ – Adding some style

11 lectures 48:24

Section 9 introduction

01:30

Styling the activity list

04:50

Grouping activities by date

14:41

Styling the activity list items

05:48

Creating the Activity Details page

03:34

Styling the Activity Detailed Page Header

07:24

Styling the Activity Detailed Info

02:22

Styling the Activity Detailed Chat and Sidebar components

03:00

Styling the Activity Form

02:02

Styling the Home page

02:41

Section 9 summary

00:32

+ – Error handling and validation

16 lectures 01:37:48

Section 10 introduction

02:39

Introduction to validation in the API

02:43

Adding validation in the API using Data Annotations

10:39

Adding validation in the API using Fluent Validation

13:10

Error handling concepts in our application

06:18

Error handling strategy

05:40

Creating a derived Exception class for Rest exceptions

05:26

Adding Error handling middleware

09:12

Using our Error handling middleware

05:05

Using Axios interceptors to catch errors

06:55

Throwing errors in the client

06:10

Adding routing functionality to Axios

05:47

Handling an invalid GUID on a get request

04:27

Adding toast notifications

06:33

Handling network errors in Axios

05:31

Summary of section 10

01:33

14 more sections

Requirements

Some development experience required (3 -6 months)
A computer with Mac OSX, Windows or Linux installed
A passion for learning how to build web applications

Description

***Course has now been updated for .Net Core 3.0***

Have you learnt the basics of ASP.NET Core and React? Not sure where to go next? This course should be able to help with that. In this course we learn how to build a multi-project ASP.NET Core solution that is built using Clean Architecture and the CQRS and Mediator pattern that makes our code easy to understand, reason about and extend.

Both ASP.NET Core and React are hot topics and this course will enhance your knowledge of both, simply by building an application from start to finish. In each module we learn something new, whilst incrementally adding features to the application. Building an application is significantly more rewarding than building yet another Todo List from the documentation!

Every line of code is demonstrated and explained and by the end of this course you will have the skills and knowledge to build your own application using the techniques taught in this course.

Here are some of the things you will learn about in this course:

Setting up the developer environment
Creating a multi-project solution using the the ASP.NET Core WebAPI and the React app using the DotNet CLI and the create-react-app utility.
Clean Architecture and the CQRS + Mediator pattern
Setting up and configuring ASP.NET Core identity for authentication
Using React with Typescript
Adding a Client side login and register function to our React application
Using React Router
Using AutoMapper in ASP.NET Core
Building a great looking UI using Semantic UI
Adding Photo Upload widget and creating user profile pages
Using React Final Form to create re-usable form inputs with validation
Paging, Sorting and Filtering
Using SignalR to enable real time web communication to a chat feature in our app
Publishing the application to both IIS and Linux
Getting an ‘A’ rating for security from a well known security scanning site.
Many more things as well

Tools you need for this course

In this course all the lessons are demonstrated using Visual Studio Code, a free (and fantastic) cross platform code editor. You can of course use any code editor you like and any Operating system you like... as long as it's Windows, Linux or Mac

Is this course for you?

This course is very practical, about 90%+ of the lessons will involve you coding along with me on this project. If you are the type of person who gets the most out of learning by doing, then this course is definitely for you.

On this course we will build an example social network application that allows users to sign up to events (similar to MeetUp or Facebook), completely from scratch. All we start with is an empty terminal window or command prompt.

All you will need to get started is a computer with your favourite operating system, and a passion for learning how to build an application using ASP.NET Core and React

Who this course is for:

Beginners to .Net Core or React or Typescript who want to learn how to build something with these tools
Students who prefer the practical approach to learning rather than learning by theory

Featured review

Stefan Jarina ( 142 courses, 17 reviews )

6 months ago

In general I really enjoyed the course. The course itself is just perfect. Instructor is one of the best on Udemy. Also I appreciate a lot the use of Typescript. I did not enjoy React though (JSX/TSX is just not for me), so I can say now that I'm gonna stay with Angular and Vue.js. I also didn't particularly like the Mediator style of separation (like more the standard repository approach), but this is more of a personal taste. All and all, I can definitely recommend this course.