Try It Yourself

The interactive playground at the end of the lesson contains a .NET MAUI project with Blazor WebAssembly views. We can make the following changes to the Razor components:

• Renaming components.

• Referencing Razor components from other Razor components.

Renaming components

Since we're using #app as the selector of the container HTML element for the Blazor app, and we aren't specifying the element type in the selector, we can replace the div element on line 17 of the index.html element with a span element, keeping its ID attribute and content the same.

We can also move the contents of the Main.razor file to Program.razor. When we do this, we should also replace the Main word inside the ComponentType attribute in the RootComponent element with Program. This shouldn't make any difference to the application as long as the type matches the file name.

Referencing Razor components from other Razor components

We'll now apply a <Counter /> element to the homepage of the Blazor MAUI application, which is Index.razor. The original content will remain intact, so the homepage will display both its original content and the content of the Counter.razor page.

Note: The app will take around six minutes to build.