Blazor WebAssembly components overview

Blazor WebAssembly components are the main building blocks for Blazor WebAssembly websites. Each component has 3 sections:

• Directive section: a list of directives of a component.
• HTML template section: determines how the component appears.
• @code section: contains UI logic.

You can download the example code used in this topic on GitHub.

What is a component?

Blazor WebAssembly component is called Razor Component. Razor Component is a set of UI and its logic that can be reusable. For example, we have a HelloWorld component. This component can stand alone or be put inside another component. Later on, all components will be put inside App.razor and App.razor will be rendered in the index.html. This image illustrates how components are used in Blazor WebAssembly.

How to create a component?

To create a component, in your Visual Studio, right click on a folder and select Add => Razor Component.

Proficient in Razor Component

Moving on to the advanced topic of Razor Component, you will need to understand the following techniques:

• Component lifecycle: understand the lifecycle of a component.
• CSS usage: explore CSS isolation and global style.
• Component interaction: understand how to interact between components.
• Content projection: learn how to create a dynamic content component.
• Javascript usage: learn how to use JS in a component.