IIRF Online > Development > Web Development > ASP.NET Core > Complete guide to building an app with .Net Core and React
Complete guide to building an app with .Net Core and React by Udemy
The complete guide to building an app from start to finish using .Net 7.0, React 18 (with Typescript) and Mobx
Course Highlights
- 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
Skills you will learn!
Curriculum
4 Topics
Course introduction
Setting up the developer environment
VS Code extensions
Source code and Resources used on this course
12 Topics
Introduction
Creating the .Net projects and references
Reviewing the project files and startup
The API controller and using postman
Creating a domain entity
Adding an Entity Framework Db Context
Creating an Entity Framework code first migration
Creating the database
Seeding data to the Database
Adding an API controller
Saving changes into source control
Summary of Section 2
13 Topics
Introduction
Creating the React project
Reviewing the React project files
Why React?
React Components
Typescript concepts
Typescript demo
Using Typescript with React
React dev tools
Fetching data from the API
CORS Policy
Semantic UI React
Summary of section 3
14 Topics
Introduction
Clean Architecture
CQRS
Creating our first Query handler
Thin controllers in the API
Adding a Details handler
Adding a Create handler
Adding an Edit handler
Adding AutoMapper
Adding a Delete handler
Startup class housekeeping
Cancellation tokens
Using the debugger in VS Code
Summary of section 4
16 Topics
Introduction
Folder structure in React
Adding an Activity interface
Adding a Nav bar
Adding some style to the nav bar
Creating an activity dashboard
Creating an activity list
Creating a details view
Creating an Activity form
Selecting an activity to view
Displaying the create/edit form
Editing an activity and form basics in React
Handle create and edit submission
Using a GUID for the activity id
Deleting an activity
Summary of section 5
7 Topics
Introduction
Setting up axios
Axios types
Adding loading indicators
Posting data to the server
Deleting activity on the server
Summary of section 6
11 Topics
Introduction
What is MobX?
Setting up MobX
MobX actions
Refactoring the app to use MobX
MobX strict mode
Selecting an Activity using MobX
Creating an Activity using MobX
Deleting an activity using MobX
Using a Javascript map object to store the activities
Summary of section 7
13 Topics
Introduction
Installing React Router
Adding routes
Adding nav links
Adding a details link
Getting an individual activity
Using route parameters
Adding the edit activity route
Adding a key to the route
Redirect after submission
Moving the home page outside of nav
Cleaning up unused code
Summary of section 8
9 Topics
Introduction
Styling the activity list
Grouping the activities by date
Styling the list items
Activity details page
Populating the detailed components
Adding the activity filter component
Styling the home page
Summary of section 9
15 Topics
Introduction
Validation with data annotations
Fluent Validation
Handling API Error responses
Handling API Error responses part 2
Handling API Error responses part 3
Handling API Error responses part 4
Handling exceptions
Preparing for setting up error handling in the client app
Using an interceptor to handle API error responses
Adding a not found component
Handling 400 errors
Handling 500 errors on the client
Handling the validation error from an invalid GUID
Summary of section 10
12 Topics
Introduction
Setting up Formik
Formik with less code
Validation in Formik
Creating a reusable text input
Creating a reusable text area
Creating a reusable select input
Creating a reusable date input
The date strategy
Using Date-FNS
Hooking up the form submission to Formik
Summary of section 11
16 Topics
Introduction
Adding a user entity
Adding an IdentityDbContext
Configuring Identity in the Startup class
Adding seed users
Creating the user DTOs
Adding an account controller
JSON Web Tokens
Creating a token service
Authenticating to the app
Storing secrets in development
Creating an auth policy
Registering new users
Validating the registration of users
Getting the current user
Summary of section 12
13 Topics
Introduction
Creating a login form
Creating the interfaces and methods
Creating a user store
Displaying errors in the form
Setting the token upon login
Updating the home page and nav bar
Persisting the login
Sending up the token with the request
Adding Modals
Adding the register form
Handling validation errors in the register form
Summary of section 13
13 Topics
Introduction
Configuring the new relationship
Adding an infrastructure project
Updating the create activity handler
Testing the create activity
Loading related data
Shaping the related data
Configuring AutoMapper profiles
Adding the attendance handler
Adding a custom auth policy
Resolving the bug with with the edit handler
Updating the seed data
Summary of section 14
9 Topics
Introduction
Adding the attendees component
Updating the details component
Conditionally rendering the buttons
Adding the store methods to attend
Updating the create and edit methods
Adding a cancel activity method
Adding a popover for attendees
Summary of section 15
13 Topics
Introduction
Adding Cloudinary
Adding the Cloudinary interfaces
Adding the add photo logic
Adding the Photo entity
Adding the Add photo handler
Adding a photos controller
Deleting photos
Setting the main photo
Returning user profiles
Updating the mapping configuration
Returning an attendee DTO
Summary of section 16
16 Topics
Introduction
Creating a profile page
Adding a profile header
Adding the profile content
Getting the profile data
Getting the profile data part 2
Displaying the photos
Conditionally rendering the photo widget
Creating a photo upload widget
Adding a Dropzone
Styling the Dropzone
Adding a react cropper
Adding the photo upload method
Setting the main photo
Deleting photos
Summary of section 17
1 Topic
Challenge introduction
13 Topics
Introduction
Setting up the comment entity
Adding a comment DTO and mapping
Adding the create handler
Adding a list handler
Adding a SignalR Hub
Authenticating to SignalR
Adding SignalR to the client
Connecting to the hub
Sending comments
Adding validation and fix issues
Resolving UTC dates
Summary of section 19
14 Topics
Introduction
Adding a join entity
Adding a handler for following
Adding the controller
Update the profile class
Return a list of followers
Adding the following property to the mapping configuration
Updating the other handlers with the following property
Adding the UI for followers
Adding methods to follow and unfollow
Making the follow button a component
Getting a list of followings
Using MobX Reactions
Summary of section 20
15 Topics
Introduction
Adding a PagedList class
Adding application layer pagination logic
Adding a pagination header
Adding client side pagination
Adding pagination parameters
Adding vertical paging
Adding infinite scrolling
Adding filtering in the API
Client side filtering
Updating the filter component
Adding placeholders
Adding a user profile activities component + challenge
Challenge solution
Summary of section 21
15 Topics
Introduction
Adding Scroll to top for our routes
Adding private routes
Prepping the client app for production
Building the production build of the react app
Running the client app on the dotnet Kestrel server
Adding Sql Server
Configuring the app to use Sql Server
Setting up Azure
Creating an Azure Sql DB and connecting to our app
Continuous integration with Azure part 1
Continuous integration with Azure part 2
Security tightening
Content security policies
End of course summary
25 Topics
Introduction
Setting up Facebook login
Adding the Facebook JS SDK
Adding the client methods for FB Login
Configuring the API endpoint
Debugging the Facebook info
Redeploying the app to Flyio
Introduction to Refresh Tokens
Adding the Refresh token domain entity
Updating the JWT token parameters
Updating the account controller
Testing in Postman
Client side configuration
Testing the refresh token in the client
Redeploying the app to Flyio
Introduction to Email verification
Setting up SendGrid
Require a confirmed email to sign in
Updating the register method
Adding the confirm email endpoint
Testing in Postman
Setting up the client for email confirmation
Adding a verify email component
Finishing up and testing
Redeploying the app to Flyio
3 Topics
Updating the project to use .Net 6
.Net 6 new features and how to update the project to use them
Updating the client packages
4 Topics
Updating .Net to .Net 7.0
Updating to React 18
Updating to React Router 6
Fixing any typescript errors
3 Topics
Migrating to Vite.js
Updating the client packages to the latest versions
Fixing the stricter linting errors
12 Topics
What this section is for
Adding PostGresQL
Switching to PostGresQL
Deployment to flyio - Dockerise the app
Deployment to flyio - using fly launch to create deploy config
Deployment to flyio - updating the config to use docker postgres
Deploy to flyio - creating the config variables and secrets
Deployment to flyio - creating a github action
Deployment to flyio - Automatic deployment with github actions
Heroku no longer providing a free service
Setting up Heroku
Deploying the app to Heroku
1 Topic
Where to find the legacy content
Complete guide to building an app with .Net Core and React
Related ASP.NET Core Courses
Thank You!
Your review has been submitted successfully.