radiosilence/comments.json

## comments.json
[{"author":"Barry Smith","text":"Test"},{"author":"James Brown","text":"ASDFG!"}]

## index.html
<html>
<head>

    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.0.3/cosmo/bootstrap.min.css">
</head>
<body>
  <div id="container" class="container">
  </div>
  <script asrc="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script asrc="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <script src="http://files.blit.cc/director.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/superagent/0.15.7/superagent.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.8.0/react.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.8.0/JSXTransformer.js"></script>
  <script type="text/jsx">
    /**
     * @jsx React.DOM
     */
    var request = superagent;
    var App = React.createClass({
      getInitialState: function() {
        return {
          path: 'home'
        }
      },

      componentDidMount: function() {
        var router = Router({
          '/': this.setState.bind(this, {path: 'home'}),
          '/comments':  this.setState.bind(this, {path: 'comments'})
        });
        router.init();
      },

      render: function() {
        var routeNode;
        if (this.state.path == 'home')
          routeNode = <div>Home</div>;
        else
          routeNode = <Comments url='comments.json'/>;

        var navItems = [
            {path: '#/', name: 'Home'},
            {path: '#/comments', name: 'Comments Section'},
          ];
        return (
          <div className="app">
            <div className="col-md-3">
              <Nav items={navItems}/>
            </div>
            <div className="col-md-9">
              {routeNode}
            </div>
          </div>
        );
      }
    });

    var Nav = React.createClass({
      render: function() {
        var navItemNodes = this.props.items.map(function(item) {
          return <NavItem path={item.path} name={item.name} />;
        });
        return (
          <nav>
            <ul>
              {navItemNodes}
            </ul>
          </nav>
        );
      }
    });

    var NavItem = React.createClass({
      render: function() {
        return (
          <li><a href={this.props.path}>{this.props.name}</a></li>
        );
      }
    });

    var Comments = React.createClass({
      getInitialState: function() {
        return {
          comments: []
        };
      },
      componentWillMount: function() {
        this.loadCommentsFromServer();
      },
      loadCommentsFromServer: function() {
        request
          .get(this.props.url)
          .end(function(res) {
            this.setState({comments: res.body});
          }.bind(this));
      },
      render: function() {
        var commentNodes = this.state.comments.map(function(comment) {
          return <Comment author={comment.author} text={comment.text}/>;
        })
        return (
          <ul className="comments">
            {commentNodes}
          </ul>
        );
      }
    });

    var Comment = React.createClass({
      render: function() {
        return (
          <li class="comment">
            <strong>{this.props.author}:</strong>
            <span>{this.props.text}</span>
          </li>
        );
      }
    });

    React.renderComponent(
      <App/>,
      document.getElementById('container')
    );

    React.initializeTouchEvents();
  </script>
</body>
</html>
	<html>
	<head>

	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.0.3/cosmo/bootstrap.min.css">
	</head>
	<body>
	<div id="container" class="container">
	</div>
	<script asrc="http://code.jquery.com/jquery-2.0.3.min.js"></script>
	<script asrc="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
	<script src="http://files.blit.cc/director.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/superagent/0.15.7/superagent.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.8.0/react.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.8.0/JSXTransformer.js"></script>
	<script type="text/jsx">
	/**
	* @jsx React.DOM
	*/
	var request = superagent;
	var App = React.createClass({
	getInitialState: function() {
	return {
	path: 'home'
	}
	},

	componentDidMount: function() {
	var router = Router({
	'/': this.setState.bind(this, {path: 'home'}),
	'/comments': this.setState.bind(this, {path: 'comments'})
	});
	router.init();
	},

	render: function() {
	var routeNode;
	if (this.state.path == 'home')
	routeNode = <div>Home</div>;
	else
	routeNode = <Comments url='comments.json'/>;

	var navItems = [
	{path: '#/', name: 'Home'},
	{path: '#/comments', name: 'Comments Section'},
	];
	return (
	<div className="app">
	<div className="col-md-3">
	<Nav items={navItems}/>
	</div>
	<div className="col-md-9">
	{routeNode}
	</div>
	</div>
	);
	}
	});

	var Nav = React.createClass({
	render: function() {
	var navItemNodes = this.props.items.map(function(item) {
	return <NavItem path={item.path} name={item.name} />;
	});
	return (
	<nav>
	<ul>
	{navItemNodes}
	</ul>
	</nav>
	);
	}
	});

	var NavItem = React.createClass({
	render: function() {
	return (
	<li><a href={this.props.path}>{this.props.name}</a></li>
	);
	}
	});

	var Comments = React.createClass({
	getInitialState: function() {
	return {
	comments: []
	};
	},
	componentWillMount: function() {
	this.loadCommentsFromServer();
	},
	loadCommentsFromServer: function() {
	request
	.get(this.props.url)
	.end(function(res) {
	this.setState({comments: res.body});
	}.bind(this));
	},
	render: function() {
	var commentNodes = this.state.comments.map(function(comment) {
	return <Comment author={comment.author} text={comment.text}/>;
	})
	return (
	<ul className="comments">
	{commentNodes}
	</ul>
	);
	}
	});

	var Comment = React.createClass({
	render: function() {
	return (
	<li class="comment">
	<strong>{this.props.author}:</strong>
	<span>{this.props.text}</span>
	</li>
	);
	}
	});

	React.renderComponent(
	<App/>,
	document.getElementById('container')
	);

	React.initializeTouchEvents();
	</script>
	</body>
	</html>