Chapter 1 - Understanding the ASP.NET Core React Template

Sep 19, 2026

Uploaded by Sarah

Chapter 1 explains how to start with the ASP.NET Core React project template in Visual Studio 2019. It walks through creating a new ASP.NET Core web application, listing available options such as gRPC, Blazor, Razor Class Library, Angular, React.js, and React.js with Redux, plus configuration choices like HTTPS and Docker. It then illustrates a running React-based single-page application, including the client app setup, navigation behavior, and integration with the development server. The chapter also shows debugging and diagnostic views such as browser network/console panels, request/response details, and a weather forecast example.

LanguageEnglish

CategoryPresentations

FormatPDF

Pages128

Reading Time45 min

AccessFree to download

Create a new ASP.NET Core Web Application

Choose project templates

Configure options (HTTPS, Docker)

Run and inspect the single-page React app

ClientApp setup and npm commands

Browser developer tools examples

# Chapter 1:Understanding the ASP.NET CoreReact Template # Visual Studio 2019 Open recent Clone or checkout code Get code from an online code repository like GitHubor Azure DevOps Open a project or solutionOpen a local Visual Studio project or .sln fileOpen a local folderNavigate and edit code within any folderCreate a new project Choose a project template with code scaffolding toget startedContinue without code × # Create a new ASP.NET Core Web Application .NET Core ASP.NET Core 3.0 A project template for creating a gRPC ASP.NET Core service. Authentication No Authentication Blazor(server-side) @ Change A project template for creating a Blazor application that runs server-side inside an ASP.NET Core application.This template can be used for web applications with rich dynamic user interfaces (Uls). Razor Class Library Advanced A project template for creating a Razor class library. ☑Configure for HTTPS □Enable Docker Suppot Angular A (Requires Docker Desktop) A project template for creating an ASP.NET Core application with Angular. Linux React.js A project template for creating an ASP.NET Core application with Reactjs. React.js and Redux A project template for creating an ASP.NET Core application with Reactjs and Redux. Get additional project templates Back Create | Home Counter Fetch data
WebApplication1 | | | --- | --- | | Hello,world! | | | Welcome to your new single-page application,built with: | | | ·ASP.NET Core and C\#for cross-platform server-side code | | | ·React for client-side code | | | ·Bootstrap for layout and styling | | | To help you get started,we have also set up: | | | ·Client-side navigation.For example,click Counter then Back to return here. | | | ·Development server integration.In development mode,the development server from create-react-app runs in the | | | background automatically,so your client-side resources are dynamically built on demand and the page refreshes when you | | | modify any file. | | | ·Efficient production builds.In production mode,development-time features are disabled,and your dotnet publish | | | configuration produces minified,efficiently bundled JavaScript files. | | | The ClientApp subdirectory is a standard React application based on the create-react-app template.If you open a command | | | prompt in that directory,you can run npm commands such as npm test or npm install. | | | Elements
Console
:×
Audits S
Memory Performance
Sources Network
Application ecurity React | | | | | | | | | | --- | --- | --- | --- | --- | --- | --- | --- | --- | | ◎
□ offne No thottling
□Preserve log Disable cache
View.:
7
口Group by frame | | | | | | | | | | AI
□Hide data URLs
Filter
XHR JS CSS Img Media Font Doc WS Manifest Other | | | | | | | | | | 10ms
20ms
30ms | 40ms | | 50m | s
60ms | 70ms | 80ms | 90ms | 100 ms
110 | | | | | | | | | | | | Name | | ×Headers Preview Response Timing | | | | | | | | □ weatherforecast | | v General
Request URL:https://localhost:44339/weatherforecast
Request Method:GET
Status Code:208
Remote Address:[::1]:44339
Referrer Policy:no-referrer-uhen-downgrade | | | | | | | | | | | | | | | | | | | | ▶Response Headers (5)
▶ Request Headers(2) | | | | | | | | 1 requests|553 B transferred|498 B resources | | | | | | | | | | WebApplication | | | Home Counter Fetch data | | | --- | --- | --- | --- | --- | | Weather forecast | | | | | | This component demonstrates fetching data from the server. | | | | | | Date | Temp.(C) | Temp.(F) | Summary | | | 2019-07-28T09:53:01.1336185+01:00 | 42 | 107 | Freezing | | | 2019-07-29T09:53:01.1336185+01:00 | -1 | 31 | Cool | | | 2019-07-30T09:53:01.1336185

FAQs

How do you create a new ASP.NET Core Web Application using the React template in Visual Studio 2019?

Use “Create a new project,” choose an ASP.NET Core React.js (or React.js and Redux) project template, and proceed with the wizard to generate the application.

What common template options are shown besides React?

The chapter lists templates such as gRPC, Blazor (server-side), Razor Class Library, and Angular, along with authentication choices like “Authentication” and “No Authentication.”

What is the purpose of the ClientApp subdirectory in the generated project?

It contains the React application based on the create-react-app template, where npm commands like npm test or npm install can be run from that directory.

Sep 19, 2026

Uploaded by Sarah