Build your first web app with ASP.NET Core using Blazor

Add a component

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

Open the Home.razor file in Visual Studio. The Home.razor file already exists, and it was created when you created the project. It's located in the Components/Pages folder inside the BlazorApp directory that was created earlier.

Open the Home.razor file in a text editor of your choice. The Home.razor file already exists, and it was created when you ran the dotnet new command. It's located in the Components/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 Home.razor file.

Components/Pages/Home.razor
@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter />

Re-run the app to see the changes. The Counter component will then show up on the home page.

Once this change is saved, the dotnet watch command will apply the change to the running app so that the Counter component shows up on the home page.

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

Continue