Probably I'm just not doing anything very sophisticated. It's just a plain old form driven website - that would account for it.
When I do ReactJS I'm building much more powerful UI features. The Django stuff is just a bunch of forms and that is really easy to drive.
Lately I've been writing little personal projects using Vanilla JS. There's something rather therapeutic about limiting one's self to zero dependencies. I'm wildly surprised every time I come back to Vanilla JS to see just how many core features there are. I can do modules in the browser now! Yippee!
And beyond that, not even using JS and just using Django Templates or Jinja is great too.
But I write a lot of software that monitors and controls mobile robots in warehouses. For that kind of wild state management of 100+ data sources, all with their own incomplete states, controls, unpredictably erroneous behaviours, React + Redux is just a godsend.
I think that part of it is just experience. You'll slowly learn to better predict which projects are likely to grow, especially in a way that needs a more expressive foundation.
I also think that the, "aw crap I have to re-write this from Django Templates to React" isn't exactly a bad thing. You've probably learned a ton about the problem you're solving by focusing on the problem directly in front of you[1] rather than trying to plan for the future problems that you don't quite understand yet. So when you tear it down to build the next iteration, the code you're replacing wasn't the valuable part.
[1] Not all projects are organic. But the ones that are, really benefit from a, "get this out in 2 weeks and learn what we don't yet know about it" rather than spending months trying to perfect some product that we're mostly just guessing at.
- F. Brooks
There were times when javascript === jquery. Nowdays javascript === react.
Data still comes from an API, so the front end is still decoupled from the back end, and anyone that is not a JS ninja can still contribute to the codebase since the project structure is really simple.
This is an internal project so we can tell our users to use latest Chrome to avoid transpiling and such, but configuring webpack would still be possible.
I really recommend the approach.
A lot of people think getting the data from an API automatically means building a single-page-application while in fact you could use this approach with Jekyll to create a static site, or even use server side code to generate dynamic markup and still consume an API.
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...
Edit: try to make it server agnostic, if open source is your intention ( and not just personal website use case ).
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.
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.
--
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.