Django + React
==============
An easy way to use React with Django.
QuickStart
----------
Install
~~~~~~~
.. code:: bash
pip install django-vite-react
Update Settings.py
~~~~~~~~~~~~~~~~~~
.. code:: python
INSTALLED_APPS = [
...
'react',
...
]
Setup Vite
~~~~~~~~~~
Create file package.json
.. code:: 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
.. code:: 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',
]
}
}
})
Install npm package
.. code:: bash
npm install
npm run dev
Create your jsx file
~~~~~~~~~~~~~~~~~~~~
Example ``components/app.jsx``
.. code:: 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} />
);
Use ReactMixin in your ClassView
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
.. code:: 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'
}
Visit url in your brower
~~~~~~~~~~~~~~~~~~~~~~~~
http://localhost:8000/
Build js
~~~~~~~~
Before deploy, run ``yarn dev``,
Todo
----
- [ ] easier to integrate
- [ ] decorate function
Raw data
{
"_id": null,
"home_page": "https://github.com/ChanMo/django-react/",
"name": "django-vite-react",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": "",
"keywords": "",
"author": "ChanMo",
"author_email": "chan.mo@outlook.com",
"download_url": "https://files.pythonhosted.org/packages/6c/71/6b7d1e75c580f9ce00dacf5c1b7010092106ce3efb99d6b806eaadc00051/django-vite-react-0.0.2.tar.gz",
"platform": null,
"description": "Django + React\n==============\n\nAn easy way to use React with Django.\n\nQuickStart\n----------\n\nInstall\n~~~~~~~\n\n.. code:: bash\n\n pip install django-vite-react\n\nUpdate Settings.py\n~~~~~~~~~~~~~~~~~~\n\n.. code:: python\n\n INSTALLED_APPS = [\n ...\n 'react',\n ...\n ]\n\nSetup Vite\n~~~~~~~~~~\n\nCreate file package.json\n\n.. code:: json\n\n {\n \"name\": \"django-react\",\n \"version\": \"1.0.0\",\n \"description\": \"use react.js in django templates\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"keywords\": [],\n \"author\": \"ChanMo\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"@vitejs/plugin-react\": \"^3.1.0\",\n \"vite\": \"^4.1.1\"\n },\n \"dependencies\": {\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\" \n }\n }\n\nCreate file vite.config.js\n\n.. code:: javascript\n\n import { defineConfig } from 'vite'\n import react from '@vitejs/plugin-react'\n\n // https://vitejs.dev/config/\n export default defineConfig({\n plugins: [react()],\n build: {\n outDir: 'static/dist/',\n manifest: true,\n rollupOptions: {\n input: [\n 'components/app.jsx',\n ]\n }\n }\n })\n\nInstall npm package\n\n.. code:: bash\n\n npm install\n npm run dev\n\nCreate your jsx file\n~~~~~~~~~~~~~~~~~~~~\n\nExample ``components/app.jsx``\n\n.. code:: javascript\n\n import React from 'react';\n import ReactDom from 'react-dom/client';\n\n function App(props) {\n return (\n <h1>{props.title}</h1>\n )\n }\n\n const root = ReactDom.createRoot(document.getElementById(\"app\"));\n root.render(\n <App {...window.props} />\n );\n\nUse ReactMixin in your ClassView\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n.. code:: python\n\n from django.views.generic import TemplateView\n from react.mixins import ReactMixin\n\n\n class IndexView(ReactMixin, TemplateView):\n app_root = 'components/app.jsx'\n def get_props_data(self):\n return {\n 'title': 'Hello'\n }\n\nVisit url in your brower\n~~~~~~~~~~~~~~~~~~~~~~~~\n\nhttp://localhost:8000/\n\nBuild js\n~~~~~~~~\n\nBefore deploy, run ``yarn dev``,\n\nTodo\n----\n\n- [ ] easier to integrate\n- [ ] decorate function\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "An easy way to Write React Component with Django.",
"version": "0.0.2",
"split_keywords": [],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "6c716b7d1e75c580f9ce00dacf5c1b7010092106ce3efb99d6b806eaadc00051",
"md5": "08ed4affec6a92ff0180f38f2b575be0",
"sha256": "6940248390531a210ba41c66091fd311cbef4aecc48938ddf4cc6d8aff3db3f6"
},
"downloads": -1,
"filename": "django-vite-react-0.0.2.tar.gz",
"has_sig": false,
"md5_digest": "08ed4affec6a92ff0180f38f2b575be0",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 4805,
"upload_time": "2023-04-14T06:37:34",
"upload_time_iso_8601": "2023-04-14T06:37:34.121144Z",
"url": "https://files.pythonhosted.org/packages/6c/71/6b7d1e75c580f9ce00dacf5c1b7010092106ce3efb99d6b806eaadc00051/django-vite-react-0.0.2.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2023-04-14 06:37:34",
"github": true,
"gitlab": false,
"bitbucket": false,
"github_user": "ChanMo",
"github_project": "django-react",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "django-vite-react"
}
JSON
