mrprofessor · September 6, 2017 13:45
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  
 <head>
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js">
    </script>
    <script src="https://npmcdn.com/[email protected]/umd/ReactRouter.min.js"></script>
  
    <style>
        body{
            background-color: #FFCC00;
            padding: 20px;
            margin: 0;
        }
        h1, h2, p, ul, li {
            font-family: Helvetica, Arial, sans-serif;
        }
        ul.header li {
            display: inline;
            list-style-type: none;
            margin: 0;
        }
        ul.header {
            background-color: #111;
            padding: 0;
        }
        ul.header li a{
            color: #FFF;
            font-weight: bold;
            text-decoration: none;
            padding: 20px;
            display: inline-block;
        }
        .content {
            background-color: #FFF;
            padding: 20px;
        }
        .content h2 {
            padding: 0;
            margin: 0;
        }
        .content li {
            margin-bottom: 10px;
        }
        .active {
            background-color: #0099FF;
        }

    </style>
 </head>
  
 <body>
    <div id="container">
  
    </div>
  
    <script type="text/babel">
        var { Router,Route,IndexRoute,IndexLink,hashHistory,Link } = ReactRouter;
        const destination = document.querySelector("#container");
  
        let App = React.createClass({
            render () {
                return (
                    <div>
                        <h1>Simple SPA</h1>
                        <ul className="header">
                            <li><Link to="/" >Home</Link></li>
                            <li><Link to="/stuff" activeClassName="active">Stuff</Link></li>
                            <li><Link to="/contact" activeClassName="active">Contact</Link></li>
                        </ul>
                        <div className="content">
                            {this.props.children}

                        </div>
                    </div>
                )
            }
        });

        let Home = React.createClass({
            render () {
                return(
                    <div>
                        <h2>HELLO</h2>
                            
                            <p>Cras facilisis urna ornare ex volutpat, et convallis erat elementum. Ut aliquam, ipsum vitae gravida suscipit, metus dui bibendum est, eget rhoncus nibh metus nec massa. Maecenas hendrerit laoreet augue nec molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                    </div>
                );
            }
        });

        let Stuff = React.createClass({
            render () {
                return(
                    <div>
                        <h2>Stuffs</h2>
                        <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p>
                    </div>
                );
            }
        });

        let Contact = React.createClass({
            render () {
                return(
                    <div>
                        <h2>Contact</h2>
                        <p>Phone - 8745932789</p>
                    </div>
                );
            }
        });
        
        ReactDOM.render(
            <Router history = {hashHistory}>
                <Route path = '/' component={App}>
                    <IndexRoute component={Home} />
                    <Route path="stuff" component={Stuff} />
                    <Route path="contact" component={Contact} />
                </Route>
            </Router>,destination
        );
    </script>
 </body>
  
 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
	<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js">
	</script>
	<script src="https://npmcdn.com/[email protected]/umd/ReactRouter.min.js"></script>

	<style>
	body{
	background-color: #FFCC00;
	padding: 20px;
	margin: 0;
	}
	h1, h2, p, ul, li {
	font-family: Helvetica, Arial, sans-serif;
	}
	ul.header li {
	display: inline;
	list-style-type: none;
	margin: 0;
	}
	ul.header {
	background-color: #111;
	padding: 0;
	}
	ul.header li a{
	color: #FFF;
	font-weight: bold;
	text-decoration: none;
	padding: 20px;
	display: inline-block;
	}
	.content {
	background-color: #FFF;
	padding: 20px;
	}
	.content h2 {
	padding: 0;
	margin: 0;
	}
	.content li {
	margin-bottom: 10px;
	}
	.active {
	background-color: #0099FF;
	}

	</style>
	</head>

	<body>
	<div id="container">

	</div>

	<script type="text/babel">
	var { Router,Route,IndexRoute,IndexLink,hashHistory,Link } = ReactRouter;
	const destination = document.querySelector("#container");

	let App = React.createClass({
	render () {
	return (
	<div>
	<h1>Simple SPA</h1>
	<ul className="header">
	<li><Link to="/" >Home</Link></li>
	<li><Link to="/stuff" activeClassName="active">Stuff</Link></li>
	<li><Link to="/contact" activeClassName="active">Contact</Link></li>
	</ul>
	<div className="content">
	{this.props.children}

	</div>
	</div>
	)
	}
	});

	let Home = React.createClass({
	render () {
	return(
	<div>
	<h2>HELLO</h2>

	<p>Cras facilisis urna ornare ex volutpat, et convallis erat elementum. Ut aliquam, ipsum vitae gravida suscipit, metus dui bibendum est, eget rhoncus nibh metus nec massa. Maecenas hendrerit laoreet augue nec molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
	</div>
	);
	}
	});

	let Stuff = React.createClass({
	render () {
	return(
	<div>
	<h2>Stuffs</h2>
	<p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p>
	</div>
	);
	}
	});

	let Contact = React.createClass({
	render () {
	return(
	<div>
	<h2>Contact</h2>
	<p>Phone - 8745932789</p>
	</div>
	);
	}
	});

	ReactDOM.render(
	<Router history = {hashHistory}>
	<Route path = '/' component={App}>
	<IndexRoute component={Home} />
	<Route path="stuff" component={Stuff} />
	<Route path="contact" component={Contact} />
	</Route>
	</Router>,destination
	);
	</script>
	</body>

	</html>