Synopsis
| Invocation | Styled | Content | Structure | Logic |
|---|---|---|---|---|
| both | yes | yes | no | no |
Principles
- Are concerned with how things look.
- Are isolated, have no dependencies to the rest of the app.
- Aren’t responsible for data loading or mutating.
- Receive data and callbacks exclusively via arguments.
- Rarely have their own state - can only be UI state.
- Render as minimal elements as possible.
Example
Presentational components take explicit and direct arguments and display them, as such they don’t take object (domain objects) and display properties.
Avatar Component
The example is an avatar component that takes an url to an image as argument and presents it in a circle with a border.
<img src={{@src}} local-class="avatar" ...attributes>.avatar {
border-radius: 50%;
width: 50px;
box-shadow: inset 0 2px 4px 0 hsla(0, 0, 0, 0.2);
}Usage
Invoke the component with and pass down explicitely the arguments it needs to render.
<Examples::Avatar
@src="https://avatars.githubusercontent.com/u/283700"
alt="gossi's Github Avatar"
/>