RIOT.JS Tutorial
Selected Reading
- RIOT.JS - Discussion
- RIOT.JS - Useful Resources
- RIOT.JS - Quick Guide
- RIOT.JS - Observables
- RIOT.JS - Mixin
- RIOT.JS - Loops
- RIOT.JS - Accessing DOM
- RIOT.JS - Event Handling
- RIOT.JS - Yield
- RIOT.JS - Conditional
- RIOT.JS - Styling
- RIOT.JS - Expressions
- RIOT.JS - Tags
- RIOT.JS - First Application
- RIOT.JS - Environment Setup
- RIOT.JS - Overview
- RIOT.JS - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
RIOT.JS - Environment Setup
RIOT.JS - Environment Setup
There are two ways to use RIOT js.
Local Installation − You can download RIOT pbrary on your local machine and include it in your HTML code.
CDN Based Version − You can include RIOT pbrary into your HTML code directly from Content Depvery Network (CDN).
Local Installation
Go to the 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 pbrary in your HTML file as follows −
<!DOCTYPE html>
<html>
<head>
<script src = "/riotjs/riot.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/pbs/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 pbrary into your HTML code directly from Content Depvery Network (CDN). Google and Microsoft provides content depver for the latest version.
Note − We are using CDNJS version of the pbrary throughout this tutorial.
Example
Now let us rewrite above example using jQuery pbrary from CDNJS.
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/pbs/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