RIOT.JS - Configuração de Ambiente

Existem duas maneiras de usar o RIOT js.

  • Local Installation - Você pode baixar a biblioteca RIOT em sua máquina local e incluí-la em seu código HTML.

  • CDN Based Version - Você pode incluir a biblioteca RIOT em seu código HTML diretamente da Content Delivery Network (CDN).

Instalação Local

  • Vou ao https://riot.js.org/download/ para baixar a versão mais recente disponível.

  • Agora coloque baixado riot.min.js arquivo em um diretório do seu site, por exemplo, / riotjs.

Exemplo

Agora você pode incluir a biblioteca riotjs em seu arquivo HTML da seguinte maneira -

<!DOCTYPE html>
<html>
   <head>
      <script src = "/riotjs/riot.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

Isso produzirá o seguinte resultado -

Versão baseada em CDN

Você pode incluir a biblioteca RIOT js em seu código HTML diretamente da Content Delivery Network (CDN). O Google e a Microsoft fornecem entrega de conteúdo para a versão mais recente.

Note - Estamos usando a versão CDNJS da biblioteca em todo este tutorial.

Exemplo

Agora vamos reescrever o exemplo acima usando a biblioteca jQuery do CDNJS.

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

Isso produzirá o seguinte resultado -