bobwen-dev/react-templates
1
0
Fork 0
mirror of https://github.com/bobwen-dev/react-templates synced 2025-04-12 00:56:39 +02:00
Code Issues Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Dan Shappir 2014-11-18 18:20:16 +02:00
parent 18137686c7
commit 3464a80e72
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
README.md
View File

@ -1,15 +1,15 @@
# react-templates
Light weight templates for react. Reasons that we love it:
Light weight templates for [React](http://facebook.github.io/react/index.html). Reasons that we love it:
* No runtime libraries. No magic. Just simple pre-compilation to a clear code
* No runtime libraries. No magic. Just simple pre-compilation to a clear React code
* Super easy to write panels. By panels we mean components that have a lot of HTML code and non-reusable logic
* Very good separation of presentation and logic. Almost no HTML within the component file
* 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 file - 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.
React templates compiles a *.rt file (react template file - extended HTML format) into a JavaScript file. This file - which currently utilizes RequireJS format - returns a function. This function, when invoked, returns a virtual React DOM (based on React.DOM elements and custom user components). 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.
###### Basic concepts for react templates
* Any valid HTML is a template (and comments)
@ -23,22 +23,22 @@ React templates compiles a *.rt file (react template file - extended HTML format
* 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.
Some love JSX, some don't. We don't. More specifically, it seems to us that JSX is a good fit only for components with very little HTML inside, which can be accomplished by creating elements in code. Also, we like to separate code and HTML. It just feels right.
## Usage
**src/cli.js < filename.rt >**
*(you might need to provide execution permission to the file)*
Note that in most cases, this package will be wrapped in a grunt task, so the cli will not be used directly
TODO: pointer to the grunt repository
Note that in most cases, this package will be wrapped in a Grunt task, so that cli will not be used explicitly.
TODO: pointer to the Grunt repository
# Template directives and syntax
## 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
Any HTML that you write is a valid template, except for inline event handler ("on" attributes). See the section about event handlers for more information
## {} 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.
## {} to identify JavaScript expressions
You can easily embed JavaScript expressions in both attribute values and content by encapsulating them in {}. If this is done inside an attribute value, the value still needs to be wrapped by quotes. In tag content, you can just use it.
###### Sample:
```html