react-templates/playground/examples.rt

<rt-require dependency="./playground" as="playground"/>
<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" codeVisible="{false}"></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>