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
+## Playground
http://wix.github.io/react-templates/
## Yeoman generator
https://github.com/wix/generator-react-templates
## Hello React-Templates
-There's a sample Hello project
+Here's a sample Hello project:
https://github.com/wix/hello-react-templates
-###### Basic concepts for react templates
-* Any valid HTML is a template (and comments)
+###### Basic concepts for react-templates
+* Any valid HTML (including comments) is a template
* {} to identify JS expression
* rt-if
* rt-repeat
@@ -40,7 +41,7 @@ https://github.com/wix/hello-react-templates
* rt-require, and using other components in the template
###### Why not use JSX?
-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.
+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, which can be accomplished instead by creating elements in code. Also, we like to separate code and HTML - it just feels right.
## Installation
You can install react-templates using npm:
@@ -53,18 +54,18 @@ npm install react-templates -g
rt [file.rt|dir]* [options]
```
-See more on CLI usage [here](https://github.com/wix/react-templates/blob/gh-pages/docs/cli.md)
+See more on CLI usage [here](https://github.com/wix/react-templates/blob/gh-pages/docs/cli.md).
-Note that in most cases, this package will be wrapped in a Grunt task, so that cli will not be used explicitly.
-[grunt-react-templates](https://github.com/wix/grunt-react-templates)
+In most cases, this package will be wrapped in a Grunt task, so that CLI will not be used explicitly:
+[grunt-react-templates](https://github.com/wix/grunt-react-templates).
# Template directives and syntax
## Any valid HTML is a template
-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
+Any HTML that you write is a valid template, except for inline event handlers ("on" attributes). See the "event handlers" section for more information.
## {} 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.
+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 in quotes. In tag content, you can just use it.
###### Sample:
```html
@@ -82,10 +83,10 @@ define([
};
});
```
-*Note*: within the special **"rt-"** directives (see below), simple strings don't make sense, as all these directives are used for specifying execution instructions. Therefore, in these directives, you should not use {}
+*Note*: within the special **"rt-"** directives (see below), simple strings don't make sense, as all these directives are used for specifying execution instructions. Therefore, in these directives, you should not use {}.
## rt-if
-This gives you the ability to add conditions to a sub-tree of html. If the condition is evaluated to true, the subree will be returned, otherwise, it will not be calculated. It is implemented by a trinary expression
+This 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 by a trinary expression.
###### Sample:
@@ -106,7 +107,7 @@ define([
```
## rt-repeat
-Repeats a node with its subtree for each item in an array. This is implemented by creating a method that is passed to a map call as a callback. It creates a real context for the iterated variable. The syntax is `rt-repeat="itemVar in arrayExpr"`. Within the scope of the element, `itemVar` will be available in javascript context, and also an `itemVarIndex` will be created to represent the index of the item. If the definition is `myNum in this.getMyNumbers()`, than there will be 2 variables in the scope: `myNum` and `myNumIndex`. This naming is used to allow nesting of repeat expression with access to all levels.
+Repeats a node with its subtree for each item in an array. To implement, create a method that is passed to a map call as a callback, which creates a real context for the iterated variable. The syntax is `rt-repeat="itemVar in arrayExpr"`. Within the scope of the element, `itemVar` will be available in JavaScript context, and an `itemVarIndex` will also be created to represent the index of the item. If the definition is `myNum in this.getMyNumbers()`, then there will be 2 variables in the scope: `myNum` and `myNumIndex`. This naming gives repeat expressions access to all levels of nesting.
###### Sample:
```html
@@ -129,7 +130,7 @@ define([
```
## rt-scope
-This directive creates a new javascript scope. It actually creates a new method for this scope, and calls it with its current context. The syntax is `rt-scope="expr1 as var1; expr2 as var2`. This gives a convenience method to shorten stuff up in a scope and make the code more readable. It also helps to execute an expression only once in a scope instead of every chunk that needs it.
+This 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`. This allows for a convenient shorthand to make the code more readable. It also helps to execute an expression only once per scope.
###### Sample:
```html
@@ -163,7 +164,7 @@ define([
```
## rt-props
-This directive is used to inject properties to an element programmatically. It will merge the properties with the properties received in the template. This option allows the code writer to build properties based on some app logic and pass them to the template. It is also useful when passing properties set on the component to an element within the template. The expected value of this attribute is an expression returning an object. The keys will be the properties and the values will be the property values.
+rt-props is used to inject properties into an element programmatically. It will merge the properties with the properties received in the template. This option allows the code writer to build properties based on some app logic and pass them to the template. It is also useful when passing properties set on the component to an element within the template. The expected value of this attribute is an expression returning an object. The keys will be the properties, and the values will be the property values.
###### Sample:
```html
@@ -191,9 +192,11 @@ define([
```
## rt-class
-In order to reduce the boiler-plate code when programatically setting class names, you can use the rt-class directive. It expectes to get a JSON object with keys as class names, and a value of true or false as the value. If the value is true, the class name will be included. Please note the following:
-1. In react templates, you can use the "class" attribute the same as you'd do in html. If you like, you can even have execution context within
-2. You cannot use class and rt-class on the same html element
+To reduce the boilerplate code when setting class names programatically, you can use the rt-class directive. It expects to get a JSON object with keys as class names, and true or false as the value. If the value is true, the class name will be included.
+
+
Note the following:
+1. In React templates, you can use the "class" attribute as you would in HTML. You can even have execution context within it.
+2. You cannot use class and rt-class on the same HTML element.
###### Sample:
```html
@@ -229,7 +232,7 @@ define([
```
## style
-In order to make it closer to html, we allow the settings of inline styles. In addition, this will take care of changing the styles from hyphen-style to camelCase style. If you'd like, you can still return an object from evaluation context. Please note that if you do it inline, you'll need to open single curly braces for the js context, and another for the object. Also, you'll need to use camelCase if using it that way
+To make React templates more similar to HTML, we allow the settings of inline styles. This will change the styles from hyphen to camelCase. And you can still return an object from evaluation context. Please note that if you set inline styles, you'll need to open single curly braces for the js context, and another for the object. You'll also need to use camelCase.
###### Sample:
```html
@@ -263,7 +266,8 @@ define([
```
## event handlers
-React event handlers accept function pointers. Therefore, when using event, you can just open an execution context and provide a pointer to a method. This would look like `onClick="{this.myClickHandler}"`. However, sometimes there's very little to do on click, or we just want to call a method with bound parameters. In that case, you can use a lambda notation, which will result in creating a react template creating a method for the handler. It does not have a performance impact, as the method is created once, and just bound to the context instead of created again. The lambda notation will look like this `onClick="(evt) => console.log(evt)"`. In this example, **evt** was the name you choose for the first argument that will be passed into your inline method. With 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. So if you have an event handler called **onBoxSelected** that will trigger an event with a row and column params, you can write `onBoxSelected="(row, col)=>this.doSomething(row,col)"`. You can use a no-param version as well `onClick="()=>console.log('just wanted to know it clicked')"`
+React event handlers accept function pointers. Therefore, when using event handlers, you can just open an execution context and provide a pointer to a method. This would look like `onClick="{this.myClickHandler}"`. However, sometimes there's very little to do on click, or we just want to call a method with bound parameters. In that case, you can use lambda notation, which will create a React template that creates a method for the handler. It does not have a performance impact, as the method is created once and is bound to the context instead of being created again.
+
The lambda notation will look like this: `onClick="(evt) => console.log(evt)"`. In this example, **evt** was the name you chose for the first argument that will be passed into your inline method. With 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. So if you have an event handler called **onBoxSelected** that will trigger an event with row and column params, you can write `onBoxSelected="(row, col)=>this.doSomething(row,col)"`. You can use a no-param version as well: `onClick="()=>console.log('just wanted to know it clicked')"`.
###### Sample:
```html
@@ -294,7 +298,7 @@ define([
```
## rt-require, and using other components in the template
-In many cases, you'd like to use either library code, or other components within your template. In order to do so, you can define a **rt-require** tag and indicate dependencies. You do so by `