📄️ Introduction
A component is a reusable piece of UI that can be composed with other components to create complex user interfaces. Components in Sonnet JS are created extending the SonnetComponent class, which provides a simple and intuitive API for building UI components.
📄️ Methods
Methods are functions that are defined inside a class and are used to perform some action or computation. In Sonnet JS, methods are used to define the behavior of a component, such as handling interactivity, fetching data, or updating the UI.
📄️ Props
Props are used to pass data from a parent component to a child component. In Sonnet JS, there are multiple ways to pass props to a component.
📄️ Lifecycle
Sonnet JS components lifecycle is bit different from other frameworks. There are not typical lifecycle methods like componentDidMount, componentDidUpdate, etc. Instead, Sonnet JS handles all this stuff in a different way. In Sonnet JS, lifecycle is maintained at app level instead of component level. What it means is that component is rendered (mounted) only once (single page environment). As long as the page is not changed, the component will not be re-rendered. This is the reason why there is no need for lifecycle methods like componentDidMount, componentDidUpdate, etc.
📄️ Reactivity
When you are working with vanilla JavaScript, you don't need to have any special mechanism to update the UI when the data changes. You can manually maniuplate the dom to update data. But in some cases, it becomes too complex to manage the data and the UI manually. This is where reactivity comes into play.