Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 833 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



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

2:43 JavaScript lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
hareesh

the code is incomplete. you need to mount hello-world

riot.mount('hello-world')

In reply to egghead.io

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?