{"id":13438018,"url":"https://github.com/wix-incubator/react-templates","last_synced_at":"2025-04-14T08:55:49.383Z","repository":{"id":23078702,"uuid":"26432432","full_name":"wix-incubator/react-templates","owner":"wix-incubator","description":"Light weight templates for react","archived":false,"fork":false,"pushed_at":"2023-06-28T11:49:13.000Z","size":5939,"stargazers_count":2817,"open_issues_count":77,"forks_count":211,"subscribers_count":185,"default_branch":"master","last_synced_at":"2025-03-24T22:34:37.228Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://wix.github.io/react-templates","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wix-incubator.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2014-11-10T10:47:49.000Z","updated_at":"2025-03-09T17:28:54.000Z","dependencies_parsed_at":"2024-01-14T19:14:40.009Z","dependency_job_id":"3fe344c0-896f-4caa-8398-5313555a3b86","html_url":"https://github.com/wix-incubator/react-templates","commit_stats":{"total_commits":71,"total_committers":7,"mean_commits":"10.142857142857142","dds":0.5352112676056338,"last_synced_commit":"becfc2b789c412c9189c35dc900ab6185713cdae"},"previous_names":["wix/react-templates"],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Freact-templates","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Freact-templates/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Freact-templates/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Freact-templates/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wix-incubator","download_url":"https://codeload.github.com/wix-incubator/react-templates/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248852111,"owners_count":21171839,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T03:01:02.196Z","updated_at":"2025-04-14T08:55:49.355Z","avatar_url":"https://github.com/wix-incubator.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","JavaScript"],"sub_categories":["Uncategorized"],"readme":"[![NPM version][npm-image]][npm-url]\n[![build status][travis-image]][travis-url]\n[![Coverage Status][coveralls-image]][coveralls-url]\n\n# React Templates\n\nLightweight templates for [React](http://facebook.github.io/react/index.html).\n\n* No runtime libraries. No magic. Simply precompile your way to clear React code.\n* Easy syntax that's similar to HTML, supported by most IDEs.\n* Clear separation of presentation and logic - almost zero HTML in component files.\n* Declarative coding ensures that the HTML that you write and the HTML you inspect look nearly identical.\n* Supports AMD, CommonJS, ES6, Typescript and globals.\n\n## How does it work\nReact Templates compiles an *.rt file (react template file - an extended HTML format) into a JavaScript file.\nThis file, which uses AMD syntax, returns a function. When invoked, this function returns a virtual React DOM based on React.DOM elements and custom user components.\n\u003cp\u003eA common use case would be that a regular React component would require a JavaScript file generated from a template,\nand then perform `func.apply(this)`, causing the template to have that component as its context.\n\n## Playground\nhttp://wix.github.io/react-templates/\n\n## Yeoman generator\nhttps://github.com/wix/generator-react-templates\n\n## Hello react-templates\nHere's a sample Hello project:\u003cbr/\u003e\nhttps://github.com/wix/hello-react-templates\n\nHere's a sample Hello project with webpack, es6 and hot reload:\u003cbr/\u003e\nhttps://github.com/wix/react-templates-transform-boilerplate\n\n## IntelliJ / WebStorm plugin\nhttp://plugins.jetbrains.com/plugin/7648\n\n\n## Basic concepts for React templates\n* Any valid HTML (including comments) is a template\n* {} to identify JS expression\n* Built-in directives:\n    * [rt-if](#rt-if)\n    * [rt-repeat](#rt-repeat)\n    * [rt-scope](#rt-scope)\n    * [rt-props](#rt-props)\n    * [rt-class](#rt-class)\n    * [rt-import](#rt-import)\n    * ~~rt-require~~ (deprecated, use rt-import)\n    * [rt-template](#rt-template)\n    * [rt-include](#rt-include)\n    * [rt-pre](#rt-pre)\n    * [rt-virtual](#rt-virtual)    \n* [styles](#styles)\n* [event handlers](#event-handlers)\n\n## Why not use JSX?\nSome love JSX, some don't. We don't. More specifically, it seems to us that JSX is only a good fit for components with very little HTML inside.\nAnd this can be accomplished by creating DOM elements in code. Also, we like to separate code and HTML because it just feels right.\n\n## Installation\nYou can install react-templates using npm:\n```shell\nnpm install react-templates -g\n```\n\n## Usage\n```shell\nrt [file.rt|dir]* [options]\n```\n\nSee more on CLI usage [here](https://github.com/wix/react-templates/blob/gh-pages/docs/cli.md).\n\nIn most cases, this package will be wrapped in a build task, so CLI will not be used explicitly:\n* Grunt: [grunt-react-templates](https://github.com/wix/grunt-react-templates)\n* Gulp: [gulp-react-templates](https://github.com/wix/gulp-react-templates)\n* Broccoli: [broccoli-react-templates](https://github.com/kraftwer1/broccoli-react-templates)\n* Browserify plugin: [react-templatify](https://www.npmjs.com/package/react-templatify)\n* Webpack loader : [react-templates-loader](https://github.com/AlexanderPavlenko/react-templates-loader)\n\n### Use React Templates for Native Apps?\nYou can get all the react templates functionality and more. [Click here for more info](https://github.com/wix/react-templates/blob/gh-pages/docs/native.md)\n\n# Template directives and syntax\n\n## Any valid HTML is a template\nAny HTML that you write is a valid template, except for inline event handlers (\"on\" attributes). See the \"event handlers\" section below for more information.\n\n## {} to identify JavaScript expressions\nTo embed JavaScript expressions in both attribute values and tag content, encapsulate them in {}.\nIf this is done inside an attribute value, the value still needs to be wrapped in quotes. For directives (see below), {} are not used.\n\n###### Sample:\n```html\n\u003ca href=\"{this.state.linkRef}\"\u003e{this.state.linkText}\u003c/a\u003e\n```\n###### Compiled:\n```javascript\ndefine([\n    'react',\n    'lodash'\n], function (React, _) {\n    'use strict';\n    return function () {\n        return React.DOM.a({ 'href': this.state.linkRef }, this.state.linkText);\n    };\n});\n```\n\n## rt-if\nThis 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.\n\n\n###### Sample:\n```html\n\u003cdiv rt-if=\"this.state.resultCode === 200\"\u003eSuccess!\u003c/div\u003e\n```\n###### Compiled:\n```javascript\ndefine([\n    'react',\n    'lodash'\n], function (React, _) {\n    'use strict';\n    return function () {\n        return this.state.resultCode === 200 ? React.DOM.div({}, 'Success!') : null;\n    };\n});\n```\n\n## rt-repeat\nRepeats a DOM node with its subtree for each item in an array. The syntax is `rt-repeat=\"itemVar, indexVar in arrayExpr\"`, where the element, `itemVar`, will be available in JavaScript context,\nand 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.\nIt 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`.\n\n###### Sample:\n```html\n\u003cdiv rt-repeat=\"myNum in this.getMyNumbers()\"\u003e{myNumIndex}. {myNum}\u003c/div\u003e\n```\n###### Compiled:\n```javascript\ndefine([\n    'react',\n    'lodash'\n], function (React, _) {\n    'use strict';\n    function repeatMyNum1(myNum, myNumIndex) {\n        return React.DOM.div({}, myNumIndex + '. ' + myNum);\n    }\n    return function () {\n        return _.map(this.getMyNumbers(), repeatMyNum1.bind(this));\n    };\n});\n```\n\n## rt-virtual\nThis 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. `rt-if` and `rt-repeat`.\n\n###### Sample:\nFor instance, to repeat several nodes at once without a shared root for each instance:\n```html\n\u003cul\u003e\n  \u003crt-virtual rt-repeat=\"n in [1,2,3]\"\u003e\n    \u003cli\u003e{n}\u003c/li\u003e\n    \u003cli\u003e{n*2}\u003c/li\u003e\n  \u003c/rt-virtual\u003e\n\u003c/ul\u003e\n```\n\n##### Compiled:\n```javascript\ndefine([\n    'react/addons',\n    'lodash'\n], function (React, _) {\n    'use strict';\n    function repeatN1(n, nIndex) {\n        return [\n            React.createElement('li', {}, n),\n            React.createElement('li', {}, n * 2)\n        ];\n    }\n    return function () {\n        return React.createElement.apply(this, [\n            'ul',\n            {},\n            _.map([\n                1,\n                2,\n                3\n            ], repeatN1.bind(this))\n        ]);\n    };\n});\n```\n## rt-scope\nThis directive creates a new JavaScript scope by creating a new method and invoking it with its current context. The syntax is `rt-scope=\"expr1 as var1; expr2 as var2`.\nThis allows for a convenient shorthand to make the code more readable. It also helps to execute an expression only once per scope.\n\n###### Sample:\n```html\n\u003cdiv rt-repeat=\"rpt in array\"\u003e\n    \u003cdiv rt-scope=\"')' as separator; rpt.val as val\"\u003e{rptIndex}{separator} {val}\u003c/div\u003e\n    \u003cdiv\u003e'rpt' exists here, but not 'separator' and 'val'\u003c/div\u003e\n\u003c/div\u003e\n```\n###### Compiled:\n```javascript\ndefine([\n    'react',\n    'lodash'\n], function (React, _) {\n    'use strict';\n    function scopeSeparatorVal1(rpt, rptIndex, separator, val) {\n        return React.DOM.div({}, rptIndex + separator + ' ' + val);\n    }\n    function repeatRpt2(rpt, rptIndex) {\n        return React.DOM.div({}, scopeSeparatorVal1.apply(this, [\n            rpt,\n            rptIndex,\n            ')',\n            rpt.val\n        ]), React.DOM.div({}, '\\'rpt\\' exists here, but not \\'separator\\' and \\'val\\''));\n    }\n    return function () {\n        return _.map(array, repeatRpt2.bind(this));\n    };\n});\n```\n\nSubsequent expressions may reference preceding variables, since generated code declares each alias as a `var` (as opposed to a function parameter, which get bound to formal parameter names only after evaluation),\nso you can do stuff like\n\n```html\n\u003cdiv rt-scope=\"users[userId] as user; user.profile as profile; profile.avatar as avatar;\"\u003e\n```\n\nWhen used with `rt-if`, 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\n```html\n\u003cdiv rt-if=\"user.profile\" rt-scope=\"user.profile.image as image\"\u003e\n```\n\nwithout risking accessing a field on an `undefined`, or doing something ugly like `user.profile \u0026\u0026 user.profile.image as image`.\n\nWhen used with `rt-repeat`, the `rt-scope` is evaluated for every iteration, so that iteration's `item` and `itemIndex` are in scope.\n\n## rt-props\nrt-props is used to inject properties into an element programmatically. It will merge the properties with the properties received in the template.\nThis 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.\nThe 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.\n\n###### Sample:\n```html\n\u003cinput style=\"height:10px;width:3px;\" rt-props=\"{style:{width:'5px'},type:'text'}\"/\u003e\n```\n###### Compiled:\n```javascript\ndefine([\n    'react',\n    'lodash'\n], function (React, _) {\n    'use strict';\n    return function () {\n        return React.DOM.input(_.merge({}, {\n            'style': {\n                height: '10px',\n                width: '3px'\n            }\n        }, {\n            style: { width: '5px' },\n            type: 'text'\n        }));\n    };\n});\n```\n\n## rt-class\nTo 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.\nIf the value is true, the class name will be included.\n\n\u003cp\u003eNote the following:\u003cbr/\u003e\n1. In React templates, you can use the \"class\" attribute as you would in HTML. \u003cbr/\u003e\n2. If you use both class and rt-class on the same HTML element, they get merged.\n\n###### Sample:\n```html\n\u003cdiv rt-scope=\"{blue: true, selected: this.isSelected()} as classes\"\u003e\n    These are logically equivalent\n    \u003cdiv rt-class=\"classes\"\u003eReference\u003c/div\u003e\n    \u003cdiv rt-class=\"{blue: true, selected: this.isSelected()}\"\u003eInline\u003c/div\u003e\n    \u003cdiv class=\"blue{this.isSelected() ? ' selected' : ''}\"\u003eUsing the class attribute\u003c/div\u003e\n\u003c/div\u003e\n```\n###### Compiled:\n```javascript\ndefine([\n    'react',\n    'lodash'\n], function (React, _) {\n    'use strict';\n    function scopeClasses1(classes) {\n        return React.DOM.div({}, 'These are logically equivalent', React.DOM.div({ 'className': React.addons.classSet(classes) }, 'Reference'), React.DOM.div({\n            'className': React.addons.classSet({\n                blue: true,\n                selected: this.isSelected()\n            })\n        }, 'Inline'), React.DOM.div({ 'className': 'blue' + this.isSelected() ? ' selected' : '' }, 'Using the class attribute'));\n    }\n    return function () {\n        return scopeClasses1.apply(this, [{\n                blue: true,\n                selected: this.isSelected()\n            }]);\n    };\n});\n```\n\n## rt-include\nOptionally choose to extract static contents out of rt files.\u003cbr\u003e\nrt-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.\n\n###### Sample:\ngiven `main.rt`:\n```html\n\u003cdiv\u003e\n  \u003crt-include src=\"./my-icon.svg\" /\u003e\n\u003c/div\u003e\n```\n\nand `my-icon.svg`:\n```html\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\"\u003e\n  \u003crect height=\"50\" width=\"50\" style=\"fill: #00f\"/\u003e\n\u003c/svg\u003e\n```\n\nis equivalent to:\n```html\n\u003cdiv\u003e\n  \u003csvg xmlns=\"http://www.w3.org/2000/svg\"\u003e\n      \u003crect height=\"50\" width=\"50\" style=\"fill: #00f\"/\u003e\n  \u003c/svg\u003e\n\u003c/div\u003e\n```\n\n## rt-pre\n\nWhen using the option `--normalize-html-whitespace` it allows to override the whitespace removal behaviour on a specific tag.\n\n###### Sample:\ngiven `main.rt`:\n```html\n\u003cspan rt-pre\u003e\n    here   repeating   whitespaces   are   preserved\n    even   if  --normalize-html-whitespace   is   on  \n\u003c/span\u003e\n\u003cspan\u003e    \n    here   repeating   whitespaces   are   removed\n    if  --normalize-html-whitespace   is   on   \n\u003c/span\u003e\n```\n\n`rt-pre` is applied automatically on `\u003cpre\u003e` and `\u003ctextarea\u003e` tags:\n\n###### Sample:\ngiven `main.rt`:\n```html\n\u003cpre\u003e\n    here   repeating   whitespaces   are   preserved\n    even   if  --normalize-html-whitespace   is   on  \n\u003c/pre\u003e\n```\n\n## style\nReact templates allow the settings of styles inline in HTML, optionally returning an object from the evaluation context. By default, style names will be converted from hyphen-style to camelCase-style naming.\n\nTo embed JavaScript inside a style attribute, single curly braces are used. To embed an entire object, double curly braces are used. *Note*: When embedding objects, styles must conform to camelCase-style naming.\n\n###### Sample:\n```html\n\u003cdiv\u003e\n    These are really equivalent\n    \u003cdiv style=\"color:white; line-height:{this.state.lineHeight}px\"\u003eInline\u003c/div\u003e\n    \u003cdiv style=\"{{'color': 'white', 'lineHeight': this.state.lineHeight + 'px'}}\"\u003eInline\u003c/div\u003e\n\u003c/div\u003e\n```\n###### Compiled:\n```javascript\ndefine([\n    'react',\n    'lodash'\n], function (React, _) {\n    'use strict';\n    return function () {\n        return React.DOM.div({}, 'These are really equivalent', React.DOM.div({\n            'style': {\n                color: 'white',\n                lineHeight: this.state.lineHeight + 'px'\n            }\n        }, 'Inline'), React.DOM.div({\n            'style': {\n                'color': 'white',\n                'lineHeight': this.state.lineHeight + 'px'\n            }\n        }, 'Inline'));\n    };\n});\n```\n\n## stateless components\nSince React v0.14, [React allows defining a component as a pure function of its props](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions).\nTo enable creating a stateless component using react templates, add the `rt-stateless` attribute to the template's root element.\nUsing `rt-stateless` generates a stateless functional component instead of a render function.\nThe resulting function receives `props` and `context` parameters to be used in the template instead of `this.props`.\n\n###### Sample:\n```html\n\u003cdiv rt-stateless\u003eHello {props.person}\u003c/div\u003e\n```\n###### Compiled:\n```html\ndefine([\n    'react',\n    'lodash'\n], function (React, _) {\n    'use strict';\n    return function (props, context) {\n        return React.createElement('div', {}, 'Hello ', props.person);\n    };\n});\n```\n\n## event handlers\nReact event handlers accept function references inside of {}, such as `onClick=\"{this.myClickHandler}\"`. When functions are not needed, lambda notation can be used,\nwhich will create a React template that creates a function for the included code. There is no performance impact, as the function created is bound to the context instead of being recreated.\n\u003cp\u003eThe lambda notation has the form: `onClick=\"(evt) =\u003e console.log(evt)\"`. In this example, **evt** is the name of the first argument passed into the inline function.\nWith browser events, this will most likely be the React synthetic event. However, if you expect a property that starts with **on**Something, then React templates will treat it as an event handler.\nIf you have an event handler called **onBoxSelected** that triggers an event with row and column params, you can write `onBoxSelected=\"(row, col)=\u003ethis.doSomething(row,col)\"`.\nA no-param version is supported as well: `onClick=\"()=\u003econsole.log('just wanted to know it clicked')\"`.\n\n###### Sample:\n```html\n\u003cdiv rt-repeat=\"item in items\"\u003e\n    \u003cdiv onClick=\"()=\u003ethis.itemSelected(item)\" onMouseDown=\"{this.mouseDownHandler}\"\u003e\n\u003c/div\u003e\n```\n###### Compiled:\n```javascript\ndefine([\n    'react',\n    'lodash'\n], function (React, _) {\n    'use strict';\n    function onClick1(item, itemIndex) {\n        this.itemSelected(item);\n    }\n    function repeatItem2(item, itemIndex) {\n        return React.DOM.div({}, React.DOM.div({\n            'onClick': onClick1.bind(this, item, itemIndex),\n            'onMouseDown': this.mouseDownHandler\n        }));\n    }\n    return function () {\n        return _.map(items, repeatItem2.bind(this));\n    };\n});\n```\n\n## rt-import and using other components in the template\nIn many cases, you'd like to use either external code or other components within your template.\nTo do so, you can use an `rt-import` tag that lets you include dependencies in a syntax similar to ES6 imports:\n```xml\n\u003crt-import name=\"*\" as=\"depVarName\" from=\"depName\"/\u003e\n\n```\nOnce included, **depVarName** will be in scope.\nYou can only use rt-import tags at the beginning of your template. When including React components, they can be referred to by their tag name inside a template.\nFor example, `\u003cMySlider prop1=\"val1\" onMyChange=\"{this.onSliderMoved}\"\u003e`. Nesting is also supported: `\u003cMyContainer\u003e\u003cdiv\u003echild\u003c/div\u003e\u003cdiv\u003eanother\u003c/div\u003e\u003c/MyContainer\u003e`.\n\nChildren are accessible from **this.props.children**.\n\n###### Sample:\n```xml\n\u003crt-import name=\"member\" from=\"module-name\"/\u003e\n\u003crt-import name=\"member\" as=\"alias2\" from=\"module-name\"/\u003e\n\u003crt-import name=\"*\" as=\"alias3\" from=\"module-name\"/\u003e\n\u003crt-import name=\"default\" as=\"alias4\" from=\"module-name\"/\u003e\n\u003cdiv\u003e\n\u003c/div\u003e\n```\n###### Compiled (ES6 flag):\n```javascript\nimport * as React from 'react/addons';\nimport * as _ from 'lodash';\nimport { member } from 'module-name';\nimport { member as alias2 } from 'module-name';\nimport * as alias3 from 'module-name';\nimport alias4 from 'module-name';\nexport default function () {\n    return React.createElement('div', {});\n}\n```\n###### Compiled (AMD):\n```javascript\ndefine('div', [\n    'react',\n    'lodash',\n    'module-name',\n    'module-name',\n    'module-name',\n    'module-name'\n], function (React, _, $2, $3, alias3, $5) {\n    'use strict';\n    var member = $2.member;\n    var alias2 = $3.member;\n    var alias4 = $5.default;\n    return function () {\n        return React.createElement('div', {});\n    };\n});\n```\n###### Compiled (with CommonJS flag):\n```javascript\n'use strict';\nvar React = require('react/addons');\nvar _ = require('lodash');\nvar member = require('module-name').member;\nvar alias2 = require('module-name').member;\nvar alias3 = require('module-name');\nvar alias4 = require('module-name').default;\nmodule.exports = function () {\n    return React.createElement('div', {});\n};\n```\n\n#### deprecated: rt-require\nThe tag `rt-require` is deprecated and replaced with `rt-import`.\nIts syntax is similar to `rt-import` but does not allow default imports:\n```html\n\u003crt-require dependency=\"comps/myComp\" as=\"MyComp\"/\u003e\n\u003crt-require dependency=\"utils/utils\" as=\"utils\"/\u003e\n\u003cMyComp rt-repeat=\"item in items\"\u003e\n    \u003cdiv\u003e{utils.toLower(item.name)}\u003c/div\u003e\n\u003c/MyComp\u003e\n```\n\n## Inline Templates\nAlthough we recommend separating the templates to a separate `.rt` file, there's an option to use a template inline as the render method (à la JSX).\nTo do that, write your code in a `.jsrt` file, and send it to react-templates with the `modules` flag set to `jsrt`.\n###### Sample:\n```javascript\ndefine(['react','lodash'], function (React, _) {\n    var comp = React.createClass({\n        render:\n            \u003ctemplate\u003e\n                \u003cdiv\u003ehello world\u003c/div\u003e\n            \u003c/template\u003e\n    });\n\n    return comp;\n});\n\n```\n\n###### Compiled (with jsrt flag):\n\n```javascript\n\ndefine([\n    'react',\n    'lodash'\n], function (React, _) {\n    var comp = React.createClass({\n        render: function () {\n            return function () {\n                return React.createElement('div', {}, 'hello world');\n            };\n        }()\n    });\n    return comp;\n});\n\n```\n\n## rt-template, and defining properties template functions\nIn cases you'd like to use a property that accepts a function and return renderable React component.\nYou should use a **rt-template** tag that will let you do exactly that: `\u003crt-template prop=\"propName\" arguments=\"arg1, arg2\"/\u003e`.\n\nTemplates can be used only as an immediate child of the component that it will be used in. All scope variable will be available in the template function.\n\n###### Sample:\n```html\n\u003cMyComp data=\"{[1,2,3]}\"\u003e\n    \u003crt-template prop=\"renderItem\" arguments=\"item\"\u003e\n        \u003cdiv\u003e{item}\u003c/div\u003e\n    \u003c/rt-template\u003e\n\u003c/MyComp\u003e\n```\n###### Compiled (AMD):\n```javascript\ndefine([\n    'react/addons',\n    'lodash'\n], function (React, _) {\n    'use strict';\n    function renderItem1(item) {\n        return React.createElement('div', {}, item);\n    }\n    return function () {\n        return React.createElement(MyComp, {\n            'data': [\n                1,\n                2,\n                3\n            ],\n            'renderItem': renderItem1.bind(this)\n        });\n    };\n});\n```\n###### Compiled (with CommonJS flag):\n```javascript\n'use strict';\nvar React = require('react/addons');\nvar _ = require('lodash');\nfunction renderItem1(item) {\n    return React.createElement('div', {}, item);\n}\nmodule.exports = function () {\n    return React.createElement(MyComp, {\n        'data': [\n            1,\n            2,\n            3\n        ],\n        'renderItem': renderItem1.bind(this)\n    });\n};\n```\n\n###### Compiled (with ES6 flag):\n```javascript\nimport React from 'react/addons';\nimport _ from 'lodash';\nfunction renderItem1(item) {\n    return React.createElement('div', {}, item);\n}\nexport default function () {\n    return React.createElement(MyComp, {\n        'data': [\n            1,\n            2,\n            3\n        ],\n        'renderItem': renderItem1.bind(this)\n    });\n};\n```\n\n## Contributing\n\nSee the [Contributing page](CONTRIBUTING.md).\n\n## License\nCopyright (c) 2015 Wix. Licensed under the MIT license.\n\n[npm-image]: https://img.shields.io/npm/v/react-templates.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/react-templates\n[travis-image]: https://img.shields.io/travis/wix/react-templates/master.svg?style=flat-square\n[travis-url]: https://travis-ci.org/wix/react-templates\n[coveralls-image]: https://img.shields.io/coveralls/wix/react-templates/master.svg?style=flat-square\n[coveralls-url]: https://coveralls.io/r/wix/react-templates?branch=master\n[downloads-image]: http://img.shields.io/npm/dm/react-templates.svg?style=flat-square\n[downloads-url]: https://npmjs.org/package/react-templates\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwix-incubator%2Freact-templates","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwix-incubator%2Freact-templates","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwix-incubator%2Freact-templates/lists"}