Component overview

✅ Similar to Blazor WebAssembly

In Blazor, a component is a reusable piece of user interface (UI) that plays a vital role in defining specific sections of a web page or application. These components are created once and can be utilized multiple times, significantly increasing the development speed. This tutorial will cover the following topics:

• What is a component?
• Structure of a component.
• Component types.

What is a component?

A component in Blazor is a reusable piece of user interface that encapsulates logic and functionality. In other words, we can say that every application you will develop in Blazor will be made up of pieces called components. Components make the task of building UIs much easier and faster. You can see a UI broken down into multiple individual pieces call components and work on them independently and merge them all in a parent component which will be your final UI.

You can see in the below image, we have broken down the UI of Blazor School's homepage into individual components.

Components in Blazor consist of two main parts: an HTML template that defines what is rendered on the screen, and a collection of C# methods that handle logic and user interactions. The HTML template provides the visual structure of the component, while the C# methods define the component's behaviour and functionality. Together, these elements work in tandem to create a cohesive, interactive user interface.

It is important to note that a Razor Component (.razor) is not the same as a Razor Page (.cshtml). While both use Razor syntax, they serve different purposes and are used in different contexts. A Razor Page is used in ASP.NET MVC, while a Razor Component is used for building reusable UI elements in Blazor. Additionally, Blazor does not utilize Razor Pages as components, therefore it is crucial to not confuse the two.

Structure of a component

The structure of a component typically consists of three sections:

1. Directive section: This section is typically used for Dependency Injection, implementing interfaces, and using .NET libraries.
2. UI section: This section is used for defining the user interface for the component. It may contain both C# code and HTML.
3. Code section: This section is used for declaring methods, properties, and other logic for the component.

Component types

There are four types of components:

1. Independent component: This type of component includes a @page directive and allows for URL parameters to be passed to it. It is intended to be used on its own and not within another component.
2. Dependent component: This type of component does not have a @page directive and is intended to be used within another component to solve specific problems.
3. Layout component: This type of component inherits from LayoutComponentBase and determines the layout of a page or website.
4. Hybrid component: This type of component does not fit into the above categories and is not recommended as it can make the code less maintainable.