virtualdom-api-differences.md

description
Guide that defines some differences that exist between Atomico and React when working with the DOM.

VirtualDOM api differences

Atomico's virtualDOM is:

1. Close to standard DOM .
2. Additional coverage to webcomponents.

Components as constructors

Atomico does not support the use of functions to instantiate the component as we traditionally do in React, so that the component can be instantiated as a constructor it must be a webcomponent or a real Node.

{% tabs %} {% tab title="❌ Not supported" %}

function Component(){
    const [ state, setState ] = useState();
    return <host></host>
}

function App(){
    return <host>
        <Component/>
    </host>
}

{% endtab %}

{% tab title="✔️ Spported" %}

// ⚠️ stateless component
function Component(){ 
    return <host></host>
}

function App(){
    return <host>
        <Component/>
    </host>
}

{% endtab %}

{% tab title="✔️ Spported" %}

function component(){
    return <host></host>
}

const Component = c(component);
customElements.define("my-component",Component)

function app(){
    return <host>
        <Component/>
    </host>
}

{% endtab %}

{% tab title="✔️ Supported" %}

function app(){
    const Div = document.createElement("div");
    return <host>
        <Image/>
        <Div/>
    </host>
}

{% endtab %} {% endtabs %}

Event Association

Like React in Atomico you need to use the prefix on to announce an event, but there is a difference Atomico does not manipulate the name of the event so onClick is different from onclick, the purpose of this difference is to support custom events.

<div>
    <button onclick={console.log}>click</button>
    <button onMyCustomEvent={console.log}>click</button>
    <button onmy-event={console.log}>click</button>
    <button onmouseover={console.log}>click</button>
</div>

Keyes

the key property in Atomicoo can be of type String, Number, Symbol or other immutable reference.

<div>
    <div key={1}>1</div>
    <div key={symbol}>1</div>
    <div key={immutable}>1</div>
</div>

dangerouslySetInnerHTML

<div innerHTML={`<h1>html!</h1>`}/>