<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React-SPA</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<script type="text/babel">
const About = React.createClass({
render() {
return <h3>About</h3>
}
});
const Inbox = React.createClass({
render() {
return (
<div>
<h2>Inbox</h2>
</div>
)
}
});
const Home = React.createClass({
render() {
return <h3>Home</h3>
}
});
const App = React.createClass({
getInitialState() {
return {
route: window.location.hash.substr(1)
}
},
componentDidMount() {
window.addEventListener(‘hashchange‘, () => {
this.setState({
route: window.location.hash.substr(1)
})
})
},
render() {
let View;
switch (this.state.route) {
case ‘/about‘: View = About; break;
case ‘/inbox‘: View = Inbox; break;
default: View = Home;
}
return (
<div>
<h1><a href="#/">Home</a></h1>
<ul>
<li><a href="#/about">About</a></li>
<li><a href="#/inbox">Inbox</a></li>
</ul>
<View/>
</div>
)
}
});
ReactDOM.render(<App />, document.body);
</script>
</body>
</html>
