Core concepts

Function Components are the building blocks of a xania application. They not only represents the structure of the DOM, but also contains commands and subscriptions. In the following examples we will gradually learn about each these concepts.

Let’s first start with a static / stateless example

function HelloWorld(props: { name }) {
  const { name } = props;
  return (
    <button click={() => log(`hello ${name}!`)}>
      Say hello
    </button>
  );
}

JSX in xania looks much like react, props defines attributes and children (not used in this example) and click event is bound to a callback function which prints a log message to the console.