Hello World

The render function with a tag is the simplest way to create a component with Composi. This is what is called a functional component. It's a function that returns some markup. The render function takes care of creating a virtual dom and converting the markup into HTML nodes in the document.

The mandatory "Hello World" example. Below is the simplest use of Composi to output a Hello world message to the document. It's using the render function and some JSX. The second argument, section, is the tag in the DOM in which we want to render this component.

 

See the Pen Composi Tuts - Hello World by Robert Biggs (@rbiggs) on CodePen.

Through these tutorials we will gradually show you how to use Composi. You will learn how to create components. This will enable you to build complex apps from reusable parts. The whole point is to build small, reusable components.

JavaScript

We will be using ES6 (ECMAScript 2015) throughout the tutorials. ES6 is already supported in all currently shipping browsers. And Composi enables you to use it even for older browsers by transpiling it to ES5 at build time. As such there is no need to hesitate in using ES6 with Composi. We'll be using destructuring, classes, let, const, etc. If you are not yet familiar with how to use ES6, take the time to read this tutorial.