Light weight templates for react -> write html get valid react code
npm install react-templates[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Coverage Status][coveralls-image]][coveralls-url]
Lightweight templates for React.
* No runtime libraries. No magic. Simply precompile your way to clear React code.
* Easy syntax that's similar to HTML, supported by most IDEs.
* Clear separation of presentation and logic - almost zero HTML in component files.
* Declarative coding ensures that the HTML that you write and the HTML you inspect look nearly identical.
* Supports AMD, CommonJS, ES6, Typescript and globals.
A common use case would be that a regular React component would require a JavaScript file generated from a template,
and then perform func.apply(this), causing the template to have that component as its context.
Here's a sample Hello project with webpack, es6 and hot reload:
https://github.com/wix/react-templates-transform-boilerplate
shell
npm install react-templates -g
`Usage
shell
rt [file.rt|dir]* [options]
`See more on CLI usage here.
In most cases, this package will be wrapped in a build task, so CLI will not be used explicitly:
* Grunt: grunt-react-templates
* Gulp: gulp-react-templates
* Broccoli: broccoli-react-templates
* Browserify plugin: react-templatify
* Webpack loader : react-templates-loader
$3
You can get all the react templates functionality and more. Click here for more infoTemplate directives and syntax
Any valid HTML is a template
Any HTML that you write is a valid template, except for inline event handlers ("on" attributes). See the "event handlers" section below for more information.{} to identify JavaScript expressions
To embed JavaScript expressions in both attribute values and tag content, encapsulate them in {}.
If this is done inside an attribute value, the value still needs to be wrapped in quotes. For directives (see below), {} are not used.###### Sample:
html
{this.state.linkText}
`
###### Compiled:
javascript
define([
'react',
'lodash'
], function (React, _) {
'use strict';
return function () {
return React.DOM.a({ 'href': this.state.linkRef }, this.state.linkText);
};
});
`rt-if
This lets you add conditions to a subtree of HTML. If the condition evaluates to true, the subtree will be returned; otherwise, it will not be calculated. It is implemented as a ternary expression.
###### Sample:
html
Success!
`
###### Compiled:
javascript
define([
'react',
'lodash'
], function (React, _) {
'use strict';
return function () {
return this.state.resultCode === 200 ? React.DOM.div({}, 'Success!') : null;
};
});
`rt-repeat
Repeats a DOM node with its subtree for each item in an array. The syntax is , where the element, itemVar, will be available in JavaScript context,
and an itemVarIndex will be created to represent the index of the item. By using this naming scheme, repeated expressions have access to all levels of nesting.
It is also possible to declare a custom index variable using the syntax rt-repeat="itemVar, indexVar in arrayExpr", in which case the index variable will be indexVar.###### Sample:
`html
{myNumIndex}. {myNum}
`
###### Compiled:
javascript
define([
'react',
'lodash'
], function (React, _) {
'use strict';
function repeatMyNum1(myNum, myNumIndex) {
return React.DOM.div({}, myNumIndex + '. ' + myNum);
}
return function () {
return _.map(this.getMyNumbers(), repeatMyNum1.bind(this));
};
});
`rt-virtual
This directive creates as a virtual node, which will not be rendered to the DOM, but can still be used as a root for directives, e.g. and rt-repeat.###### Sample:
For instance, to repeat several nodes at once without a shared root for each instance:
`html
- {n}
- {n*2}
`##### Compiled:
javascript
define([
'react/addons',
'lodash'
], function (React, _) {
'use strict';
function repeatN1(n, nIndex) {
return [
React.createElement('li', {}, n),
React.createElement('li', {}, n * 2)
];
}
return function () {
return React.createElement.apply(this, [
'ul',
{},
_.map([
1,
2,
3
], repeatN1.bind(this))
]);
};
});
`
rt-scope
This directive creates a new JavaScript scope by creating a new method and invoking it with its current context. The syntax is .
This allows for a convenient shorthand to make the code more readable. It also helps to execute an expression only once per scope.###### Sample:
`html
{rptIndex}{separator} {val}
'rpt' exists here, but not 'separator' and 'val'
`
###### Compiled:
javascript
define([
'react',
'lodash'
], function (React, _) {
'use strict';
function scopeSeparatorVal1(rpt, rptIndex, separator, val) {
return React.DOM.div({}, rptIndex + separator + ' ' + val);
}
function repeatRpt2(rpt, rptIndex) {
return React.DOM.div({}, scopeSeparatorVal1.apply(this, [
rpt,
rptIndex,
')',
rpt.val
]), React.DOM.div({}, '\'rpt\' exists here, but not \'separator\' and \'val\''));
}
return function () {
return _.map(array, repeatRpt2.bind(this));
};
});
`Subsequent expressions may reference preceding variables, since generated code declares each alias as a
(as opposed to a function parameter, which get bound to formal parameter names only after evaluation),
so you can do stuff like`html
`When used with
, the rt-if condition is evaluated first, and only if it is truthy, the rt-scope mappings are processed. This means you can write things like
`html
`without risking accessing a field on an
, or doing something ugly like user.profile && user.profile.image as image.When used with
rt-repeat, the rt-scope is evaluated for every iteration, so that iteration's item and itemIndex are in scope.rt-props
rt-props is used to inject properties into an element programmatically. It will merge the properties with the properties received in the template.
This option allows you to build properties based on external logic and pass them to the template. It is also useful when passing properties set on the component to an element within the template.
The expected value of this attribute is an expression returning an object. The keys will be the property name, and the values will be the property values.###### Sample:
`html
`
###### Compiled:
javascript
define([
'react',
'lodash'
], function (React, _) {
'use strict';
return function () {
return React.DOM.input(_.merge({}, {
'style': {
height: '10px',
width: '3px'
}
}, {
style: { width: '5px' },
type: 'text'
}));
};
});
`rt-class
To reduce the boilerplate code when setting class names programatically, you can use the rt-class directive. It expects a JSON object with keys as class names, and a Boolean as the value.
If the value is true, the class name will be included.Note the following:
1. In React templates, you can use the "class" attribute as you would in HTML.
2. If you use both class and rt-class on the same HTML element, they get merged.
###### Sample:
html
These are logically equivalent
Reference
Inline
Using the class attribute
`
###### Compiled:
javascript
define([
'react',
'lodash'
], function (React, _) {
'use strict';
function scopeClasses1(classes) {
return React.DOM.div({}, 'These are logically equivalent', React.DOM.div({ 'className': React.addons.classSet(classes) }, 'Reference'), React.DOM.div({
'className': React.addons.classSet({
blue: true,
selected: this.isSelected()
})
}, 'Inline'), React.DOM.div({ 'className': 'blue' + this.isSelected() ? ' selected' : '' }, 'Using the class attribute'));
}
return function () {
return scopeClasses1.apply(this, [{
blue: true,
selected: this.isSelected()
}]);
};
});
`rt-include
Optionally choose to extract static contents out of rt files.
rt-include is a "macro" that takes a text file (e.g svg/html/xml) and injects it into the file as if it was part of the original markup.###### Sample:
given
:
`html
`and
:
`html
`is equivalent to:
html
`rt-pre
When using the option
it allows to override the whitespace removal behaviour on a specific tag.###### Sample:
given
main.rt:
`html
here repeating whitespaces are preserved
even if --normalize-html-whitespace is on
here repeating whitespaces are removed
if --normalize-html-whitespace is on
` is applied automatically on and