4 ms·
I have a Django application which I wanted to connect to from a ReactJS front end. However I did not want to lose all the business logic and work that had gone
by andrewstuart 7y ago
I have a Django application which I wanted to connect to from a ReactJS front end.
However I did not want to lose all the business logic and work that had gone into the views, models, forms and fields along with all the validation and authentication logic etc.
So I wrote some React code that grabs Django's HTML forms and dynamically turns all the HTML fields into React components. To do updates I just submit ordinary form data from React. This means I just create ordinary Django application forms and views and it works from the React app.
There's pros and cons to this approach. The code that does the HTML form to React form logic is more complex than I would like. On the other hand it's all constrained to a fairly tight area of React. Then there is the huge benefit of being able to make zero modifications to the Django back end. On the con side, it does feel like a bit of a frankenstein application. But its a small price to pay for not having to convert entire Django apps into API's.
I actually have lots of mini React apps at the front end that are loaded onto ordinary Django HTML template.
- mooreds 7y agoI did that with the google web toolkit a decade ago. It was great for enriching functionality, but didn't work with the overarching GWT architecture (which expected to control the whole page as an SPA). Is react happier being a component on page?
- andrewstuart 7y ago>> Is react happier being a component on page? I asked Dan Abramov (a lead React developer) the same question and he said yes, indeed this is exactly what facebook do - they progressively added more and more small react components to their HTML pages. In React you can also use "portals" to render to multiple HTML elements on an HTML page so you can do it both ways - one React app represented in multiple places in the DOM or you can just create many small React apps and plop them in multiple places on your page.
- andrewstuart 7y agoJust to expand on this, below is some of the core logic for converting Django forms to React elements. I'm not going to apologise for my crap code - I'm not creating art I'm making my own applications. The thing to understand is that I actually do an XMLHTTPrequest to get the Django form and then in JavaScript a create a new separate DOM and put the form and its data in that. In React onchange events in the field I update that DOM that contains the form and its data. When I want to submit back to Django I submit the form from that DOM. There's more to it than the code here but it should give you an idea: djangoForm.jsx: https://gist.github.com/bootrino/65ed6a749799c37862e26562e1e06cf3 https://gist.github.com/bootrino/65ed6a749799c37862e26562e1e... DjangoRenderFormContext.js https://gist.github.com/bootrino/7e062770ed331753f18ce37ebd07fd8c https://gist.github.com/bootrino/7e062770ed331753f18ce37ebd0...
- gvjddbnvdrbv 7y agoI wrote Django form serialization code before. It was in some ways nicer than a REST API.