Zero-configuration Django and React.
Together at last.

Reactivated is the easiest way to use Django and React together.

You get the full power of Django. Rendered by React server-side.

No webpack, no config, no tooling. Just React and Django.

nix-shell -E "$(curl -L https://reactivated.io/install/)"
Get Started672Install Nix

Don‘t have Nix? Use Docker

from django.http import HttpRequest, HttpResponse
from django.shortcuts import redirect

from . import forms, templates

def home_page(request: HttpRequest) -> HttpResponse:
    form = forms.SignUpForm(request.POST or None)
    if form.is_valid():
        form.save()
        return redirect("profile")

    return templates.HomePage(form=form).render(request)
import React from "react";
import {CSRFToken, Form, templates} from "@reactivated";

import {Layout} from "@client/components/Layout";

export const Template = (props: templates.HomePage) => (
    <Layout title="Sign Up">
        <h1>Sign Up</h1>
        <form method="POST">
            <CSRFToken />
            <Form as="p" form={props.form} />
            <button type="submit">Submit</button>
        </form>
    </Layout>
);

Type Safe

TypeScript and Mypy built-in. Catch mistakes early.

Deployment Ready

Run one command and have your app live with production settings. SSL included.

No Dependencies

Ok just one. Nix. Everything is included and set up for you.

Opinionated

Formatting and linting configured for you. One command to fix it all.

The full power of Django

Nothing — that’s right, nothing — approaches the productivity of a mature framework like Django.

So why cripple its vast feature set by separating the frontend from the backend? REST calls and ad-hoc endpoints is no way to live.

Use idiomatic Django. As it was meant to be used: with forms, form sets, views and transactional logic.

@transaction.atomic
def checkout(request: HttpRequest) -> HttpResponse:
    registration_form = forms.RegistrationForm(request.POST or None)
    credit_card_form = forms.CreditCardForm(request.POST or None)
    cart_form_set = forms.CardFormSet(request.POST or None)

    if (
        registration_form.is_valid()
        and credit_card_form.is_valid()
        and cart_form_set.is_valid()
    ):
        user = registration_form.save(commit=False)
        user.credit_card = credit_card_form.save()
        user.save()

        for item in cart_form_set.save(commit=False):
            item.user = user
            item.save()
        return redirect("order_history")

    return templates.Checkout(
        registration_form=registration_form,
        cart_form_set=cart_form_set,
        credit_card_form=credit_card_form,
    ).render(request)

React is your template engine

Django is great.

But writing type-safe components with React is a dream come true.

Leverage the full React ecosystem.

import React from "react";
import Select from "react-select";

const flavors = [
    {value: "chocolate", label: "Chocolate"},
    {value: "strawberry", label: "Strawberry"},
    {value: "vanilla", label: "Vanilla"},
];

export const Flavor = () => <Select options={flavors} />;
class LoginForm(forms.Form):
    email = forms.EmailField()
    password = forms.PasswordField()

@template
class Login(NamedTuple):
    form: forms.LoginForm

Type safety — everywhere

All roads lead to types. So embrace them.

Type your Django code, and all of your React templates will be typed automatically.

Easily add dynamic behavior

The classic problem. Show a field if a certain value is selected on another field.

Tricky with traditional Django. Trivial with Reactivated.

class WireForm(forms.Form):
    account_number = forms.CharField()
    has_instructions = forms.BooleanField()
    instructions = forms.TextField()
import React from "react";

import {CSRFToken, useForm, Form} from "@reactivated";

export const WireForm = (props: Props) => {
    const form = useForm(props.form);
    const fields =
        form.values.has_instructions === true
            ? ["account", "has_instructions", "instructions"]
            : ["account", "has_instructions"];

    return <form method="POST">
        <CSRFToken />
        <Form handler={form} as="p" fields={fields} />
        <button type="submit">Send wire</button>
    </>;
};