single-page-react
A lightweight, straightforward plugin for creating single page apps with ReactJS.
Concept
Making a single page app built with React doesn't need to be complicated. There's no need to bring in Backbone and Underscore if you don't want to.
What single-page-react does
single-page-react chooses one of your React components and inserts it into the DOM.
Which React component is inserted into the DOM?
The one whose route attribute matches the current URL hash.
Where in the DOM will my React component by inserted?
Into the element whose id is stored in the React.Router.routedElement variable. By default, this is document.body.
What happens when I change the page's hash?
single-page-react will replace the React component inside of routedElement with the React component whose route attribute matches the hash. Take advantage of React virtual DOM diffing by reusing components; this way re-routing can be almost instantaneous!
Can I pass variables to my routedElement?
Yes. The key-value pairs in the URL query are given to your React component via the this.props variable.
Example
home.jsx /** @jsx React.DOM */
var Home = React.createClass({
render: function() {
return (
<div>
{this.props.prop1}
</div>
);
},
//When the URL hash is '#home', mount this component into the routedElement.
route: 'home'
});
index.html
<html>
<head>
<!-- Bring in React and single-page-react dependencies as globals -->
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.1/react.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.1/JSXTransformer.js"></script>
<script src="single-page-react.js"></script>
<!-- Set which DOM element to insert React components into -->
<script>
React.Router.routedElement = document.body //or whatever element you prefer
</script>
<!-- Bring in the home react component -->
<script src="home.jsx" type="text/jsx"></script>
</head>
<body>
This text is replaced by routed React components. For example, when the url
ends with #home?prop1=customValue, this text will be replaced by a div whose
content is 'customValue'
</body>
</html>