react-templates.react.txt

                     
   REACT-TEMPLATES   
                     


VERSION ==>                       #0.3.2
                                  #See online doc for use with React-Native

JSX ALTERNATIVE ==>               #Compiled to JavaScript FUNC()->createElement(...).
                                  #Difference with JSX:
                                  #  - separate file (see below)
                                  #  - {...OBJ}            -> rt-props
                                  #  - style={OBJ}         -> rt-style
                                  #  - JavaScript comments -> HTML comments
                                  #Advantages from JSX:
                                  #  - does not have to close self-closing tags
                                  #  - new HTML attributes (see below), especially rt-if, rt-repeat and rt-class

rt-props="OBJ"                    #Same as JSX {...OBJ}
rt-style="OBJ"                    #Same as JSX style={OBJ}


                                             /=+===============================+=\ 
                                            /  :                               :  \  
                                            )==:         SEPARATE FILE         :==(   
                                            \  :_______________________________:  /    
                                             \=+===============================+=/


DIFFERENT FILE ==>                #Forces putting template into a different file:
                                  #  - might need to pass `this` context when importing
                                  #  - can put in same file if:
                                  #     - wrapped in <template>
                                  #     - use --modules jsrt
                                  #The following syntax helps deal with having it in a different file:

<rt-require dependency="..."      #With AMD:      require(["..."], function (VAR) {  })
            as="VAR">             #With CommonJS: var VAR = require("...")
                                  #With ES6:      import VAR from "..."

rt-scope="VAL as VAR;..."         #var VAR = VAL;... 
                                  #return RELEM


                                             /=+===============================+=\ 
                                            /  :                               :  \  
                                            )==:             USAGE             :==(   
                                            \  :_______________________________:  /    
                                             \=+===============================+=/


rt FILE|DIR...                    #Creates FILE.rt.js. Input file must be FILE.rt
--modules amd|commonjs|es6|jsrt|
          typescript|none         #Def: none
--format stylish|json             #Def: stylish
--target-version                  #React version (def: latest)
--color                           #
--force                           #No filecheck

PLUGINS ==>                       #Grunt, Gulp, Browserify, Webpack


                                             /=+===============================+=\ 
                                            /  :                               :  \  
                                            )==:           FEATURES            :==(   
                                            \  :_______________________________:  /    
                                             \=+===============================+=/


NEW HTML ATTRIBUTES ==>           #Compiled version on the right. RELEM is current one.

rt-class="OBJ"                    #className:
                                  #  - passed if OBJ.CLASS true
                                  #  - merged with other class="..." and rt-class="..."

rt-if="TEST"                      #TEST ? RELEM : null

rt-repeat="VAR in ARR"            #_.map(ARR, function (VAR, VARIndex) { return RELEM })
                                  #`this` is correctly bound

onEVENT={FUNC}                    #Like JSX
onEVENT="(...) => ..."            #Creates function inline.
                                  #`this` is correctly bound

<RTYPE>
  <rt-template prop="VAR" 
               arguments="...">   #<RTYPE VAR={FUNC(...)-><RTYPE2>}>
     <RTYPE2>                     #`this` is correctly bound