ChanMo / django-react

An easy way to integrate React with Django.

Django + React

An easy way to use React with Django.

QuickStart

Install

pip install django-vite-react

Update Settings.py

INSTALLED_APPS = [
    ...
    'react',
    ...
]

Setup Vite

Create file package.json

{
  "name": "django-react",
  "version": "1.0.0",
  "description": "use react.js in django templates",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "ChanMo",
  "license": "ISC",
  "devDependencies": {
    "@vitejs/plugin-react": "^3.1.0",
    "vite": "^4.1.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"      
  }
}

Create file vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'static/dist/',
    manifest: true,
    rollupOptions: {
      input: [
        'components/app.jsx',
      ]
    }
  }
})

Install npm package

npm install
npm run dev

Create your jsx file

Example components/app.jsx

import React from 'react';
import ReactDom from 'react-dom/client';

function App(props) {
  return (
    <h1>{props.title}</h1>
  )
}

const root = ReactDom.createRoot(document.getElementById("app"));
root.render(
  <App {...window.props} />
);

Use ReactMixin in your ClassView

from django.views.generic import TemplateView
from react.mixins import ReactMixin


class IndexView(ReactMixin, TemplateView):
    app_root = 'components/app.jsx'
    def get_props_data(self):
        return {
            'title': 'Hello'
        }

Visit url in your brower

http://localhost:8000/

Build js

Before deploy, run yarn dev,

Deployment

First of all, you need to compile the React files.

npm run build

This command will compile the React files into the static/dist directory.

Then, make sure that DEBUG=False in the Django settings.

Final Structure

.
├── backend
│   ├── asgi.py
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── db.sqlite3
├── manage.py
├── node_modules
├── package.json
├── todo
│   ├── admin.py
│   ├── apps.py
│   ├── components
│   │   └── todo.jsx
│   ├── __init__.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── static
│   └── dist
│       ├── assets
│       │   └── todo-1cc3d04a.js
│       └── manifest.json
└── vite.config.js  

Todo

• [ ] easier to integrate
• [ ] decorate function