Component

Component is the main building block of Blazor WebAssembly. In this series, you will learn how to use component efficiency. This tutorial includes:

• Component lifecycle.
• Website layout.
• Routing and parameterized route.
• Navigation.
• Styling component with CSS.
• Component interaction.
• Content projection.
• JavaScript interaction.

In this tutorial, you will have an overview of component:

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

What is a component?

A component in Blazor WebAssembly is called Razor Component. Component is the main building block of Blazor WebAssembly. The following is an example of a website page to demonstrate the role of a component.

A website page is created by the combination of many components. Each component in charge of a piece of logic and UI in a page. Components are reusable.

Razor Component (.razor) is not Razor Page (.cshtml). Blazor WebAssembly does not use Razor Page as component. Do not confuse between them.

Structure of a component

Each component has 3 sections:

1. Directive section: This section is usually for Dependency Injection, using a .NET library, implement an interface, etc...
2. UI section: You can define the UI for the component in this section. This section can contain C# code and HTML.
3. Code section: This section is used for declaring methods, property, etc...

Component types

There are 4 component types:

1. Independent component: A component that has @page directive. This type of component allows you to have parameter from the URL, mainly for integrate between components. This type must not be used in another component.
2. Dependent component: A component that does not have @page directive. This type of component allows you to solve a very specific problem and must be used within another component.
3. Layout component: A component that inherits from LayoutComponentBase. This type of component determines the layout of a page or entire website.
4. Hybrid component: A component that is not one of the types above. We don't recommend having those components because of the code will not maintainable.