Complete guide to building an app with .Net Core and React
4.7 (1,862 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
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
4.7 (1,862 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
9,808 students enrolled
Created by Neil Cummings
Last updated 5/2020
English
English [Auto], French [Auto]
Current price: $132.99 Original price: $189.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 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
Course content
Expand all 328 lectures 36:43:20
+ 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
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
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
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
+ Axios
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
+ MobX
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
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