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 of Diff

The panel's class this time is panel-info.

Requested at

Re-request this page

Opting out of Turbolinks & TurboReact

Add the data-turbolinks="false" 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

What it's doing

"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.

The Code

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