docs: clarify the component attributes example

docs/20.07-attributes.md

@@ -10,13 +10,27 @@ parent: Usage
 #### Component Attributes
 
 Attributes declared on the components will be all be accessible through the `state`.
-If the property is initialized in the `this.state`, the attribute will be reactive:
+If the property is initialized in the `this.state`, the attribute will be reactive.
 
+Example:
+
+__index.html__
 ```html
-<x-user status="thinking 🤔"></x-user>
+<x-user status="Thinking 🤔"></x-user>
+```
+
+__bricks/x-user.html__
+```html
+<script>
+  const state = { status: "Happy 😄" }
+</script>
+
+<template>
+  <p>User status: {{ state.status }}</p>
+</template>
 ```
 
-`status` will therefore be reactive and the _thinking 🤔_ attribute value will overwrite the _Happy 😄_ default status.
+`status` will therefore be reactive and the _Thinking 🤔_ attribute value will overwrite the _Happy 😄_ default status.
 
 ⚠️ A property that is not declared in the `state` won't be reactive.