mrjoes/index.html

## readme.txt
React 0.5.1

1. npm install express
2. copy any picture as 'pic.gif'
3. node server.js to the directory
4. Open http://localhost:8000/ in Chrome
5. Click on links, icon blinks when switching between pages

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    .some {
      background-color: black;
    }
  </style>
</head>
<body>
  <script src="//fb.me/react-0.5.1.min.js"></script>
  <script src="//fb.me/JSXTransformer-0.5.1.js"></script>
  <script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
  <script type="text/jsx">
    /**
     * @jsx React.DOM
     */

    // Simple page
    var PageLayout = React.createClass({
      render: function() {
        function route() {
          var args = Array.prototype.slice.apply(arguments);
          args.push({trigger: true});

          return function() {
            router.navigate.apply(router, args);
            return false;
          }
        }

        return (
          <div>
            <div className="some">
              <img src="/pic.gif" />
            </div>
            <a href="#" onClick={route('/page1/')}>Page 1</a>
            <a href="#" onClick={route('/page2/')}>Page 2</a>
            <div>
              {this.props.children}
            </div>
          </div>
        )
      }
    });

    var Page1 = React.createClass({
      render: function() {
        return (
          <PageLayout>Page 1</PageLayout>
        )
      }
    });

    var Page2 = React.createClass({
      render: function() {
        return (
          <PageLayout>Page 2</PageLayout>
        )
      }
    });

    // Instantiate new page
    function mountPage(name) {
      console.log(name);
      React.renderComponent(name === 'page1' ? Page1({name: name}) : Page2({name: name}), document.body);
    }

    // Initialize router with few pages
    var MyRouter = Backbone.Router.extend({
      routes: {
        'page1/': 'page1',
        'page2/': 'page2'
      }
    });

    var router = new MyRouter();
    router.on('route', function(name) {
      mountPage(name);
    })

    React.renderComponent(PageLayout(), document.body);

    Backbone.history.start({pushState: true});
  </script>
</body>
</html>

## server.js
var express = require('express'),
    path    = require('path');

var app = express();
app.use(express.static(__dirname));

app.get('*', function(req, res){
  res.sendfile(__dirname + '/index.html');
});

console.log('Server listening on port 8000');
app.listen(8000);
	React 0.5.1

	1. npm install express
	2. copy any picture as 'pic.gif'
	3. node server.js to the directory
	4. Open http://localhost:8000/ in Chrome
	5. Click on links, icon blinks when switching between pages
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<style>
	.some {
	background-color: black;
	}
	</style>
	</head>
	<body>
	<script src="//fb.me/react-0.5.1.min.js"></script>
	<script src="//fb.me/JSXTransformer-0.5.1.js"></script>
	<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
	<script type="text/jsx">
	/**
	* @jsx React.DOM
	*/

	// Simple page
	var PageLayout = React.createClass({
	render: function() {
	function route() {
	var args = Array.prototype.slice.apply(arguments);
	args.push({trigger: true});

	return function() {
	router.navigate.apply(router, args);
	return false;
	}
	}

	return (
	<div>
	<div className="some">
	<img src="/pic.gif" />
	</div>
	<a href="#" onClick={route('/page1/')}>Page 1</a>
	<a href="#" onClick={route('/page2/')}>Page 2</a>
	<div>
	{this.props.children}
	</div>
	</div>
	)
	}
	});

	var Page1 = React.createClass({
	render: function() {
	return (
	<PageLayout>Page 1</PageLayout>
	)
	}
	});

	var Page2 = React.createClass({
	render: function() {
	return (
	<PageLayout>Page 2</PageLayout>
	)
	}
	});

	// Instantiate new page
	function mountPage(name) {
	console.log(name);
	React.renderComponent(name === 'page1' ? Page1({name: name}) : Page2({name: name}), document.body);
	}

	// Initialize router with few pages
	var MyRouter = Backbone.Router.extend({
	routes: {
	'page1/': 'page1',
	'page2/': 'page2'
	}
	});

	var router = new MyRouter();
	router.on('route', function(name) {
	mountPage(name);
	})

	React.renderComponent(PageLayout(), document.body);

	Backbone.history.start({pushState: true});
	</script>
	</body>
	</html>
	var express = require('express'),
	path = require('path');

	var app = express();
	app.use(express.static(__dirname));

	app.get('*', function(req, res){
	res.sendfile(__dirname + '/index.html');
	});

	console.log('Server listening on port 8000');
	app.listen(8000);