JSFiddle - React, Tailwind, and code Playground

by Shidhin C R

JavaScript 1.7

/** @jsx React.DOM */
  var Header = React.createClass({
    render: function(){
      return (<div className="header">This is the header</div>);
    }
  });
  
  var Footer = React.createClass({
    render: function(){
      return (<div className="footer">This is the footer</div>);
    }
  });
  
  var Content = React.createClass({
    render: function(){
      return (<div className="content">{this.props.children}</div>);
    }
  });
  
  var ListView = React.createClass({
    render: function(){
      var lists = [];
      for(var i=0,len=this.props.count; i<len; i++ ){
         var cls = i%2==0 ? 'even': '';
         lists.push(
              <li className={cls}>This is a simple li : {i} </li>
          )                                             
      }
      return (
        <ul className="list">
          {lists}
        </ul>
      );
    }
  });  
  
  var AppView = React.createClass({
    render: function(){
      return (
        <div>
          <Header />
          <Content>
            <ListView count={10} />
          </Content>
        <Footer />
        </div>
      );
    }
  });  
  
  React.render(<AppView/>, document.body);