React template inside Django template?

[Adamcina]

Hello everyone and Silvio thanks once again for the amazing effort you made creating Reactivated!
Sorry if this is going to be an noob question as I am new to React. I've been exploring documentation but it's hard for me to figure out if this is possible - is there a way to include somehow React template inside Django's template? Let's say I have this kind of Django template:

{% extends "base.html" %}
{% load static %}
{% block title %}Page Title{% endblock title %}
{% block head %}
<script src="https://www.google.com/recaptcha/enterprise.js" async defer></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?"></script>
{% endblock head %}
{% block content %}
<div class="small-12">
	<p class="heading">Contact</p>
</div>
<div class="small-12 medium-8 columns">
	<div class="container">
		<div class="small-12 medium-3 columns ask"></div>
		<div class="small-12 medium-9 columns">
		
		... some static content here
		
		</div>
		
		<div class="clearfix"></div>
 		
 		... some static content here

		<div id="app">This is the place where React code / template should be rendered, let's say some Contact form</div>

	</div>
</div>
{% endblock content %}
{% block extra_scripts %}
<script type="text/javascript" src="{% static 'js/validate.min.js' %}"></script>
{% endblock extra_scripts %}

I'm asking this because Django template engine allows me to use the template's extension mechanism ({% extends "base.html" %}). Otherwise, if I would have to write this template exclusively in React, I would have to add the code from base templates manually which would be cumbersome and against Django DRY principle.
Am I missing something, is there some better way to achieve this?

Thanks in advance!

[silviogutierrez]

Great question. Not in the official package.

I actually created the inverse code for a project of mine. You can replace top level templates with React, but the "inner" blocks-only templates continue being rendered by Django. To ease transition. The idea being that rewriting one "base.html" once to React but leaving dozens of "widget_detail.html", "trinket_detail.html" etc made more sense.

FYI you could just inject the "static/dist/index.js" file in there and render React into #app without React.render, but obviously you lose SSR and at this point are just using the Reactivated bundling tools and not the renderer.

I'll have to explore what common "transition" scenarios are.

[Adamcina]

Thanks for the answer!

You can replace top level templates with React, but the "inner" blocks-only templates continue being rendered by Django. To ease transition.

I just want to be sure that I've understood you right - my example from the above, the template is the top-level template and it should be rewrited whole to React? How should I then include low-level (base) template in React (let's say widget_detail.html), with what kind of code?
Sorry if I didn't understand this right.

The idea being that rewriting one "base.html" once to React but leaving dozens of "widget_detail.html", "trinket_detail.html" etc made more sense.

You're mentioning rewriting to React "base.html" template here, so this is what confused me.

Thanks in advance!

[silviogutierrez]

Currently on reactivated, neither case will work. I used a custom template backend on a local project to get my case to work.

But I will think about an easier migration path for existing projects. Seems like it could drive adoption.

[Adamcina]

@silviogutierrez Thanks in advance, I hope it will be integrated one day :)

[crgwbr]

@Adamcina For a non-foss project at @thelabnyc, I actually wrote a Django template tag to more-or-less allow this. Usage looks something like this:

# server/FOO/views.py
@template
class MixedBackendExampleReactTemplate(NamedTuple):
    title: str

// client/templates/MixedBackendExampleReactTemplate.tsx
import React from "react";
import { templates } from "@reactivated";
import { Counter } from "../components/Counter";

export default (props: templates.MixedBackendExampleReactTemplate) => (
    <React.StrictMode>
        <section>
            <h1>{props.title}</h1>
            <p>
                This section is rendered by a React component. It&apos;s
                server-side rendered and rehydrated on the client side. To prove
                that, try out the interactive counter below.
            </p>
            <Counter />
        </section>
    </React.StrictMode>
);

{# Any normal Django template #}
{% load include_react from FOO_tags %}
<!DOCTYPE html>
<html>
    <body>
        {% include_react "server.FOO.views.MixedBackendExampleReactTemplate" title="Mixed Backend Example" %}
    </body>
</html>

The implementation isn't exactly ideal, since (1) every instance of the include_react results in a separate call to the SSR server and (2) it results in some duplicated context JSON in the DOM. But it does work as a means of allowing a legacy app to piece-by-peice migrate away from Django templates.

@silviogutierrez I think reactivated is probably better off without including functionality. But if you think that tag would make sense here, let me know and I'll see what I can do.

[silviogutierrez]

I'm also running into the need to call arbitrary React snippets without the full page or even without a request.

As an example, to render an HTML email.

So I'll be keeping an eye on this discussion and provide updates if I come up with anything on my end. I think anything that makes the transition from Django templates to React easier is worth including.

[burakakca]

Can I do that in this current version?

I have existing project that it's uses django templates. I want to add react templates into django templates, like island model