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 />

Rerun your app

Press CTRL+C on your command prompt to end the previous dotnet run command that is running the site locally.

Press CTRL+C on your terminal to end the previous dotnet run command that is running the site locally by pressing CTRL+C on your terminal.

Then, run the following command to re-launch the site:

Command prompt
dotnet run

Refresh the browser to see the change:

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

Continue