examples/react-complex-components.html

<!DOCTYPE html>
<html>
<head>
  <title>t7 - React Complex Components Example</title>
</head>
<body>
  <div id="app"></div>
  <script src="https://fb.me/react-0.13.3.js"></script>
  <script src="../t7.js"></script>
  <script>
    //inside a closure
    t7.module(function(t7) {
      t7.setOutput(t7.Outputs.React);
      
      var Component1 = React.createClass({
        render: function() {
          return t7`
            <Component2 name="123">
              <h1>Component 1</h1>
              <div>Hello world</div>
            </Component2>
          `;
        }
      });

      var Component2 = React.createClass({
        render: function() {
          return t7`
            <div>
              ${ this.props.children }
              <h2>Component 2</h2>
              <Component3>
                <Component4 name=${ this.props.name } />
              </Component3>
            </div>
          `;
        }
      });

      var Component3 = React.createClass({
        render: function() {
          return t7`
            <div>
              <h3>Component 3</h3>
              ${ this.props.children }
            <div>
          `;
        }
      });

      var Component4 = React.createClass({
        render: function() {
          return t7`
            <div>
              <h4>Component 4</h4>
              <span>${ this.props.name }</span>
            </div>
          `;
        }
      });

      t7.assign({
        "Component1": Component1,
        "Component2": Component2,
        "Component3": Component3,
        "Component4": Component4,
      });

      React.render(
        t7`<Component1 />`,
        document.getElementById('app')
      );
    });
  </script>
</body>
</html>