<commit_before>[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]

# React Templates

Lightweight templates for [React](http://facebook.github.io/react/index.html). 

* 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, and globals.

## How does it work
React Templates compiles an *.rt file (react template file - an extended HTML format) into a JavaScript file. This 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. 
<p>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.

## Playground
http://wix.github.io/react-templates/

## Yeoman generator
https://github.com/wix/generator-react-templates

## Hello react-templates
Here's a sample Hello project:<br/>
https://github.com/wix/hello-react-templates



###### Basic concepts for React templates
* Any valid HTML (including comments) is a template 
* {} to identify JS expression
* Built-in directives:
    * [rt-if](#rt-if)
    * [rt-repeat](#rt-repeat)
    * [rt-scope](#rt-scope)
    * [rt-props](#rt-props)
    * [rt-class](#rt-class)
    * [rt-require](#rt-require)
* [styles](#styles)
* [event handlers](#event handlers)

###### Why not use JSX?
Some 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. And this can be accomplished by creating DOM elements in code. Also, we like to separate code and HTML because it just feels right.

## Installation
You can install react-templates using npm:
```shell
npm install react-templates -g
```

## Usage
```shell
rt [file.rt|dir]* [options]
```

See more on CLI usage [here](https://github.com/wix/react-templates/blob/gh-pages/docs/cli.md).

In most cases, this package will be wrapped in a Grunt task, so CLI will not be used explicitly:
[grunt-react-templates](https://github.com/wix/grunt-react-templates).

# Template directives and syntax
<commit_msg>anchor links fix<commit_after>[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]

# React Templates

Lightweight templates for [React](http://facebook.github.io/react/index.html). 

* 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, and globals.

## How does it work
React Templates compiles an *.rt file (react template file - an extended HTML format) into a JavaScript file. This 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. 
<p>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.

## Playground
http://wix.github.io/react-templates/

## Yeoman generator
https://github.com/wix/generator-react-templates

## Hello react-templates
Here's a sample Hello project:<br/>
https://github.com/wix/hello-react-templates



###### Basic concepts for React templates
* Any valid HTML (including comments) is a template 
* {} to identify JS expression
* Built-in directives:
    * [rt-if](#rt-if)
    * [rt-repeat](#rt-repeat)
    * [rt-scope](#rt-scope)
    * [rt-props](#rt-props)
    * [rt-class](#rt-class)
    * [rt-require](#rt-require)
* [styles](#styles)
* [event handlers](#event-handlers)

###### Why not use JSX?
Some 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. And this can be accomplished by creating DOM elements in code. Also, we like to separate code and HTML because it just feels right.

## Installation
You can install react-templates using npm:
```shell
npm install react-templates -g
```

## Usage
```shell
rt [file.rt|dir]* [options]
```

See more on CLI usage [here](https://github.com/wix/react-templates/blob/gh-pages/docs/cli.md).

In most cases, this package will be wrapped in a Grunt task, so CLI will not be used explicitly:
[grunt-react-templates](https://github.com/wix/grunt-react-templates).

# Template directives and syntax

{'fraction_non_alphanumeric': 0.11074984759195286, 'fraction_numerical': 0.0, 'mean_word_length': 4.309600862998921, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '843550', 'n_tokens_mistral': 1432, 'n_tokens_neox': 1370, 'n_words': 585}