A 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:
\nhttps://github.com/wix/hello-react-templates\n\nHere's a sample Hello project with webpack, es6 and hot reload:
\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{this.state.linkText}\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
Note the following:
\n1. In React templates, you can use the \"class\" attribute as you would in HTML.
\n2. If you use both class and rt-class on the same HTML element, they get merged.\n\n###### Sample:\n```html\n
` and `