3 Working with Blazor’s component model

The fundamental building blocks of Blazor applications are components. Almost everything you do will directly or indirectly work with them. In order to build great applications, you must know how to harness their power. You’ve already had a taste of using them in chapter 2. In this chapter, we’re going to look at them in much more detail.

Components define a piece of UI, which can be something as small as a button or as large as an entire page. Components can also contain other components. They encapsulate any data that a piece of UI requires to function. They allow a piece of UI to be reused across an application or even shared across multiple applications—something we’ll look at in chapter 7.

Data can be passed into a component using parameters. Parameters define the public API of a component. The syntax for passing data into a component using parameters is the same as defining attributes on a standard HTML element—with a key-value pair. The key is the parameter name, and the value is the data you wish to pass to the component.

The data a component contains is more commonly referred to as its state. Methods on a component define its logic. These methods manipulate and control that state via the handling of events.

3.1 Structuring components

3.1.1 Single file

3.1.2 Partial class

3.2 Component life cycle methods

3.2.1 The first render

3.2.2 The life cycle with async

3.2.3 Dispose: The extra life cycle method

3.3 Working with parent and child components

3.3.1 Passing values from a parent to a child

3.3.2 Passing data from a child to a parent

3.4 Styling components

3.4.1 Global styling

3.4.2 Scoped styling