* Django + React

An easy way to use React with Django.


** QuickStart
*** Install
#+BEGIN_SRC bash
  pip install django-vite-react
#+END_SRC

*** Update Settings.py
#+BEGIN_SRC python
  INSTALLED_APPS = [
      ...
      'react',
      ...
  ]
#+END_SRC

*** Setup Vite
Create file package.json

#+BEGIN_SRC 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"      
    }
  }
#+END_SRC

Create file vite.config.js

#+BEGIN_SRC javascript
  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',
        ]
      }
    }
  })
#+END_SRC

Install npm package

#+BEGIN_SRC bash
  npm install
  npm run dev
#+END_SRC

*** Create your jsx file

Example =components/app.jsx=

#+BEGIN_SRC javascript
  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} />
  );
#+END_SRC

*** Use ReactMixin in your ClassView
#+BEGIN_SRC python
  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'
          }
#+END_SRC

*** 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.
#+BEGIN_SRC bash
  npm run build
#+END_SRC
This command will compile the React files into the ~static/dist~ directory.

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

** Final Structure

#+BEGIN_SRC
.
├── 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  
#+END_SRC

** Todo
- [ ] easier to integrate
- [ ] decorate function