GitLocker: The Coding Marketplace

Description:

djangovitereact 0.0.3

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,

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