More than 3 years have passed since last update.

【Riot.js】【訂正版】cdnで楽々Hello World

riot.js

Last updated at 2020-02-19Posted at 2020-02-19

Riot.jsの勉強をしています。
npmやwebpackを使う方法もあるのですが、より簡単なcdnを使う方法で学習を進めていきます。

まずは、任意のフォルダにindex.htmlとapp.riotを用意します。

index.html


<!doctype html>

<html>
  <head>
    <title>Riot todo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  </head>

  <body>

    <app></app>

    <script src="app.riot" type="riot"></script>
    <script src="https://cdn.jsdelivr.net/npm/riot@4/riot+compiler.min.js"></script>

    <script>
      riot.compile().then(() => {
        riot.mount('app', {
          title: 'Hello World',
        })
      })
    </script>
  </body>
</html>

app.riot

<app>
  <h3>{ props.title }</h3>
</app>

このままhtmlファイルをchromeにおくと、URL scheme must be "http" or "https" for CORS request.といったエラーが出てしまうので、以下の手順でローカルサーバーを立てます。

$ npm install -g live-server
$ cd <index.htmlとapp.riotがあるフォルダ>
$ live-server .
# http://localost:8080/でブラウザからアクセス可能

これで画面にHello Worldと表示されます！！

[参考]
https://github.com/riot/examples
ChromeにてAjaxでローカルファイルにアクセス

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up