69 lines
3.1 KiB
Plaintext
69 lines
3.1 KiB
Plaintext
<!--suppress CheckEmptyScriptTag -->
|
|
<rt-require dependency="./playground" as="playground"/>
|
|
<rt-require dependency="./CodeMirrorViewer" as="viewer"/>
|
|
<div id="examples">
|
|
<div class="example">
|
|
<h3>Hello world in react templates</h3>
|
|
<p>
|
|
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>
|
|
<p>
|
|
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>
|
|
<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
|
|
</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>
|
|
<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
|
|
</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
|
|
</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
|
|
</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
|
|
</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
|
|
</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
|
|
</p>
|
|
<viewer rt-props="this.state.cjs" mode="javascript" />
|
|
</div>
|
|
</div>
|