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

32h 10m 45s
English
Paid

Course description

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.

Read more about the course

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.

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
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

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

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 292 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

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

0:00
/
#1: Course introduction

All Course Lessons (292)

#Lesson TitleDurationAccess
1
Course introduction Demo
06:45
2
Setting up the developer environment
05:38
3
VS Code extensions
06:00
4
Source code and Resources used on this course
01:58
5
Introduction
07:52
6
Creating the .Net projects and references
09:42
7
Changes to the .Net 6 hosting model
10:17
8
Reviewing the project files and startup
11:55
9
The API controller and using postman
06:07
10
Creating a domain entity
04:42
11
Adding an Entity Framework Db Context
13:42
12
Creating an Entity Framework code first migration
07:39
13
Creating the database
08:09
14
Seeding data to the Database
07:15
15
Adding an API controller
10:17
16
Saving changes into source control
07:35
17
Summary of Section 2
07:27
18
Introduction
03:31
19
Creating the React project
07:08
20
Reviewing the React project files
10:06
21
Why React?
02:47
22
React Components
07:34
23
Typescript concepts
07:10
24
Typescript demo
11:13
25
Using Typescript with React
11:04
26
React dev tools
03:36
27
Fetching data from the API
10:11
28
CORS Policy
05:00
29
Semantic UI React
13:21
30
Summary of section 3
04:49
31
Introduction
04:13
32
Clean Architecture
09:34
33
CQRS
04:01
34
Creating our first Query handler
09:41
35
Thin controllers in the API
03:48
36
Adding a Details handler
03:49
37
Adding a Create handler
09:12
38
Adding an Edit handler
06:53
39
Adding AutoMapper
06:23
40
Adding a Delete handler
06:13
41
Startup class housekeeping
05:35
42
Cancellation tokens
07:47
43
Using the debugger in VS Code
08:07
44
Summary of section 4
03:07
45
Introduction
02:44
46
Folder structure in React
05:35
47
Adding an Activity interface
06:42
48
Adding a Nav bar
04:38
49
Adding some style to the nav bar
08:05
50
Creating an activity dashboard
06:21
51
Creating an activity list
06:20
52
Creating a details view
09:06
53
Creating an Activity form
03:20
54
Selecting an activity to view
12:05
55
Displaying the create/edit form
09:33
56
Editing an activity and form basics in React
10:32
57
Handle create and edit submission
05:54
58
Using a GUID for the activity id
05:32
59
Deleting an activity
03:49
60
Summary of section 5
02:42
61
Introduction
02:29
62
Setting up axios
06:14
63
Axios types
07:02
64
Adding loading indicators
07:24
65
Posting data to the server
08:18
66
Deleting activity on the server
06:32
67
Summary of section 6
01:58
68
Introduction
02:24
69
What is MobX?
09:49
70
Setting up MobX
07:56
71
MobX actions
05:03
72
Refactoring the app to use MobX
07:53
73
MobX strict mode
04:49
74
Selecting an Activity using MobX
13:24
75
Creating an Activity using MobX
10:04
76
Deleting an activity using MobX
07:32
77
Using a Javascript map object to store the activities
08:54
78
Summary of section 7
03:05
79
Introduction
05:18
80
Installing React Router
04:24
81
Adding routes
06:06
82
Adding nav links
03:14
83
Adding a details link
03:37
84
Getting an individual activity
07:55
85
Using route parameters
07:39
86
Adding the edit activity route
10:37
87
Adding a key to the route
06:44
88
Redirect after submission
06:04
89
Moving the home page outside of nav
03:35
90
Cleaning up unused code
05:50
91
Summary of section 8
00:59
92
Introduction
02:41
93
Styling the activity list
05:18
94
Grouping the activities by date
08:14
95
Styling the list items
06:16
96
Activity details page
04:39
97
Populating the detailed components
06:36
98
Adding the activity filter component
07:41
99
Styling the home page
05:52
100
Summary of section 9
01:45
101
Introduction
07:20
102
Validation with data annotations
04:51
103
Fluent Validation
08:38
104
Handling API Error responses
06:11
105
Handling API Error responses part 2
08:59
106
Handling API Error responses part 3
05:17
107
Handling API Error responses part 4
07:25
108
Handling exceptions
12:44
109
Preparing for setting up error handling in the client app
07:43
110
Using an interceptor to handle API error responses
04:05
111
Adding a not found component
07:31
112
Handling 400 errors
08:03
113
Handling 500 errors on the client
08:34
114
Handling the validation error from an invalid GUID
06:46
115
Summary of section 10
04:07
116
Introduction
03:32
117
Setting up Formik
09:25
118
Formik with less code
04:29
119
Validation in Formik
05:55
120
Creating a reusable text input
09:42
121
Creating a reusable text area
01:40
122
Creating a reusable select input
06:57
123
Creating a reusable date input
09:42
124
The date strategy
06:22
125
Using Date-FNS
06:25
126
Hooking up the form submission to Formik
05:43
127
Summary of section 11
02:44
128
Introduction
08:54
129
Adding a user entity
05:21
130
Adding an IdentityDbContext
03:15
131
Configuring Identity in the Startup class
04:53
132
Adding seed users
06:22
133
Creating the user DTOs
04:22
134
Adding an account controller
08:39
135
JSON Web Tokens
07:23
136
Creating a token service
10:29
137
Authenticating to the app
07:20
138
Storing secrets in development
05:58
139
Creating an auth policy
02:54
140
Registering new users
04:34
141
Validating the registration of users
04:01
142
Getting the current user
04:55
143
Summary of section 12
04:18
144
Introduction
02:40
145
Creating a login form
06:13
146
Creating the interfaces and methods
03:40
147
Creating a user store
04:50
148
Displaying errors in the form
03:27
149
Setting the token upon login
04:29
150
Updating the home page and nav bar
08:10
151
Persisting the login
06:46
152
Sending up the token with the request
03:11
153
Adding Modals
08:43
154
Adding the register form
06:32
155
Handling validation errors in the register form
08:28
156
Summary of section 13
03:54
157
Introduction
09:05
158
Configuring the new relationship
09:32
159
Adding an infrastructure project
07:25
160
Updating the create activity handler
02:38
161
Testing the create activity
06:58
162
Loading related data
05:05
163
Shaping the related data
06:30
164
Configuring AutoMapper profiles
10:36
165
Adding the attendance handler
14:10
166
Adding a custom auth policy
10:59
167
Resolving the bug with with the edit handler
05:49
168
Updating the seed data
03:22
169
Summary of section 14
02:26
170
Introduction
02:11
171
Adding the attendees component
07:21
172
Updating the details component
03:47
173
Conditionally rendering the buttons
10:56
174
Adding the store methods to attend
09:41
175
Updating the create and edit methods
14:05
176
Adding a cancel activity method
07:40
177
Adding a popover for attendees
05:55
178
Summary of section 15
00:51
179
Introduction
05:48
180
Adding Cloudinary
07:45
181
Adding the Cloudinary interfaces
03:33
182
Adding the add photo logic
08:06
183
Adding the Photo entity
03:34
184
Adding the Add photo handler
06:04
185
Adding a photos controller
04:21
186
Deleting photos
09:19
187
Setting the main photo
06:21
188
Returning user profiles
06:59
189
Updating the mapping configuration
05:37
190
Returning an attendee DTO
07:10
191
Summary of section 16
02:13
192
Introduction
02:29
193
Creating a profile page
04:17
194
Adding a profile header
06:13
195
Adding the profile content
03:33
196
Getting the profile data
04:54
197
Getting the profile data part 2
04:32
198
Displaying the photos
05:55
199
Conditionally rendering the photo widget
06:02
200
Creating a photo upload widget
03:32
201
Adding a Dropzone
04:15
202
Styling the Dropzone
09:28
203
Adding a react cropper
14:10
204
Adding the photo upload method
11:01
205
Setting the main photo
08:14
206
Deleting photos
06:41
207
Summary of section 17
02:12
208
Challenge introduction
03:40
209
Introduction
06:47
210
Setting up the comment entity
06:14
211
Adding a comment DTO and mapping
02:39
212
Adding the create handler
06:00
213
Adding a list handler
04:16
214
Adding a SignalR Hub
09:44
215
Authenticating to SignalR
03:28
216
Adding SignalR to the client
09:54
217
Connecting to the hub
07:36
218
Sending comments
07:11
219
Adding validation and fix issues
05:27
220
Resolving UTC dates
10:59
221
Summary of section 19
03:35
222
Introduction
03:27
223
Adding a join entity
06:37
224
Adding a handler for following
06:17
225
Adding the controller
04:01
226
Update the profile class
02:42
227
Return a list of followers
11:27
228
Adding the following property to the mapping configuration
04:17
229
Updating the other handlers with the following property
07:25
230
Adding the UI for followers
05:05
231
Adding methods to follow and unfollow
11:14
232
Making the follow button a component
08:16
233
Getting a list of followings
10:05
234
Using MobX Reactions
01:31
235
Summary of section 20
05:12
236
Introduction
08:06
237
Adding a PagedList class
07:58
238
Adding application layer pagination logic
09:21
239
Adding a pagination header
08:08
240
Adding client side pagination
05:44
241
Adding pagination parameters
06:22
242
Adding vertical paging
05:24
243
Adding infinite scrolling
05:24
244
Adding filtering in the API
07:29
245
Client side filtering
04:22
246
Updating the filter component
04:21
247
Adding placeholders
05:45
248
Adding a user profile activities component + challenge
11:27
249
Challenge solution
01:28
250
Summary of section 21
01:28
251
Introduction
02:56
252
Adding Scroll to top for our routes
03:24
253
Adding private routes
07:24
254
Prepping the client app for production
07:07
255
Building the production build of the react app
07:07
256
Running the client app on the dotnet Kestrel server
06:16
257
Adding PostGresQL
04:24
258
Switching to PostGresQL
11:38
259
Setting up Heroku
09:18
260
Deploying the app to Heroku
09:37
261
Security tightening
09:03
262
Content security policies
12:06
263
End of course summary
04:18
264
Introduction
03:37
265
Setting up Facebook login
05:37
266
Connecting Heroku to GitHub
02:08
267
Adding the Facebook JS SDK
09:40
268
Configuring the API endpoint
10:36
269
Debugging the Facebook info
11:38
270
Facebook login finishing touches
07:35
271
Redeploying the app to Heroku
11:46
272
Introduction to Refresh Tokens
03:20
273
Adding the Refresh token domain entity
06:06
274
Updating the JWT token parameters
03:15
275
Updating the account controller
08:30
276
Testing in Postman
04:40
277
Client side configuration
10:00
278
Testing the refresh token in the client
05:54
279
Redeploying the app to Heroku
02:39
280
Introduction to Email verification
02:40
281
Setting up SendGrid
09:26
282
Require a confirmed email to sign in
07:32
283
Updating the register method
07:32
284
Adding the confirm email endpoint
04:58
285
Testing in Postman
03:46
286
Setting up the client for email confirmation
09:33
287
Adding a verify email component
08:14
288
Finishing up and testing
04:33
289
Redeploying the app to Heroku
07:18
290
Updating the project to use .Net 6
16:45
291
.Net 6 new features and how to update the project to use them
20:30
292
Updating the client packages
17:50

Unlock unlimited learning

Get instant access to all 291 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Microfrontends with React: A Complete Developer's Guide

Microfrontends with React: A Complete Developer's Guide

Sources: udemy, Stephen Grider
Congratulations! You've found the most popular, most complete, and most up-to-date resource online for learning how to use microfrontends! Thousands of other en
9 hours 2 minutes 34 seconds
Solidity & Ethereum in React (Next JS): The Complete Guide

Solidity & Ethereum in React (Next JS): The Complete Guide

Sources: udemy
Create real Smart Contracts in Solidity and DApps with React & Next JS. Understand how the Ethereum blockchain works.
38 hours 47 minutes 24 seconds
MERN React Node Next.js Multi User SEO Blogging Platform

MERN React Node Next.js Multi User SEO Blogging Platform

Sources: udemy
Master the Art of Building Real World SEO Web Applications using MERN (Mongo Express React Node) Stack. Become a true Web Developer with this Ultimate Project b
20 hours 25 minutes 13 seconds
React Redux Ecommerce - Master MERN Stack Web Development

React Redux Ecommerce - Master MERN Stack Web Development

Sources: udemy
Master MERN Stack Web Development building Ultimate E-commerce app with React Redux Ant Design Firebase NodeJs and MongoDB. This project will have almost all the features you wa...
43 hours 9 minutes 35 seconds