Riot.js チートシート

Riot.js は、仮想 DOM を備え、ボイラープレートをほぼ必要としないエレガントで軽量なコンポーネント指向 UI ライブラリです。

コンポーネントの定義 (my-component.riot)

<user-card>
  <div class="card">
    <h3>{ state.name }</h3>
    <p>Role: { props.role }</p>
    <button onclick="{ handleIncrement }">Likes: { state.likes }</button>
  </div>

  <script>
    export default {
      onBeforeMount(props, state) {
        this.state = {
          name: props.initialName || 'Anonymous',
          likes: 0
        };
      },
      handleIncrement() {
        this.update({
          likes: this.state.likes + 1
        });
      }
    }
  </script>
</user-card>

---

ライフサイクルイベント

---

ループと条件分岐

<!-- 条件分岐 -->
<p if="{ state.isLoggedIn }">おかえりなさい！</p>
<button if="{ !state.isLoggedIn }">ログイン</button>

<!-- ループ処理 -->
<ul>
  <li each="{ item in state.items }">
    { item.title }
  </li>
</ul>

---

参考リンク

• Riot.js 公式ドキュメント