Component Basics

Creating Components

Components are created as Razor files (.razor) that combine HTML markup with C# code.

@* MyComponent.razor *@
<div class="my-component">
    <h2>@Title</h2>
    <p>@ChildContent</p>
</div>

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

    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

Using Components

Components can be used in other components or pages using HTML-like syntax.

<MyComponent Title="Hello World">
    <p>This is child content.</p>
</MyComponent>

Component Naming

• Must start with an uppercase letter
• Usually end with .razor extension
• Follow Pascal case naming convention
• Should be meaningful and descriptive

Component Location

Components can be organized in different ways:

• In the Pages folder for routable components
• In the Shared folder for reusable components
• In feature-specific folders for domain components
• In separate class libraries for shared components