| 1 | ## Components
|
| 2 |
|
| 3 | Simply define a class or function that extends `Radi.Component`. It can have `state` method that returns [state object](#state), `view` method that returns [view data](#view) and any other methods that can be decorated as [action](#actions). State can also be defined inside `constructor` as simple object. But `view` must always be method.
|
| 4 |
|
| 5 | ```jsx
|
| 6 | import { r, l, action, Component } from 'radi';
|
| 7 |
|
| 8 | class Counter extends Component {
|
| 9 | state() {
|
| 10 | return {
|
| 11 | count: 0
|
| 12 | }
|
| 13 | }
|
| 14 |
|
| 15 | @action
|
| 16 | up() {
|
| 17 | return {
|
| 18 | count: this.state.count + 1
|
| 19 | }
|
| 20 | }
|
| 21 |
|
| 22 | view() {
|
| 23 | return [
|
| 24 | <h1>{ this.state.count }</h1>,
|
| 25 | <button onclick={ () => this.up() }>+</button>
|
| 26 | ]
|
| 27 | }
|
| 28 | }
|
| 29 |
|
| 30 | ```
|