https://github.com/chanmo/django-react

An easy way to integrate React with Django.
https://github.com/chanmo/django-react

django react reactjs vite

Last synced: 25 days ago
JSON representation

An easy way to integrate React with Django.

• Host: GitHub
• URL: https://github.com/chanmo/django-react
• Owner: ChanMo
• License: mit
• Created: 2022-05-11T08:45:44.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-09-27T02:11:27.000Z (over 1 year ago)
• Last Synced: 2024-12-07T21:19:41.466Z (about 1 month ago)
• Topics: django, react, reactjs, vite
• Language: Python
• Homepage:
• Size: 38.1 KB
• Stars: 9
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.org
  • License: LICENSE

Awesome Lists containing this project

README

        
* 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 (

      
{props.title}

    )

  }


  const root = ReactDom.createRoot(document.getElementById("app"));

  root.render(

    

  );

#+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