---
title: "LemonadeJS Class Components - Building Reactive Interfaces | v4 docs"
description: "LemonadeJS v4 archive. Discover how to create highly reactive and dynamic JavaScript class components with LemonadeJS. This guide provides insights into."
source: https://lemonadejs.com/docs/v4/classes/
---
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
```
```javascript
import lemonade from 'lemonadejs';
export default class Counter extends lemonade.component {
constructor(self) {
super(self);
this.count = 1;
}
render() {
return `<>
Counter: {{self.count}}
`;
}
}
```
See this [working example](https://codesandbox.io/s/lemonadejs-examples-sebfeo) on codesandbox.
### Next Chapter
The next Chapter presents how to create a reactive Web-components using LemonadeJS.
[Next chapter: Web-components](/docs/v4/web-components/){.button .main}