Riot.jsその0001 Riot.jsを使う準備とカスタムタグの定義

参考にさせて頂いたページ

Riot.js 2.0 を触ってみた — まだReactで消耗しているの? - Qiita

バージョン

Riot v2.0.15

ダウンロードする

公式サイトで、riot+compiler.jsをダウンロードしてみた。

riot-sample.htmlの作成とその記述内容

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Riot.js sample</title>
  </head>
  <body>
    <elm-example></elm-example>
    <script src="./js/core/riot+compiler.js"></script>
    <script type="riot/tag" src="./js/tags/riot-sample.tag"></script>
    <script>
      riot.mount('elm-example')
    </script>
  </body>
</html>

riot-sample.tagの作成とその記述内容

<elm-example>
  <h1>h1タイトル</h1>
  <p>本文テキスト</p>
</elm-example>

作成したファイルを配置

今回は以下のようなディレクトリ構造にした。

.
├── js
│   ├── core
│   │   └── riot+compiler.js
│   └── tags
│       └── riot-sample.tag
└── riot-sample.html

localhostを起動する

pythonがインストールされていたら、以下のコマンドでローカルホストが起動できる。

python -m SimpleHTTPServer 8080

React.jsと同じく、サーバー上でないと動作しない様子。

ブラウザで動作確認してみる

http://localhost:8080/riot-sample.html

にアクセスしてみる。

このソースコードについて

tagファイルの読み込みはtype="riot/tag"

本来のプロジェクトではコンパイル済みのソースを使用するのだろうけど、ひとまずこれで。

コンポーネントを作る基本として、最小構成はこんな感じだと思う。

今回はここまで。

Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。