Exploring components

In Blazor, a component is a .razor file that can contain a small, isolated functionality (code and markup) or can be used as a page itself. A component can host other components as well. This chapter will show us how components work and how to use them.

There are three different ways we can create a component:

• Using Razor syntax, with code and HTML sharing the same file
• Using a code-behind file together with a .razor file
• Using only a code-behind file

We will go through the different options. The templates we will go through next all use the first option, .razor files where we have a mix of code and HTML in the same file.

The components in the template are as follows:

• counter
• FetchData

counter

The counter page shows a button and a counter; if we press the button, the counter increases. We will now break the page apart so it is easier to understand.

At the top of the page is the @page directive, which makes it...