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

Course has now been refreshed for .Net 7.0, React 18 and React Router v6

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

What's inside

Learning objectives

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

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

Syllabus

Introduction

Course introduction

Setting up the developer environment

VS Code extensions

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Covers .Net Core and React, which are in-demand technologies for building modern web applications, making it highly relevant for those seeking employment in the field

Explores Clean Architecture and the CQRS + Mediator pattern, which are valuable for building maintainable and scalable applications, and are useful for professional development

Teaches how to integrate ASP.NET Core Identity for authentication, which is a crucial aspect of securing web applications and protecting user data, and is useful for professional development

Utilizes React with Typescript, which enhances code quality and maintainability, and is a valuable skill for front-end developers looking to improve their proficiency

Demonstrates publishing the application to both IIS and Linux, which is essential for deploying web applications to different environments, and is useful for professional development

Refreshed for .Net 7.0 and React 18, but learners should be aware that newer versions of both .Net and React may be available by the time they complete the course

Reviews summary

Hands-on .net core react project

According to learners, this course offers a highly practical, hands-on approach to building a full-stack application using .Net Core and React. Students particularly praise the focus on Clean Architecture and CQRS/Mediator patterns, noting that the instructor provides clear explanations and excellent guidance throughout the development process. Many feel the course is very comprehensive, covering everything from setup to deployment and demonstrating real-world best practices. While the course requires some basic knowledge of the technologies, those with the prerequisites find the content easy to follow and the projects engaging. The course has been recently updated, which reviewers appreciate.

Uses Semantic UI, which some may replace.

"The UI is built using Semantic UI, which works fine but I might swap out for Bootstrap or Tailwind CSS in my own projects."

"While Semantic UI is used, the principles taught are transferable to other UI libraries."

"Learned how to style with Semantic UI, though the focus isn't heavily on advanced CSS or UI design."

Instructor keeps the course up-to-date.

"Appreciate that the course is refreshed for .Net 7.0, React 18."

"The updates to recent versions make the course highly relevant."

"It's great to see an instructor actively maintaining and updating the content."

Covers a wide range of necessary topics.

"From setting up the environment to deployment, the course covers the full development lifecycle."

"The course covers many important topics like SignalR, Identity, photo uploads, deployment, which are often missed."

"This is truly a complete guide; it doesn't skip over important steps or technologies."

Instructor explains complex topics well.

"The instructor has a very clear and concise way of explaining complex topics."

"Every line of code was demonstrated and explained thoroughly, which was extremely helpful."

"I found the explanations easy to follow, even when covering advanced concepts."

Teaches valuable modern architectural patterns.

"The use of Clean Architecture and CQRS/Mediator pattern is a major highlight, making the code maintainable."

"I appreciated the detailed explanation of CQRS and Mediator; it changed how I think about application design."

"Finally, a course that doesn't just show CRUD but structures it using industry best practices like Clean Architecture."

Strong emphasis on building a real application.

"I really enjoyed how the course was structured around building a real application rather than just isolated examples."

"The hands-on coding and projects are the strongest part of the course for me, very practical."

"Learning by doing with a large project is exactly what I needed after grasping the basics."

"Building the social network clone from scratch was an excellent way to solidify concepts."

Assumes learners have prerequisites.

"As stated, this course assumes you know the basics of .Net Core and React. It moves quickly if you don't."

"Definitely not for absolute beginners; make sure you have the prerequisites down first."

"The pace is good if you meet the requirements, but could be challenging otherwise."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Complete guide to building an app with .Net Core and React with these activities:

Review React Fundamentals

Show steps

Solidify your understanding of React fundamentals before diving into the course. This will make it easier to grasp the more advanced concepts covered.

Show steps

Review the official React documentation on components, state, and props.
Complete a basic React tutorial, such as building a simple to-do list application.
Practice creating and using React components with different types of data.

Brush Up on .NET Core Basics

Show steps

Ensure you have a solid foundation in .NET Core before starting the course. This will help you understand the backend architecture and API development aspects.

Browse courses on .NET

Show steps

Review the basics of C# syntax and .NET Core project structure.
Practice creating simple .NET Core console applications and Web APIs.
Familiarize yourself with dependency injection and configuration in .NET Core.

Review 'Pro ASP.NET Core 6'

Show steps

Use this book as a reference to deepen your understanding of ASP.NET Core concepts as you progress through the course. It can help clarify complex topics and provide alternative perspectives.

View Pro ASP.NET Core 7, Tenth Edition on Amazon

Show steps

Read relevant chapters of 'Pro ASP.NET Core 6' as you encounter corresponding topics in the course.
Use the book to explore alternative approaches to solving problems encountered in the course project.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Follow React Router v6 Tutorials

Show steps

Practice implementing React Router v6 through online tutorials. This will reinforce your understanding of routing and navigation in React applications.

Show steps

Find and follow tutorials that demonstrate different routing scenarios with React Router v6.
Implement routing in your own practice React application.
Experiment with nested routes, dynamic segments, and programmatic navigation.

Build a Simple CRUD App with .NET Core and React

Show steps

Apply the concepts learned in the course by building your own CRUD application. This will solidify your understanding of both .NET Core and React and how they work together.

Show steps

Design a simple data model for your application.
Create a .NET Core Web API to handle CRUD operations for your data model.
Build a React frontend to interact with your API.
Implement features for creating, reading, updating, and deleting data.

Write a Blog Post on Clean Architecture with .NET Core

Show steps

Explain the principles of Clean Architecture and how to implement them in a .NET Core application. This will deepen your understanding of architectural patterns and best practices.

Show steps

Research Clean Architecture principles and their benefits.
Create a sample .NET Core project that demonstrates Clean Architecture.
Write a blog post explaining the architecture and the code.
Publish your blog post on a platform like Medium or Dev.to.

Review 'Learning React, 2nd Edition'

Show steps

Use this book to reinforce your understanding of React concepts and explore different approaches to building React applications.

View Learning React: Modern Patterns for Developing... on Amazon

Show steps

Read relevant chapters of 'Learning React' to reinforce concepts covered in the course.
Work through the examples in the book to practice your React skills.

Career center

Learners who complete Complete guide to building an app with .Net Core and React will develop knowledge and skills that may be useful to these careers:

Web Application Developer

The role of a Web Application Developer is to create interactive websites and applications. This course is highly beneficial to a web application developer due to its emphasis on building a complete web application using ASP.NET Core and React. The course provides hands-on experience with front-end development using React with TypeScript and back-end development using .NET Core. As a web application developer, mastery of these technologies is a key advantage. This course's focus on creating a multi-project solution, implementing clean architecture, and applying the CQRS and Mediator patterns offers a sound foundation for developing complex web applications.

See salaries and explore the career path for Web Application Developer

Full-Stack Developer

A Full Stack Developer designs and builds both the front-end and back-end of web applications. This course directly addresses the skills needed for this role by focusing on both the ASP.NET Core back-end and the React front-end. A full stack developer will find this course invaluable as it provides practice with the technologies and patterns used in modern web development. The course covers multi-project solutions, clean architecture, CQRS, and Mediator pattern, all crucial for building scalable applications. Experience with authentication, data handling, and building a user interface, as provided by this course, is also vital for the full stack developer.

See salaries and explore the career path for Full-Stack Developer

Web Developer

A Web Developer creates websites and web applications, and this course provides a lot of the key skills needed for success. This course teaches web development using both ASP.NET Core and React. It covers how to build a complete web application, from setting up the development environment to publishing the final product. The course emphasizes building a functional and interactive user interface, handling data, and enabling real-time communication. A web developer will find that these skills are directly applicable to their work.

See salaries and explore the career path for Web Developer

Software Engineer

A Software Engineer applies engineering principles to the design, development, and maintenance of software systems. This course is designed to help an aspiring software engineer build expertise in full-stack development with .NET Core and React. By using clean architecture, CQRS, and the Mediator pattern, it guides learners to build maintainable, scalable code. The course's focus on building a full application, rather than isolated components, provides a practical approach to software development. As a software engineer, understanding the entire development process from setting up the environment to publishing the application is essential. The coverage of authentication, real-time communication, and UI design further enhances the skill set of a software engineer.

See salaries and explore the career path for Software Engineer

Software Developer

A Software Developer is responsible for writing, testing, and maintaining software, and this course may be helpful to those interested in a career in software development. This course presents an opportunity to build an application from start to finish with .NET Core and React. The course focuses on practical skills such as setting up the developer environment, creating a multi-project solution, and implementing clean architecture, as well as the CQRS and Mediator pattern. As a software developer, these skills are invaluable for writing maintainable and scalable code.

See salaries and explore the career path for Software Developer

Application Developer

An Application Developer designs, builds, and maintains software applications, and this course may be useful in the development of these skills. By working with ASP.NET Core and React, a learner gains experience in front-end and back-end development. The course focuses on creating a complete application, which mirrors a typical development project. The course provides guidance on building multi-project solutions, handling authentication, managing data, and integrating real-time communication. An application developer will likely find these skills essential.

See salaries and explore the career path for Application Developer

Application Engineer

An Application Engineer applies engineering principles to design, develop, and maintain software applications, and this course may be of use to an application engineer. The course content concentrates on building a full application with .NET Core and React. The course teaches how to build multi-project solutions and implement the CQRS and Mediator patterns. An application engineer will find these skills useful for designing and implementing scalable applications. Gaining experience with the full development cycle is also important for an application engineer.

See salaries and explore the career path for Application Engineer

Back-End Developer

Back End Developers are responsible for the server-side logic of web applications, and this course helps prepare one with knowledge of .NET Core. The course teaches how to create a multi-project ASP.NET Core solution with Clean Architecture and the CQRS and Mediator pattern. The back end developer will gain expertise in API development, user authentication, data persistence, and real-time communication using SignalR. The course emphasizes building a complete application, which is more representative of a back end developer's typical experience. It is important for a back end developer to understand the interactions with a front end, and this course can be of assistance in making that connection.

See salaries and explore the career path for Back-End Developer

Front-End Developer

A Front End Developer creates the user-facing parts of a web application. This course is very beneficial for those interested in this role, because it includes significant hands-on experience using React with Typescript. The course teaches critical aspects of React development, such as building components, managing state with MobX, and using React Router for navigation. A front-end developer should understand the importance of user interface and user experience design, and this course presents practical experience building a UI with Semantic UI. This course may be particularly insightful in how to connect the front end to the back end.

See salaries and explore the career path for Front-End Developer

UI Developer

A UI Developer focuses on creating user interfaces for web applications, and this course may be beneficial in the development of these skills. The course involves using React with TypeScript to build user interfaces and emphasizes building a visually appealing UI with Semantic UI. A UI developer will benefit from the practical experience with React components, state management using MobX, and routing with React Router. The course provides the experience of creating form inputs with validation, implementing photo uploads, and building user profile pages.

See salaries and explore the career path for UI Developer

API Developer

An API Developer is responsible for designing and building application programming interfaces, and this course will be helpful in this area. This course has a focus on building a Web API in .NET Core with Clean Architecture, CQRS, and the Mediator pattern. An API developer will find this course particularly beneficial for learning how to create secure, well-structured APIs. The course teaches how to handle authentication, manage data, and connect the API to a client application. The experience with API development in this course is highly relevant for an API developer.

See salaries and explore the career path for API Developer

Technical Lead

A Technical Lead guides and mentors a development team, and this course may be useful to a technical lead. The course covers best practices in software development, including using clean architecture, CQRS, and the Mediator pattern. It also gives experience in building a full application with .NET Core and React. A technical lead will find this course valuable for understanding the full development process and the practical application of architectural patterns. The course may help a technical lead guide their team more effectively. Note that this role typically requires several years of experience in software development.

See salaries and explore the career path for Technical Lead

Solutions Architect

A Solutions Architect designs and implements solutions to address complex business problems. This course may be of use to a solutions architect, as it teaches the development of a complete application using modern technologies. It covers essential technologies, such as ASP.NET Core for back-end logic and React for the front-end, and architectural patterns, including Clean Architecture and CQRS. A solutions architect will find the insights on building multi-project solutions and integrating various technologies valuable. Understanding the full development cycle, including deployment, may be a benefit to a solutions architect. Note that this role typically requires a master's degree or a PhD.

See salaries and explore the career path for Solutions Architect

Software Architect

A Software Architect is responsible for the high-level design and implementation of software systems. This course can be beneficial to a software architect, as it teaches best practices in building scalable and maintainable applications. The course covers crucial architectural patterns such as Clean Architecture, CQRS, and the Mediator pattern that are of interest to a software architect. It provides practical experience in building a multi-project solution, which is a common task a software architect will need to master. Note that this role often requires a master's degree or a PhD.

See salaries and explore the career path for Software Architect

Platform Engineer

A Platform Engineer designs and maintains the systems and infrastructure that software applications run on. This course may be useful in that it offers practical experience building and deploying web applications. Although the role is more infrastructure-focused, an understanding of the full application development cycle can improve the platform engineer's perspective. The course illustrates best practices around building multi-project solutions using modern web technologies. A platform engineer will find the experience with .NET Core, React, and deployment processes beneficial. Note that this role may require experience or an advanced degree such as a master's.

See salaries and explore the career path for Platform Engineer

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

What's inside

Learning objectives

Syllabus

Traffic lights

Save this course

Reviews summary

Hands-on .net core react project

Activities

Career center

Reading list

Share

Similar courses