A React bridge for Django
Project description
Django React Bridge
Think at Create React App but for Django
Installation
pip install django-react-bridge
Configuration
Add react_bridge
to the installed apps:
INSTALLED_APPS = (
# ...
'react_bridge',
)
Add the react components context processor:
TEMPLATES = [
{
# ...
'OPTIONS': {
'context_processors': [
# ...
'react_bridge.context_processors.react_components',
],
},
},
]
Configure react bridge:
REACT_BRIDGE_JS_CONFIG = {
'use_yarn': True,
'npm_command': 'yarn',
'output_path': os.path.join(BASE_DIR, 'static/build'),
'output_url': '/static/build/',
# Webpack resolve: https://webpack.js.org/configuration/resolve/#resolve
'resolve': None,
# Webpack entry: https://webpack.js.org/configuration/entry-context/#entry
'entry': None,
# Es:.
'entry': os.path.join(BASE_DIR, 'js/src/index.js'),
}
# Use js bridge in dev mode
REACT_BRIDGE_DEV = True
To use django-react-bridge
with the default configuration you should
include your top static in your STATICFILES_DIRS
or your can change
output_path
according to your staticfile configuration.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
Usage
Inside your entry javascript file:
import React from 'react'
import ReactDOM from 'react-dom'
import { registerComponents } from 'django-react-bridge'
import MyComponent from './MyComponent'
registerComponents({
React,
ReactDOM,
components: {
// Register here yuor components
MyComponent,
}
})
Inside your Django template:
{% load react_bridge %}
<html>
<head>
{% react_head_tags %}
</head>
<body>
{% render_component "MyComponent" in_tag='div' myPropA='a' myPropB='b' %}
{% react_body_tags %}
</body>
</html>
Multi bundle set up:
If you need to split your app in multiple bundles:
REACT_BRIDGE_JS_CONFIG = {
'entry': {
'frontend': os.path.join(BASE_DIR, 'front/src/index.js'),
'admin': os.path.join(BASE_DIR, 'admin/src/index.js'),
}
}
Then in your template you need to pass the bundle name when render related tags:
{% load react_bridge %}
<html>
<head>
{% react_head_tags 'admin' %}
</head>
<body>
{% react_body_tags 'admin %}
</body>
</html>
Commands
jsdevserver
Start dev server on port 9000.
You should have REACT_BRIDGE_DEV = True
.
python manage.py jsdevserver
jsbuild
Build your js and realted assets according to your REACT_BRIDGE_JS_CONFIG
.
python manage.py jsbuild
jsinit
Init a js project at given path.
python manage.py jsinit path/to/my/js/project
Project details
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for django-react-bridge-0.0.3.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | ce6e4f07a4d918e52d87de93f8910de699892dd217b3bfbc541057e6778440bb |
|
MD5 | d3c888f628c80ff2f274b2af979d64ff |
|
BLAKE2b-256 | 9371cb0865a160783e390f5f49032636fae2a8df15978c84b4fa4a14d5de5e1b |
Hashes for django_react_bridge-0.0.3-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 9cae4532c54ce58e54220c3bde46a61273afa3df288b74d0cf1b04699aa100a7 |
|
MD5 | baf4d508cbb67fb10bc197eb3ab1d908 |
|
BLAKE2b-256 | c841fc8fe8a78e6f008e1f64a33b274cdf618b42f7f72b82e75cffc1c715b0e6 |