This is a mix of React, React's JSX, and Turbolinks that applies DOM "diffs" without any server configuration—it just needs plain old HTML.
The panel's class this time is panel-default.
Add the data-no-turbolink attribute to links you
want to
ignore Turbolinks
and TurboReact. The link below has the attribute, and so clicking it
will load the page normally.
Re-reqest page w/out TurboReact
"Re-request this page" is just a link to the current page. When you click it, Turbolinks intercepts the GET request and fetchs the full page via XHR.
The panel is rendered with a random panel- class on each
request, and the progress bar gets a random widthX
class.
With Turbolinks alone, the entire <body> would be
replaced, and transitions would not happen. In this little demo
though, React adds and removes classes and text, and the attribute
changes are animated with CSS transitions. The DOM is otherwise
left in tact.
TurboReact turns the <body> into a React element
and re-renders it after Turbolinks intercepts link navigations via
XMLHttpRequest:
turbo-react.js
This whole app is on GitHub: turbo-react
Tweet at me: @ssorallen