single-page-react v0.0.2
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> <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>