Teach with us

RIOT.JS - Environment Setup

Previous Page
Next Page  

There are two ways to use RIOT js.

  • Local Installation − You can download RIOT library on your local machine and include it in your HTML code.

  • CDN Based Version − You can include RIOT library into your HTML code directly from Content Delivery Network (CDN).

Local Installation

  • Go to the https://riot.js.org/download/ to download the latest version available.

  • Now put downloaded riot.min.js file in a directory of your website, e.g. /riotjs.

Example

Now you can include riotjs library in your HTML file as follows −

<!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>

This will produce following result −

CDN Based Version

You can include RIOT js library into your HTML code directly from Content Delivery Network (CDN). Google and Microsoft provides content deliver for the latest version.

Note − We are using CDNJS version of the library throughout this tutorial.

Example

Now let us rewrite above example using jQuery library from 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>

This will produce following result −

Previous Page Print Page Next Page  
Advertisements