pH200/index.html

## index.html
<html>
  <head>
    <title>RxJs+Cycle-React</title>
  </head>
  <body>
    <div id='root'>
    </div>
  </body>
  <script src="/index.js"></script>
</html>

## index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link, browserHistory } from 'react-router';
import { component } from 'cycle-react';
import Rx from 'rx';

const App = component('App', (interactions, props) => {
  return props.get('children').map(children => (
    <div>
     <h1>RxJS/Cycle component</h1>
     <p>This is an RxJS/Cycle component.</p>
     <p>
      Hot module reloading is enabled, so the page will update immediately on save.
     </p>
     <Link to="/child_route/grandchild_route">To Child Route</Link>
     { children }
    </div>
  ))
});

const SubHeader = component('SubHeader', () => Rx.Observable.just(
  <div>SubHeader</div>
));

const routeConfig = [
  {
    path: '/',
    component: App,
    childRoutes: [
      {
        path: 'child_route',
        childRoutes: [
          {
            path: 'grandchild_route',
            component: SubHeader
          }
        ]
      }
    ]
  }
];

ReactDOM.render((
  <Router history={ browserHistory } routes={ routeConfig } />
), document.getElementById('root'));
	<html>
	<head>
	<title>RxJs+Cycle-React</title>
	</head>
	<body>
	<div id='root'>
	</div>
	</body>
	<script src="/index.js"></script>
	</html>
	import React from 'react';
	import ReactDOM from 'react-dom';
	import { Router, Link, browserHistory } from 'react-router';
	import { component } from 'cycle-react';
	import Rx from 'rx';

	const App = component('App', (interactions, props) => {
	return props.get('children').map(children => (
	<div>
	<h1>RxJS/Cycle component</h1>
	<p>This is an RxJS/Cycle component.</p>
	<p>
	Hot module reloading is enabled, so the page will update immediately on save.
	</p>
	<Link to="/child_route/grandchild_route">To Child Route</Link>
	{ children }
	</div>
	))
	});

	const SubHeader = component('SubHeader', () => Rx.Observable.just(
	<div>SubHeader</div>
	));

	const routeConfig = [
	{
	path: '/',
	component: App,
	childRoutes: [
	{
	path: 'child_route',
	childRoutes: [
	{
	path: 'grandchild_route',
	component: SubHeader
	}
	]
	}
	]
	}
	];

	ReactDOM.render((
	<Router history={ browserHistory } routes={ routeConfig } />
	), document.getElementById('root'));