Riot.js is similar to Polymer and React.JS but is more focused and thus more compact. By focused I mean it has less features, but has the most commonly used features.
Riot.js Core Concepts
The core concepts of Riot.js are:
- HTML tags
- Scoped CSS styles
- HTML templating
- Event handlers
- Yield (passing HTML into tags)
These concepts will be explained in their own texts in this tutorial.
You can find the Riot.js website here:
To give you an idea of how Riot.js code looks, here is a Riot.js example. The example defines an HTML tag and uses it inside the same HTML file. This is possible with small HTML tags. With bigger HTML tags you will normally put the HTML tag definition in its own file.
<!DOCTYPE html> <html> <head> <script src="riot+compiler.js"></script> </head> <body> <mytag></mytag> <script> var tagHtml = "<h1>Riot.js Tag!</h1>"; riot.tag("mytag", tagHtml); riot.mount("mytag"); </script> </body> </html>
The Riot.js function call
riot.tag(...) defines the tag named
The function call
riot.mount(...) mounts all the
mytag tags in the HTML page.
A Riot.js HTML tag must first be defined, then mounted.