We will need to use the following tools in this chapter:

• Visual Studio 2019: This can be downloaded and installed from https://visualstudio.microsoft.com/vs/. Make sure that the following features are selected in the installer:

  a) ASP.NET and web development

  b) Azure development

  c) Node.js development

• .NET 5.0: This can be downloaded from https://dotnet.microsoft.com/download/dotnet/5.0.
• Node.js and npm: These can be downloaded from https://nodejs.org/.

All the code snippets in this chapter can be found online at https://github.com/PacktPublishing/ASP.NET-Core-5-and-React-Second-Edition. 

Check out the following video to see the code in action: https://bit.ly/3riGWib.

In this section, we will start to understand the single-page application (SPA) architecture.

A SPA is a web app that loads a single HTML page that is dynamically updated by JavaScript as the user interacts with the app. Imagine a simple sign-up form where a user can enter a name and an email address. When the user fills out and submits the form, a whole page refresh doesn't occur. Instead, some JavaScript in the browser handles the form submission with an HTTP POST request and then updates the page with the result of the request. Refer to the following diagram:

Figure 1.1 – Form in a SPA

So, after the first HTTP request that returns the single HTML page, subsequent HTTP requests are only for data and not HTML markup. All the pages are rendered in the client's browser by JavaScript.

So, how are different pages with different URL paths handled? For example, if I enter https://qanda...

In this section, we are going to start by creating an ASP.NET Core and React app using the standard template in Visual Studio. This template is perfect for us to review and understand basic backend components in an ASP.NET Core SPA.

Once we have scaffolded the app using the Visual Studio template, we will inspect the ASP.NET Core code, starting from its entry point. During our inspection, we will learn how the request/response pipeline is configured and how requests to endpoints are handled.

Creating an ASP.NET Core and React templated app

Let's open Visual Studio and carry out the following steps to create our templated app:

1. In the start-up dialog, choose Create a new project:

   Figure 1.2 – Visual Studio start-up dialog

2. Next, choose ASP.NET Core Web Application in the wizard that opens and click the Next button:

   Figure 1.3 – Creating a new...

It's time to turn our attention to the React frontend. In this section, we'll inspect the frontend code, starting with the entry point, which is a single HTML page. We will explore how the frontend is executed in development mode and how it is built in preparation for deployment. We will then learn how the frontend dependencies are managed and also understand why it took over a minute to run the app for the first time. Finally, we will explore how React components fit together and how they access the ASP.NET Core backend.

Understanding the frontend entry point

We have a good clue as to where the entry point is from our examination of the Startup class in the ASP.NET Core backend. In the Configure method, the SPA middleware is set up with the source path set to ClientApp:

app.UseSpa(spa =>
{
  spa.Options.SourcePath = "ClientApp";
  if (env.IsDevelopment...

In this chapter, we started off by learning that all the pages in a SPA are rendered in JavaScript with the help of a framework such as React, along with requests for data. This is handled by a backend API with the help of a framework such as ASP.NET Core. We now understand that the Startup class configures services that are used in the ASP.NET Core backend, as well as the request/response pipeline. Requests to specific backend API resources are handled by controller classes.

We also saw how CRA was leveraged by the ASP.NET Core React template to create the React app. This tool did a huge amount of setup and configuration for us, including creating a development server, bundling, linting, and even creating key polyfills for IE. We learned that the React app lives in the ClientApp folder in an ASP.NET Core React templated project, with a file called index.html being the single page. A file called package.json ...

Have a go at answering the following questions to test the knowledge that you have acquired in this chapter:

1. What is the entry point method in an ASP.NET Core app?
2. What is the single HTML page filename in an ASP.NET Core React app that's created by a template? What folder is this located in?
3. What file are React app dependencies defined in?
4. What npm command will run the React app in the Webpack development server?
5. What npm command builds the React app so that it's ready for production?
6. What is the method name in a React class component that renders the component?
7. Have a look at the following code snippet, which configures the request/response pipeline in an ASP.NET Core app: 

   public void Configure(IApplicationBuilder app, IHostingEnvironment env)
   {
     app.UseAuthentication();
     app.UseHttpsRedirection();
     app.UseMvc();
   }

   Which is invoked first in the request/response pipeline...

1. A method called Main in the Program class is the entry point method in an ASP.NET Core app.
2. A file called index.html is the single HTML page filename. This is located in the public folder, which can be found in the ClientApp folder.
3. The React app dependencies are defined in a file called package.json in the ClientApp folder.
4. npm start is the command that will run the React app in the WebPack development server.
5. npm run build is the command that builds the React app so that it's ready for production.
6. The render method renders a React class component.
7. Authentication will be invoked first in the request/response pipeline.
8. We can give the Startup class a different name by defining this class in IHostBuilder, as shown in the following example:

   public static IHostBuilder CreateHostBuilder(string[] args) =>
     Host.CreateDefaultBuilder(args)
     ...

The following are some useful links so that you can learn more about the topics that were covered in this chapter:

• ASP.NET Core startup: https://docs.microsoft.com/en-us/aspnet/core/fundamentals/startup
• ASP.NET Core web API controllers: https://docs.microsoft.com/en-us/aspnet/core/web-api
• Create React app: https://facebook.github.io/create-react-app/
• WebPack development server: https://webpack.js.org/configuration/dev-server/
• npm: https://docs.npmjs.com/
• JSX: https://reactjs.org/docs/introducing-jsx.html
• JavaScript module import: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
• JavaScript module export: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
• JavaScript fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
• JavaScript array map: https://developer.mozilla.org/en-US/docs/Web/JavaScript...