Create Component

The UI System is the most powerful feature of BJDA

This is a diagram to let you understand how it works

UI

UI is used to manage, render, update and build its children.
UIHooks also can attach to a UI to implement real-time updating messages.

UI contains a Renderer and Updater to render its children and update listened messages.
You can attach a Message to the UI adding an Update Hook:

ui.reply(event) {
    ui.listen(it) //allows message and interaction hook
}

Or Change the behavior by overriding hooks or using the HookOverride API

ui.reply(event) {
    val hook = HookOverride(
        InteractionUpdateHook(it),
        onUnmount = Actions.Unmount
    )
    
    ui.listen(hook)
}

Component

Component is a high level element provided state and hooks features.
It expended the Element interface

Creating a Component

You can use Idiomatic method

val example = component {
    val todos = useState("state");

    {
        + Content("**Text**")
    }
}

Or creating a class component

class Example : Component<IProps>(IProps()) {
    val state = useState("State")
    
    override fun onRender(): Children {
        return {
            + Content("**Hello World**")
        }
    }
}

Element

Element is the base of Component, it doesn't have state and hooks.
Since it is low level API, it can save memory if you use it correctly.

It also supports both Idiomatic method or Class element.

val Example = element {
    {
        + Content("**Hello World**")
    }
}

class Example : ElementImpl<IProps>(IProps()) {
    override fun render(): ComponentTree {
        return arrayOf(
            Content("**Hello World**")
        )
    }
}

Fragment

When you're adding a collection of elements, they will convert to a Fragment Component. You have to define the key property.

{
    + todos.map { 
        Text()..{
            content = it
        } 
    }
}

State

Since it is inspired by React.js, its usage is similar to React.
You can create a State by using useState in Components:
val todos = useState(arrayListOf<String>())

If you wanted to edit messages after updating states
You must use add an Update Hook by using ui.listen(hook)

When updating state in interaction events, you must add the event parameter
For example: event.update(event) {..}

Otherwise, the interaction event won't be replied.

For more, you can take a look at here