Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


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

    Tim KindbergTim Kindberg

    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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    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.

    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.

    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.

    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.

    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.