Getting started with Riot JS. We'll discuss riot's compile and mount process and build a small hello world component with simple data-binding.

Riot JS - Getting Started with this React-like micro-library

[00:01] Riot.js is a micro framework. It's only three and a half kilobytes. With it you get custom tags, eventing, and rounding, that's all. Otherwise it just gets out of your way and lets you code. I was able to learn the entirety of Riot.js in about two days, one day to read the docs, and one day to write a small app. The ability to get started quickly, and for such a small size is why I think Riot could become a very popular framework. 

[00:27] Let's see how we get started with riot. I'll make a simple "Hello World" example. You'll have to download the proper files. There is a riot.js file and a compiler.js file. The riot.js file houses the framework APIs while the compiler.js files houses the capability of turning Riot syntax into JavaScript syntax. The beauty of riot's compiler is how fast it is, which means you can precompile your files or you can let them compile at runtime. It's not even unreasonable to do runtime compiling in production. 

[01:03] Let's grab the minified combo file which contains both the framework and the compiler. I've already added it to my project over here. Now I need to create a Riot component file. Riot files end with .tag. This .tag file will compile to regular JavaScript at runtime. To declare a custom tag, simply write it out without indent. In here, Riot expects your component to have your HTML on top and the JavaScript on bottom. For databinding, use single curly braces. Everything between the braces is just regular JavaScript. 

[01:51] This is implied, so I don't have to write this.what, I can just write what. I'll add my file to my index file as a script of type = Riot/tag. You also have to explicitly mount any custom tag used outside of a .tag file. For example, here in the body of my index. You just say riot.mount and then you can pass a * if you want to mount every custom tag on the page, or you can pass in specific tags. 

[02:27] Now I'm free to use my Hello World component in my index file. When I refresh, you'll see that we've successfully created a simple Riot component, complete with databinding and runtime compilation. 

Riot JS - Getting Started with this React-like micro-library

Share this video with your friends