django-vite-react 0.0.2

An easy way to Write React Component with Django.

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,

Todo

• [ ] easier to integrate

• [ ] decorate function