Custom components inside the of the page needs to be closed normally: <my-component></my-component> and self-closing: <my-component/> is not supported.

    Some example uses of the mount method:

    1. // mount an element with a specific id
    2. riot.mount('#my-element')
    4. // mount selected elements
    5. riot.mount('todo, forum, comments')

    A document can contain multiple instances of the same component.

    Riot gives you access to your component DOM elements via this.$ and this.$$ helper methods.

    1. <my-component>
    2.   <h1>My todo list</h1>
    3.   <ul>
    4.     <li>Learn Riot.js</li>
    5.     <li>Build something cool</li>
    6.   </ul>
    8.   <script>
    9.     export default {
    10.       onMounted() {
    11.         const title = this.$('h1') // single element
    12.         const items = this.$$('li') // multiple elements
    13.       }
    14.     }
    15.   </script>
    16. </my-component>

    How to use jQuery, Zepto, querySelector, etc.

    Now that we know how to get DOM elements in the onUpdated or onMounted callbacks, we can make this useful by also adding a context to our element queries to the root element (the riot tag we’re creating).

    1. <my-component>
    2.   <p id="findMe">Do I even Exist?</p>
    3.   <p>Is this real life?</p>
    5.   <script>
    6.     export default {
    7.       onMounted() {
    8.         // Contexted jQuery
    9.         $('p', this.root) // similar to this.$
    11.         // Contexted Query Selector
    12.         this.root.querySelectorAll('p') // similar to this.$$
    13.       }
    14.     }
    15.   </script>
    16. </my-component>

    Properties

    You can pass initial properties for components in the second argument

    1. <script>
    2.   riot.mount('todo', { title: 'My TODO app', items: [ ... ] })
    3. </script>

    The passed data can be anything, ranging from a simple object to a full application API. Or it can be a Redux store. Depends on the designed architecture.

    Inside the tag the properties can be referenced with the this.props attribute as follows:

    1. <my-component id="{ state.name }-{ state.surname }">
    3.   <p>{ state.name } - { state.surname }</p>
    5.   <script>
    6.     export default {
    7.       onMounted() {
    8.         // this is good but doesn't update the component DOM
    9.         this.state.name = 'Jack'
    11.         // this call updates the state and the component DOM as well
    12.         this.update({
    13.           surname: 'Black'
    15.       }
    16.   </script>
    17. </my-component>

    Riot component lifecycle

    A component is created in following sequence:

    • The component object is created
    • The javascript logic is executed
    • All HTML expressions are calculated

    • The component DOM is mounted on the page and “onMounted” callback is calledAfter the component is mounted the expressions are updated as follows:

    • When this.update() is called on the current component instance

    • When this.update() is called on a parent component, or any parent upwards. Updates flow uni-directionally from parent to child.The “onUpdated” callback is called every time component tag is updated.

    Since the values are calculated before mounting there are no surprise issues such as failed <img src={ src }> calls.

    1. <my-component>
    2.   <script>
    3.     export default {
    4.       onBeforeMount(props, state) {
    5.         // before the component is mounted
    6.       },
    7.       onMounted(props, state) {
    8.         // right after the component is mounted on the page
    9.       },
    10.       onBeforeUpdate(props, state) {
    11.         // allows recalculation of context data before the update
    12.       },
    13.       onUpdated(props, state) {
    14.         // right after the component template is updated after an update call
    15.       },
    16.       onBeforeUnmount(props, state) {
    17.         // before the component is removed
    18.       },
    19.       onUnmounted(props, state) {
    20.         // when the component is removed from the page
    21.       }
    22.     }
    23.   </script>

    Any callback receives always the current this.props and this.state as arguments.