Blazor app Razor pages ComponentBase understanding

New to .net and I'm being thrown in the deep end with Blazor/Razor/etc.

I'm making changes to existing apps and building out some new pages in those apps and i am trying to get my head around all the basics in a short time frame.

I am trying to understand the workings of @inherits,I have copied in the example from the Microsoft docs.

I understand that the razor page is inheriting the BlazorRocksBase class where it will have access to the properties and methods in that class. But where does instantiation occur if it does actually occur? Is there a new BlazorRocksBase being created in the background? Or does the razor page instantiate a BlazorRocksBase when @inherits is used?

I hope this makes sense. I'm finding it difficult to find a lot of .net info in lay terms compared to JS.

@page "/blazor-rocks"
@inherits BlazorRocksBase

<h1>@BlazorRocksText</h1>

using Microsoft.AspNetCore.Components;

namespace BlazorSample;

public class BlazorRocksBase : ComponentBase
{
    public string BlazorRocksText { get; set; } =
        "Blazor rocks the browser!";
}

Attempted to find an answer for myself, with not much luck

Solution

First, Razor pages are compiled into C# classes that by default inherit from Componentbase. @inherits tells the compiler to set the generated class inheritance to the provided type. Note that class must implement IComponent.

Components are created and managed by the Renderer, not by you the coder.

You can add this to the project file to see the emitted class files in the /obj/Debug/netx/generated folder.

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
      <EmitCompilerGeneratedFiles>true</EmitCompilerGeneratedFiles>
  </PropertyGroup>

</Project>

See this article [of mine] which provides a detail look into components. https://www.codeproject.com/Articles/5277618/A-Dive-into-Blazor-Components