---
tags: mstu5013, tutorial, js, riot
---

# RIOT Tutorial 02: SYNTAX

## What is new to RIOT?

Riot components, the **`.tag`** files look syntactically very much like HTML, CSS, and JS. But they are not. When we load Riot and initialize it by mounting a component, Riot goes through the tags and _converts_ them into Javascript. We call this **compilation**.

Since RIOT tags are compiled into `JS`, it has a few special rules, syntax, and conventions that apply to writing RIOT tags.

1. **TAG NAMES**
- Tag names should be kept simple and meaningful.
- If using more than 1 word, they must be separated by a hyphen
i.e. `<my-tag></my-tag>`. This is called `kebab-case` :oden:
- Don't use reserved keywords/names to define a tag.

2. **RIOT EXPRESSIONS**
Riot allows us to create static content as well as _dynamic_ content through Javascript expressions. In riot templates (the HTML-like parts), we can tell Riot to evaluate Javscript expressions by writing these expressions within curly-braces `{ }`. Any Javascript can be executed inside these `{ }`. When an expression is evaluated and _inserted_ into the content, we call this **interpolation**.

E.g. Riot Expressions

    <my-tag>
        <h1>I am static HTML</h1>
        
        <h3>{ 3 * 5 }</h3> // evaluates to 15
                           // interpolates to <h3>15</h3>
        
        <p>{ false || "Invalid Entry" }</p> // evaluates to Invalid Entry
                                            // interpolates to <p>Invalid Entry</p>
        
        <p>{ myExp }</p> // evaluates to This is a dynamic expression
                         // interpolates to <p>This is a dynamic expression</p>
        
        <p>{ getMagicNumber() }</p> // evaluates to 0-9
                                    // interpolates to <p>7</p> or other random number
                                         
        <p>{ undefined } and { null }</p> // evaluates to nothing
                                          // interpolates to <p>and</p>
        
        <a href={ myURL }>Wow</a> // evaluates to https://gph.is/1hew5v1
                                  // interpolates to <a href="https://gph.is/1hew5v1">Wow</a>

        <script>
            this.myExp = "This is a dynamic expression";
            this.myURL = "https://gph.is/1hew5v1";
            
            this.getMagicNumber = function() {
                return Math.floor(Math.random() * 10);
            }
        </script>
    </my-tag>

- **Line 2:** Tags may contain static content, like simple `HTML` (i.e. `<h1>`, `<p>`).
- **Line 4-10:** You can add dynamic content using **RIOT expressions**. These would be the expressions contained within the curly braces `{}`.
- **Line 16:** Expressions that evaluate as `undefined` or `null` do not interpolate anything into the templates.
- **Line 13 & 26:** You can call functions that return data in order to interpolate your templates.
- **Line 19 & 24:** You can use expressions to **interpolate data into attributes**.
- Since RIOT expressions are pure `JS`, you can write any `JS` inside the curly braces and it will be evaluated and interpolated into the HTML as such.

3. **INTERPOLATION**
- As you may have noticed, interpolation is the proccess of embeding _data_ (i.e. string) in the place of a RIOT expression. This _data_ is usually defined inside the `<script>` tags.
- Interpolation entails find-replace operations. Everytime that the RIOT compiler finds `{}`, it will look for its subsequent definition (usually found inside the `<script>` tags), execute it, and replace the RIOT expression with the _new value_.
- Interpolation then, allow us to add dynamic content to the `HTML`.

## What `this` means?

- In RIOT,`this` allows us to access properties and methods set to the tag. Try `console.dir(this)` and see what is logged in the console.
- When defining an expression, you use`this` to set new properties to the tag object.
- For example:

<app>
    <label>Name: </label>
    <input type="text" value={user} name="name"/>

    <script>
      this.user = "John Doe";
      console.dir(this);
    </script>
</app>

- In this case, you'll find that `user` will become a _property_ of the tag object, and `"John Doe"` its _value_ .

**Note:** That in the JS portion of this tag, we use the term `this` much like we do with the keyword `var`. We can say these are variables within the context of this tag that **set the state** of the tag/component.

By setting **the state** of this tag, we can access these states via reference in our templates.

// Example
<my-tag>
    <h1>{ username }</h1> // `this` is assumed
    
    <script>
        this.username = "Moose";
    </script>
</my-tag>

So in the following example, we are setting `this` tag's properties to different data values.

<my-tag>
    <p>{ myExp }</p>
    <p>{ getMagicNumber() }</p>
    <a href={ myURL }>Wow</a>

    <script>
        this.myExp = "This is a dynamic expression";
        this.myURL = "https://gph.is/1hew5v1";
        this.getMagicNumber = function() {
            return Math.floor(Math.random() * 10);
        }
    </script>
</my-tag>

- `this.myExp`
- `this` tag's property `myExp`, is set to the value of "This is a dynamic expression"
- `this.myURL`
- `this` tag's property `myURL`, is set to the value of "https://gph.is/1hew5v1"
- `this.getMagicNumber`
- `this` tag's property `getMagicNumber`, is set to the value of a function

### JS Model of a Riot Component/Tag

When Javascript compiles this tag it creates a `JS Object`. Below are comparisons between the Riot Code, a JS Conceptual Object Model, and console output.

E.g. Riot TAG/COMPONENT

<my-tag>
    <p>{ myExp }</p>
    <p>{ getMagicNumber() }</p>
    <a href={ myURL }>Wow</a>

    <script>
        this.myExp = "This is a dynamic expression";
        this.myURL = "https://gph.is/1hew5v1";
        
        this.getMagicNumber = function() {
            return Math.floor(Math.random() * 10);
        }
    
        console.dir(this);
    </script>
</my-tag>

E.g. JS Conceptual model of `my-tag` component.

var myTag = {
    myExp: "This is a dynamic expression",
    myURL: "https://gph.is/1hew5v1",
    getMagicNumber: function() {
        return Math.floor(Math.random() * 10); 
    },
    ... // OTHER RIOT TAG PROPERTIES
}

E.g. **Line 14:** `console.dir(this);`

:::info
Here is a snippet of what shows in the console.

:::

:::info
**AUTHORS**
By Anabel Bugallo; Edited by Jin Kuwata
:::