- RIOT.JS Tutorial
- RIOT.JS - Home
- RIOT.JS - Overview
- RIOT.JS - Environment Setup
- RIOT.JS - First Application
- RIOT.JS - Tags
- RIOT.JS - Expressions
- RIOT.JS - Styling
- RIOT.JS - Conditional
- RIOT.JS - Yield
- RIOT.JS - Event Handling
- RIOT.JS - Accessing DOM
- RIOT.JS - Loops
- RIOT.JS - Mixin
- RIOT.JS - Observables
- RIOT.JS Useful Resources
- RIOT.JS - Quick Guide
- RIOT.JS - Useful Resources
- RIOT.JS - Discussion
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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