JSX
JSX is a syntax extension which enables HTML-like templates to be defined inside JavaScript code. JSX supports custom components and makes view templates stylish and effective.
Babel
Babel is a tool which compiles ECMAScript 6 and JSX into ECMAScript 5 (JavaScript). Babel has a plugin-based architecture which makes the transformation process very configurable.
Babel compiles CxJS (JSX) into ECMAScript 5 using the babel-plugin-transform-cx-jsx plugin which is
available for installation over npm.
If you take a look at the following example, you will see how JSX code is transformed into JS configuration objects.
<cx>
<div>
<TextField
value-bind="person.name"
required
label="Label"
/>
</div>
</cx>
// The code below is equivalent to the code above
{
type: HtmlElement,
tag: 'div',
children: [{
type: TextField,
value: {
bind: 'person.name'
},
required: true,
label: 'Label'
}]
}CxJS Specific Features
All JSX code blocks related to CxJS must be wrapped into the cx root element.
If the code is not wrapped in the cx root element,
it will be compiled using React's JSX compiler which will produce different results.
Data-binding Attributes
CxJS supports declarative data-binding using -bind, -tpl and -expr attribute suffixes.
Bindings establish connections between widget properties and values in the Store
pointed by the binding's path. Whenever data changes, widgets are automatically updated.
Special binding syntax enables very readable and developer-friendly view code.
Conditional Rendering
CxJS exposes the visible property on all elements.
This property controls whether an element should or should not be rendered.
If visible is set or evaluated to false, the element and its children will not be rendered. The
application will behave as if the element does not exists. Check out the following example.
<div visible-expr="!{form.valid}">
Please correct all errors in the form and try again.
</div>Whitespace is sometimes ignored which can cause frustration for the developer.
CxJS offers the ws attribute which instructs CxJS to keep the whitespace to make it more
convenient for the developer.
<a href="#" class="btn" ws>
<i class="fa fa-icon" /> Link
</a>In React, style needs to be an object and className is a replacement for the class attribute.
CxJS does not have these restrictions, and you can freely use style strings, as well as class or
className attributes.
If class is used as an object, all keys whose corresponding values
are equal to true will be added to the class list.
<div class={{ panel: true, collapsed: { expr: '{panel.collapsed}' }}}>In CxJS it will be common to see the attribute onClick="save". This is a shorthand syntax which invokes
the save method defined in the active controller.
<Button onClick="save">Save</Button>Another feature that makes CxJS stand out is the fact that in CxJS you can use text and innerHtml
on all HTML container elements to set the inner content of the element.
The innerHtml property is very convenient for setting the inner content obtained through Markdown
transformation or an AJAX call.
<h2 text-bind="person.name" />
<div innerHtml-bind="html" />