RIOT.JS - First Application

RIOT works by building custom, reusable html tags. These tags are similar to Web components and are reusable across pages and web apps.

Steps to use RIOT

  • Import riot.js in the html page.

<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>

  • Start a script section and define tag content as html. Script can also be included which we'll see later in the tutorial.

var tagHtml = "<h1>Hello World!</h1>";

  • Define a tag using riot.tag() method. Pass it the name of the tag, messageTag and variable containing tag content.

riot.tag("messageTag", tagHtml);

  • Mount the tag using riot.mount() method. Pass it the name of the tag, messageTag. Mounting process mounts the messageTag in all its occurrences in the html page. MessageTag tag should be defined using riot.js prior to mounting.

riot.mount("messageTag");
</script>

Following is the complete example.

Example

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

Advertisements