In previous article, we have discussed about how routing works in the Blazor application. Now, it’s time to add a new component. But before that, let’s first understand some basics about Blazor components.

What is a component ?

Blazor apps contain many Razor Components, formally known as Blazor Components. As per documentation, a component is a self-contained portion of user interface (UI) with processing logic to enable dynamic behavior. Components can be nested, reused, shared among projects, and used in MVC and Razor Pages apps.

So, a component basically contains code for user interface, mainly HTML and CSS. A component can be used inside other upto any level. This is fine. But what does it contain ?

Components are implemented using a combination of C# and HTML markup in Razor component files with the .razor file extension. So, components use Razor syntax. Two Razor features are extensively used by components, directives and directive attributes. Now, what is directive and what are directive attributes ?

Directive vs Directive Attributes

A directive is any token which begins with “@” character. It changes the way component markup is parsed or functions.  For example, @page directive decides the routing for the component.

A directive attribute is also a token which begins with “@” character. It differs from directive. The directive attribute is basically an attribute which changes the way elements of components are parsed or how do those elements function. For example, the @bind directive attribute for an <input> element binds data to the element’s value.

Naming Conventions

Another important thing to know is naming convention. The name of a razor component should always start with an upper case letter. In another words, if the component begins with lowercase letter, it is not allowed.

Another important thing to note is – the file name should generally use pascal casing. For example, let’s say we want to add a component for premium customer list. Then we can add a file with name PremiumCustomer.razor.

Also, generally, the path of the file is configured to be hyphens between the words in the file name. So, if the component is PremiumCustomer.razor, then the value of @page attribute should be set to “/premium-customer“.

Namespaces

Last concept for today’s article is namespaces of Blazor components. A Blazor component’s namespace is derived from the default namespace of the project followed the by the names of the folders in which the Blazor component is added.

Let’s take an example. Let’s say the default namespace of the project is Contoso.BlazorApp. And let’s say, this project contains a folder Pages which contains all the Blazor components. And let’s say there is a file with name PremiumCustomer.razor. Then the component’s name is PremiumCustomer. The namespace for this component should be {default_namespace}.{folder_names}.{component}, which basically is – Contoso.BlazorApp.Pages.PreiumCustomer.

That’s it for today’s article. We have covered all the basic concepts which should know before adding first component. Hence, in the next article, let’s try adding a component.

I hope you find this series helpful. Let me know your thoughts.