Skip to content
Docs are being updated, please bear with us.

Components

Wallace controls the DOM with components, which you define as functions that return JSX:

const Counter = ({ count }) => (
<div>
<button onClick={count++}>{count}</button>
</div>
);

During compilation the Babel plugin replaces such functions with generated functions which are used as constructors to create objects:

const component = new Counter();

These objects (called component instances or just components) have methods, like render which updates its DOM instantly:

component.render({ count: 99 });
console.log(component.el); // <div><button>99</button></div>

You won’t see anything on the page as el is not attached to the document.

Note that the function you see in your source code no longer exists at run time, so it never runs. It is just a placeholder for JSX, which gets parsed during compilation. The function may only contain one JSX expression, and nothing else.