Classes

LemonadeJS components can be created using JavaScript classes. This approach ensures both reusability and encapsulation of component logic. LemonadeJS offers a self reference within these classes in any class context. This reference facilitates updating internal attributes and invocating class methods directly from within the template. The following example illustrates the process of creating LemonadeJS components using JavaScript classes.

Example

The following code snippet shows a LemonadeJS component as a class:

<html>
<script src="https://lemonadejs.net/v4/lemonade.js"></script>
<div id='root'></div>
<script>
class Counter extends lemonade.component {
    constructor(self) {
        super(self);
        this.count = 1;
    }

    render() {
        return `<>
            <div>Counter: {{self.count}}</div><br>
            <input type='button' onclick="self.count++" value='Go' />
            <input type='button' onclick="self.count = 0" value='Reset' />
        </>`;
    }
}
lemonade.render(Counter, document.getElementById('root'));
</script>
</html>
import lemonade from 'lemonadejs';

export default class Counter extends lemonade.component {
    constructor(self) {
        super(self);
        this.count = 1;
    }

    render() {
        return `<>
            <div>Counter: {{self.count}}</div><br>
            <input type='button' onclick="self.count++" value='Go' />
            <input type='button' onclick="self.count = 0" value='Reset' />
        </>`;
    }
}

See this working example on codesandbox.

Next Chapter

The next Chapter presents how to create a reactive Web-components using LemonadeJS.

Next chapter: Web-components