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

update docs

This commit is contained in:
ido 2014-12-09 16:29:38 +02:00
parent 2ebafe4580
commit 83ef37633a
4 changed files with 32 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
README.md
View File

@ -30,12 +30,22 @@ http://wix.github.io/react-templates/
###### 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.
## Installation
You can install ESLint using npm:
```shell
npm install git+ssh://git@github.com:wix/react-templates -g
```
## Usage
```shell
rt [file.rt|dir]* [options]
```
**src/cli.js < filename.rt >**
*(you might need to provide execution permission to the file)*
*(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 that cli will not be used explicitly.
TODO: pointer to the Grunt repository
[grunt-react-templates](https://github.com/wix/grunt-react-templates)
# Template directives and syntax
@ -300,3 +310,6 @@ define([
};
});
```
## License
Copyright (c) 2014 Wix. Licensed under the MIT license.

3
fiddle.html
View File

@ -27,9 +27,6 @@
<!--<script src="playground/libs.browser.js"></script>-->
<script src="playground/rt-main.browser.js"></script>
<script data-main="playground/fiddle-main.js" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.js"></script>
<!--<script type="application/javascript">-->
<!--initFiddle();-->
<!--</script>-->
</body>
</html>

34
index.html
View File

@ -74,7 +74,7 @@
<div class="buttons-unit">
<a href="fiddle.html" class="button">RTFiddle</a>
<a href="/react/downloads.html" class="button">Download React v0.12.1</a>
<!--<a href="/react/downloads.html" class="button">Download React v0.12.1</a>-->
</div>
</div>
</div>
@ -119,26 +119,26 @@
<section id="home-section" class="home-section">
</section>
<hr class="home-divider" />
<section class="home-bottom-section">
<div class="buttons-unit">
<a href="docs/getting-started.html" class="button">Get Started</a>
<a href="downloads.html" class="button">Download React v0.12.1</a>
</div>
</section></p>
<!--<section class="home-bottom-section">-->
<!--<div class="buttons-unit">-->
<!--<a href="docs/getting-started.html" class="button">Get Started</a>-->
<!--<a href="downloads.html" class="button">Download React v0.12.1</a>-->
<!--</div>-->
<!--</section>-->
</section>
<footer class="wrap">
<div class="left">
A Facebook &amp; Instagram collaboration.<br>
<a href="/react/acknowledgements.html">Acknowledgements</a>
</div>
<div class="right">
&copy; 2013&ndash;2014 Facebook Inc.<br>
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
</div>
</footer>
<!--<footer class="wrap">-->
<!--<div class="left">-->
<!--A Facebook &amp; Instagram collaboration.<br>-->
<!--<a href="/react/acknowledgements.html">Acknowledgements</a>-->
<!--</div>-->
<!--<div class="right">-->
<!--&copy; 2013&ndash;2014 Facebook Inc.<br>-->
<!--Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.-->
<!--</div>-->
<!--</footer>-->
</div>
<div id="fb-root"></div>

15
playground/playground.js
View File

@ -52,23 +52,8 @@ define(['react', 'lodash', './playground-fiddle.rt', './playground.rt'], functio
};
}
//var z = {getInitialState: function () {return {name: 'reactTemplates'};}};
//var templateHTML = '<div>\n' +
// 'Have {_.filter(this.state.todos, {done:true}).length} todos done,\n' +
// 'and {_.filter(this.state.todos, {done:false}).length} not done\n' +
// ' <br/>\n' +
// ' <div rt-repeat="todo in this.state.todos" key="{todo.key}">\n' +
// ' <button onClick="()=>this.remove(todo)">x</button>\n' +
// ' <input type="checkbox" checked="{todo.done}" onChange="()=>this.toggleChecked(todoIndex)"/>\n' +
// ' <span style="text-decoration: {todo.done ? \'line-through\': \'none\'}">{todo.value}</span>\n' +
// ' </div>\n' +
// ' <input key="myinput" type="text" onKeyDown="(e) => if (e.keyCode == 13) { e.preventDefault(); this.add(); }" valueLink="{this.linkState(\'edited\')}"/>\n' +
// ' <button onClick="()=>this.add()">Add</button><br/>\n' +
// ' <button onClick="()=>this.clearDone()">Clear done</button>\n' +
// '</div>';
var templateHTML = '<div></div>';
var templateProps = '{}';
//var templateProps = "{\n mixins: [React.addons.LinkedStateMixin],\n getInitialState: function () {\n return {edited: '', todos: [], counter: 0};\n },\n add: function () {\n if (this.state.edited.trim().length === 0) {\n return;\n }\n var newTodo = {value: this.state.edited, done: false, key: this.state.counter};\n this.setState({todos: this.state.todos.concat(newTodo), edited: '', counter: this.state.counter + 1});\n },\n remove: function (todo) {\n this.setState({todos: _.reject(this.state.todos, todo)});\n },\n toggleChecked: function (index) {\n var todos = _.cloneDeep(this.state.todos);\n todos[index].done = !todos[index].done;\n this.setState({todos: todos});\n },\n clearDone: function () {\n this.setState({todos: _.filter(this.state.todos, {done: false})});\n }\n}";
var Playground = React.createClass({