Components at a Glance

On the surface, a website created with Blazor is fast, reliable, and capable of performing complex tasks directly in the browser. Breaking it down, a Blazor website consists of multiple components, each serving a specific role - some display the login area, some handle user interactions, and so on. This tutorial will provide you with an overview of Razor components:

• What is a component?
• Basic structure.
• Types of components.

What is a Component?

A component in Blazor is a reusable building block that defines a part of a webpage's UI and behavior. It is written using Razor syntax, which combines C# and HTML. Each component can have its own logic, styling, and interactions, making it an essential unit for developing Blazor applications. Components can be as simple as a button or as complex as an entire form. They can also communicate with each other and manage data efficiently, allowing for a modular and maintainable architecture.

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

A Razor Component (.razor) is different from a Razor Page (.cshtml). While both use Razor syntax, they serve distinct purposes in different contexts. A Razor Page is used in ASP.NET MVC, whereas a Razor Component is designed for building reusable UI elements in Blazor. Additionally, Blazor does not use Razor Pages as components.

Basic Structure

A component typically consists of three sections:

• Directive Section: Used for dependency injection, implementing interfaces, and importing .NET libraries.
• UI Section: Defines the user interface of the component, containing both C# code and HTML.
• Code Section: Contains methods, properties, and other logic for the component.

Types of Components

There are 3 types of components:

• Paging Component: Includes the @page directive and allows URL parameters to be passed. It is designed to function as a standalone page rather than being used within another component. Those components are not designed to be reused.
• Reusable Component: Does not include the @page directive and is meant to be used inside another component to solve specific problems. Those components are design to be reused.
• Layout Component: Inherits from LayoutComponentBase and defines the layout structure of a page or website.