new

makes a new HTML element with a type, attributes and children

The new function is the heart of ClearlyJS: it allows you to create HTML elements with attributes and children!

Parameters

JavaScript parameters

• type: type of the HTML element (for example h1, div, etc...) or your own element name (for example message, setting, etc...)

• attributes: the element's HTML attributes (and the attributes specified in editAttributes)

• ...children: children of the element - each element in a new parameter

JSX parameters

In JSX the new function is different:

<type parameters> ...children </type>

Returns

the ClearlyHTML element

Examples

JavaScript

clrly.new("h1", {style: "color: red", class: "element", id: "myId"}, "hello");

JSX

Creates a new red title with the text: "hello"

JavaScript - option 1

clrly.new("div", {}, clrly.new("h1", {}, "Welcome to my app"));

This syntax is a little bit messy, isn't it?

JavaScript - option 2

JSX - option 1 (recommended)

JSX - option 2

Creates a new div and puts a title inside the div

More with JSX

JSX allows you to understand more of your code! Here are some examples of what you can do with it:

variables

You can insert a variable to a JSX element (and its attributes) by using curly brackets:

Example 1

var x = 5;
<h1>x is {x}</h1>

Shows the value of x

Example 2

Example 3

Example 4

events

events and listeners - such as onclick can be assigned to JSX elements in a second:

(<button>Click me</button>).onclick = function(){
    alert("hello world");
}

Assign an onclick event to a button that alerts "hello world"

return (ClearlyJS components)

JSX and ClearlyHTML elements can be returned from functions and make some super useful components:

var allMessages = <div></div>;
function message(title, content){
    return <div parent={allMessages}>
        <h1>{title}</h1>
        <p>{content}</p>
    </div>
}

Every time the function is called - a new div with the specified title and content is being made and assigned to the messages div!