Creating Components in Blazor

What is a Component?

A Blazor component is a reusable piece of UI written in a .razor file. Each component contains:

• HTML markup
• Razor syntax (for C# logic)
• @code block for data and behavior

Basic Component Example

Here’s a simple counter component:

<h3>Counter</h3>
<p>Current count: @count</p>

<button class="btn btn-primary" @onclick="Increment">Click Me</button>

@code {
    int count = 0;

    void Increment()
    {
        count++;
    }
}

Using a Component in Another Component

Assuming you saved the above as Counter.razor, you can use it in other components like this:

<Counter />

Component Parameters

Use the [Parameter] attribute to pass data into a component:

<Greeting Name="Alice" />

// Greeting.razor
<p>Hello, @Name!</p>

@code {
    [Parameter]
    public string Name { get; set; }
}

Component Lifecycle

Override these methods for logic tied to the component lifecycle:

• OnInitialized() – runs when the component is initialized
• OnParametersSet() – runs when parameters are set
• OnAfterRender() – runs after the component has rendered

Components make Blazor apps modular and maintainable. In the next lesson, you’ll learn how to bind data to your components and handle user events dynamically.