Blazor Tutorial - Build your first Blazor app

Add a component

Each of the .razor files defines a UI component that can be reused.

Open the Index.razor file in a text editor of your choice. The Index.razor file already exists and it was created when you ran the dotnet new command. It's located in the Pages folder inside the BlazorApp directory that was created earlier.

Add a Counter component to the app's homepage by adding a <Counter /> element at the end of the Index.razor file.

Pages/Index.razor
@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<Counter />

Once this change is saved, the dotnet watch run command will restart the app and refresh it in the browser so that the Counter component shows up on the Home page.

Once this change is saved, the dotnet watch run command will restart the app. Refresh the app in the browser to see the Counter component show up on the Home page.

The home page now contains a Counter that displays a count and button.

Continue