An easy way to use React with Django.
pip install django-vite-react
INSTALLED_APPS = [ ... 'react', ... ]
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
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} /> );
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' }
http://localhost:8000/
Before deploy, run yarn dev,
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.
. ├── 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
- [ ] easier to integrate
- [ ] decorate function