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

Made editorial changes. 

Note that two descriptions match, and it seems that the one for "Improved todo list" should be changed.
This commit is contained in:
Marlowe Shaeffer 2015-01-04 09:47:51 -08:00
parent 8ec25ad8cd
commit 71a75e41d8
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
playground/examples.rt
View File

@ -3,65 +3,65 @@
<rt-require dependency="./CodeMirrorViewer" as="viewer"/>
<div id="examples">
<div class="example">
<h3>Hello world in react templates</h3>
<h3>Hello world in React Templates</h3>
<p>
Simple hello world html transformed into react javascript code
Simple "Hello world" HTML transformed into React JavaScript code.
</p>
<playground id="helloExample" rt-props="this.state.samples.hello" direction="horizontal"></playground>
</div>
<div class="example">
<h3>This shows the use of rt-if</h3>
<h3>rt-if</h3>
<p>
This shows the use of rt-if
This shows the use of rt-if.
</p>
<playground id="ifExample" rt-props="this.state.samples.rtIf" direction="horizontal"></playground>
</div>
<div class="example">
<h3>This shows the use of rt-repeat</h3>
<h3>rt-repeat</h3>
<p>
This shows the use of rt-repeat, to show multiple items, and the use of rt-scope to create a reusable name for multiple calculations
This uses rt-repeat to show multiple items and rt-scope to create a reusable name for multiple calculations.
</p>
<playground id="repeatExample" rt-props="this.state.samples.repeat" direction="horizontal"></playground>
</div>
<div class="example">
<h3>This shows the use of rt-props</h3>
<h3>rt-props</h3>
<p>
This shows the use of rt-props. It is used in this component to pass all the original properties set on this component (except the ones used for the component logic - onClick and eventId) to the element that will actually represent this component
rt-props is used to pass all the original properties set on this component (except the ones used for the component logic: onClick and eventId) to the element that will actually represent this component.
</p>
<playground id="propsExample" rt-props="this.state.samples.props" direction="horizontal"></playground>
</div>
<div class="example">
<h3>Improved todo list</h3>
<p>
This shows the use of rt-props. It is used in this component to pass all the original properties set on this component (except the ones used for the component logic - onClick and eventId) to the element that will actually represent this component
rt-props is used to pass all the original properties set on this component (except the ones used for the component logic: onClick and eventId) to the element that will actually represent this component.
</p>
<playground id="todoExample" rt-props="this.state.samples.todo" direction="horizontal"></playground>
</div>
<div class="example">
<h3>Weather</h3>
<p>
This example shows working with async events, usage of regular event handler function pointers instead of lambda expression, and working with 2 way binding
This example shows working with async events, the usage of regular event handler function pointers instead of lambda expression, and working with two-way binding.
</p>
<playground id="weatherExample" rt-props="this.state.samples.weather" direction="horizontal"></playground>
</div>
<div id="rt-require" class="example">
<h3>rt-require</h3>
<p>
This example shows how to load other react components and libraries into a react-template and use them in the template
This example shows how to load other React components and libraries into a React template and then use them within the template.
</p>
<viewer rt-props="this.state.rtRequire" mode="javascript" />
</div>
<div id="amd" class="example">
<h3>AMD</h3>
<p>
This example shows the rt-require sample output with AMD support
This example shows the rt-require sample output with AMD support.
</p>
<viewer rt-props="this.state.amd" mode="javascript" />
</div>
<div id="commonjs" class="example">
<h3>CommonJS</h3>
<p>
This example shows the rt-require sample output with CommonJS support
This example shows the rt-require sample output with CommonJS support.
</p>
<viewer rt-props="this.state.cjs" mode="javascript" />
</div>