bobwen-dev
/
react-templates
mirror of https://github.com/bobwen-dev/react-templates
1
0
Fork 0
Code Issues Releases Wiki Activity

More docs

This commit is contained in:
amitk 2014-11-16 00:32:40 +02:00
parent c6055f8628
commit 5b04d2e434
1 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
README.md
View File

@ -1,5 +1,4 @@
react-templates
===============
# react-templates
Light weight templates for react. Reasons that we love it:
@ -9,13 +8,12 @@ Light weight templates for react. Reasons that we love it:
* Declerative coding for presentation. HTML that you write and inspect look similar
* Easy syntax. Similar to HTML. All IDEs recognize this format
How does it work
----------------
React templates compiles a *.rt file (react template - extended HTML format) into a javascript file. Currently, this file supports requirejs format, that will return a function. This function, when applied, will return a virtual react DOM (based on React.DOM elements and user custom components). A common use case would be that a React component would require a JS file generated by a template, and then call func.apply(this), causing the template to have the component as its context.
## How does it work
React templates compiles a *.rt file (react template - extended HTML format) into a javascript file. Currently, this file supports requirejs format, that will return a function. This function, when applied, will return a virtual react DOM (based on React.DOM elements and user custom components). A common use case would be that a React component would require a JS file generated by a template, and then call ``func.apply(this)``, causing the template to have the component as its context.
**Basic concepts for react templates:**
###### Basic concepts for react templates:
* Any valid HTML is a template (and comments)
* {} to identify JS execution context
* {} to identify JS expression
* rt-if
* rt-repeat
* rt-scope
@ -23,3 +21,29 @@ React templates compiles a *.rt file (react template - extended HTML format) int
* style
* event handlers
* doctype rt, require dependencies, and calling other components
###### Why not use JSX?
Some love jsx, some don't. We don't. Well, not that we don't like it, but it seems to fit only components with very little html inside, which could be done by creating elements in code. Also, we like to separate code and html. It just feels right.
## Any valid HTML is a template
Writing any html is a valid template. This does not apply to event handlers ("on" methods). See the section about event handlers
## {} to identify JS expression
In html attributes and text, you can replace context by a javascript expression. You do this by wrapping it in {}. If this is inside an attribute, it still needs to be wrapped by quotes. In text, you can just use it.
Sample:
```
<a href="{this.state.linkRef}">{this.state.linkText}</a>
```
Compiled:
```
define([
'react',
'lodash'
], function (React, _) {
'use strict';
return function () {
return React.DOM.a({ 'href': this.state.linkRef }, this.state.linkText);
};
});
```