Introduction and course audience

Welcome to an exciting opportunity to enhance your web development skills! If you're a web developer aiming to excel in full-stack web application development, this course on .NET Core and React is tailor-made for you. Whether or not you have prior knowledge of React, this comprehensive course will equip you with the necessary tools and concepts to thrive in the modern web development landscape. Get ready to embark on a rewarding journey of learning and growth!

What this course covers

Embark on an insightful journey through these chapters as follows:

Getting Started

This chapter starts with the React Template, which covers the standard SPA template that Visual Studio offers for ASP.NET Core and React apps. Moreover, It covers the programmatic entry points for both the frontend and backend and how they work together in the Visual Studio solution. Further, we will proceed with steps through how we can create an up-to-date ASP.NET Core and React solution. This chapter also includes the use of TypeScript, which is hugely beneficial when creating large and complex frontends.

Building a Frontend with React and TypeScript

This chapter covers the fundamentals of React, such as JSX, props, state, and events, including how to create strongly typed components with TypeScript. Additionally, it addresses different approaches to styling React components using plain CSS and then CSS modules before covering CSS-in-JS. Furthermore, it introduces a library that enables apps with multiple pages to be efficiently created. It shelters how to declare all the routes in an app and how this maps to React components, including routes with parameters. It also covers how to load the components from a route on demand in order to optimize performance.

In addition, this section also encompasses how to build forms in React and how to build a form in plain React before leveraging a popular third-party library to make the process of building forms more efficient. Likewise, it also portrays the picture of how this popular library can help manage the state across an app. A strongly typed Redux store is built along with actions and reducers with the help of TypeScript.

Building an ASP.NET Backend

This section introduces a library that enables us to interact with SQL Server databases in a performant manner. Both reading and writing to a database are covered, including mapping SQL parameters from a C# class and mapping results to C# classes. Afterwards, it includes how to create a REST API that interacts with a data repository. Along the way, dependency injection, model binding, and model validation are covered.

Moreover, it explores several ways of improving the performance and scalability of the backend, including reducing database round trips, making APIs asynchronous, and data caching. Along the way, several tools are used to measure the impact of improvements. Over and above that, it leverages ASP.NET identity along with JSON web tokens in order to add authentication to an ASP.NET Core backend that covers the protection of REST API endpoints with the use of standard and custom authorization policies.

The end of this section touches on how a React frontend can talk to an ASP.NET Core backend using the JavaScript fetch function. It also embraces how a React frontend can gain access to protected REST API endpoints with a JSON web token.

Moving into Production

This section involves how to create unit tests and integration tests on the ASP.NET Core backend using xUnit. Covering how to create tests on pure JavaScript functions as well as React components using Jest. Furthermore, it extends to Azure and then steps through deploying both the backend and frontend to separate Azure app services, covering the deployment of a SQL Server database to SQL Azure. The end of this section introduces Azure DevOps before stepping through creating a build pipeline that automatically triggers when code is pushed to a source code repository by setting up a release pipeline that deploys the artifacts from the build into Azure.

Prerequisites

To get the most out of this course, you need to know the basics of C#, including the following:

  • An understanding of how to create variables and reference them, including arrays and objects.

  • An understanding of how to create classes and use them.

  • An understanding of how to create conditional statements with the if and else keywords.

You need to know the basics of JavaScript, including the following:

  • An understanding of how to create variables and reference them, including arrays and objects.

  • An understanding of how to create functions and call them.

  • An understanding of how to create conditional statements with the if and else keywords.

You need to know the basics of HTML, including the following:

  • An understanding of basic HTML tags, such as div, ul, p, a, h1, and h2, and how to compose them together to create a web page.

  • An understanding of how to reference a CSS class to style an HTML element.

You need an understanding of basic CSS, including the following:

  • How to size elements and include margins and padding.

  • How to position elements.

  • How to color elements.

An understanding of basic SQL would be helpful but is not essential.

Learning outcomes

In this course, you will learn the following:

  • Setting up an ASP.NET project.

  • Developing the project structure of ASP.NET.

  • Building a frontend using React.

  • Creating decoupled React and ASP.NET apps.

  • Building a frontend with React and TypeScript.

  • Building an ASP.NET backend.

  • Moving into production.

  • Creating JSON Web APIs.

By the end of the course, you will have an understanding of creating and deploying your .NET and React web applications.