react-templates/playground/examples.rt

<!--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>