--
In your https://github.com/silviogutierrez/reactivated/blob/master/c...
import {Form} from '../components/Form';
---
Here are the fields I was able to extract, meaningfully.
https://github.com/pycampers/react-pages/blob/417ec24129b80b...
It still doesn't seem enough for building anything serious though.
Second: React does a DOM diff and only updates the components that changed. So it's super fast.
Third: when you DO need to use the raw JSON, you have access to it.
Fourth: rebinding behaviors (onClick) etc is done by React seamlessly. And again, uses the DOM diff to be efficient.
In the site you linked to, the scroll position gets messed up as you go back and forth between “pages” and click on links — problems that don’t occur when you fully re render a page.
Efficiency in speed: likely very little over just requesting the HTML via AJAX.
As far as scrolling/etc: that behavior is super buggy and I never really tested it. I "turned on" the turbolink-esque behavior as a test but it needs far more work.
In any case, one can just turn it off and revert to regular SSR behavior instead of the AJAX-ey one. I might even do that because, in general, I want my page to show the traditional loading icon in place of the favicon.
However, would like to compile all the reactjs stuff before including it in flask/django. You could look into the https://github.com/nozzle/react-static project to use their static compiler (which does React -> static html/js) to achieve this exact thing.
Edit: try to make it server agnostic, if open source is your intention ( and not just personal website use case ).
That's why I built the following project: https://github.com/silviogutierrez/reactivated
It's very early on, but essentially, completely replaces the template rendering with React components. Still regular markup, but whenever you need dynamic behaviors, it's trivial. And it's all server side rendered.
So basically, looking at https://github.com/silviogutierrez/reactivated/blob/master/c...
You can see the traditional Django context becomes "Props" in the top level component. Then it's React all the way down.
Notes:
1. The most complicated part is the initial setup. You do need to run NodeJS, webpack + Django server. Working on improving that.
2. I like TypeScript and use it here. But theoretically it'll be optional. The Django+Python part is also statically typed using MyPy.
3. No instructions whatsoever yet. But you can see a live site using this stack here: https://www.silviogutierrez.com/ . Notice it's server rendered but has dynamic behaviors that are trivial in React but harder with jQuery + Django. Example: https://www.silviogutierrez.com/blog/making-cck-fields-read-... Look at the nested commenting and moving the form around. Very easy in React.
4. Because of the architecture, adding a much-better-turbolinks style Ajax is trivial. Click around the site above (loading indicator not yet added). The page is re-rendered entirely on the client but gets a server AJAX response.
Hope that's interesting info. If you'd like to try it out, definitely let me know. Once you overcome the setup hurdles, it's amazingly productive. As in, if all you wish to do is `{{ form }}` like old school Django, here's the equivalent sample template: https://github.com/silviogutierrez/reactivated/blob/master/c...