Razor Components are the fundamental building blocks of every Blazor application. Each component combines HTML markup, C# logic, and optional CSS in a single .razor file.

Anatomy of a Component

@page "/counter"

<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;
    private void IncrementCount() { currentCount++; }
}

Key Sections

• @page — optional route directive; makes the component navigable
• HTML markup — standard HTML with Razor expressions (@variable)
• @code block — C# fields, properties, and methods

Naming Rules

• File names must start with an uppercase letter: Counter.razor
• Use the component in markup by its class name: <Counter />

Component Reuse

Components are composable — nest them inside other components freely. Each maintains its own state and lifecycle.

Reference:

Wikipedia: Razor

https://en.wikipedia.org/wiki/Blazor