A collection of tools that assist with loading and rendering React components
Project description
Django React Components
django-react-components and it's sibling package django-react-loader facilitate using individual react components
in a django template with a simple template tag. This also webpack, and the paired packages webpack-bundle-tracker
and django-webpack-loader to compile the react components and make them available within django.
Installation
For normal usage, first install django-react-components using pip:
$ pip install django-react-components
Add 'django_react_components' and 'webpack_loader' modules to your INSTALLED_APPS in settings.py:
INSTALLED_APPS = (
...,
'django_react_components',
'webpack_loader',
)
Additional Requirements
Install Webpack 5 Installation Guide The command may resemble:
npm install --save-dev webpack
Install django-react-loader with your preferred package manager:
$ npm install --save-dev django-react-loader
or
$ yarn add django-react-loader --dev
Usage
Configuration
Configure Webpack: Webpack Configuration Guide. The rest of this guide assumes a webpack config file (probably called webpack.config.js)
Setting up django-webpack-loader and webpack-bundle-tracker
Follow instructions in the Django Webpack Loader Docs
Setting up django-react-loader
Modify the webpack config file so that django-react-loader loads the react files:
* Import the django-react-loader
* Specify ENTRIES - a mapping of the names of your components to the source code file
* Add django-react-loader to loaders
Example configuration outline:
//wepback.config.js
const DjangoReactLoader = require('django-react-loader');
...,
const ENTRIES = {
...,
nameOfComponent: componentImportPath
}
...,
module.exports = {
...,
module: {
rules: [
...,
{
test: /\.js$/,
exclude: /node_modules/,
options: {
entries: ENTRIES
},
loader: DjangoReactLoader
}
...,
Compiling React Components
Compile your react components with webpack.
Command likely to resemble webpack build
Rendering React Components
In your templates, you can render React components by using the {% react_component %} or the {% react %}template tag. To do so:
- Load the template tag and the
render_bundletag fromdjango_webpack_loader:
{% load django_react_components %}
{% load render_bundle from webpack_loader %}
- Use
render_bundleto pull in the appropriate javascript
<head>
{% render_bundle 'runtime' %}
{% render_bundle 'App' %}
</head>
3a. Use the react_component tag to render the component with keyword arguments as props
<body>
{% react_component 'App' component_id='app' prop1=prop1 prop2=prop2 %}
</body>
3b. Use the react/endreact tags to render the component with rendered content inside. This will be passed as raw HTML to the component as the children prop.
<body>
{% react 'App' id='app' %}
<h1>Hello World</h1>
<p>{{ content }}</p>
<a href='{% url 'endpoint' %}'>Link</a>
{% endreact 'App' id='app' %}
</body>
Custom Props Encoding
django_react_components uses JSON to encode props into the React components. You can specify a custom JSON encoder
class with the DJANGO_REACT_JSON_ENCODER settings in your settings file, otherwise the default DjangoJSONEncoder is used.
The encoder will be passed to json_script()
Requirements
Python 3.11, Django 4.2
Release history Release notifications | RSS feed
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
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file django_react_components-1.1.0.tar.gz.
File metadata
- Download URL: django_react_components-1.1.0.tar.gz
- Upload date:
- Size: 5.5 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.11.14
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
4d5c889a7cba3ce0cb3b0dfb5507f41d31b282c2b7f7c477500e13b57f3907b0
|
|
| MD5 |
68765c8ad5af0032ccc7d048d4bba2ea
|
|
| BLAKE2b-256 |
f29a9ff274f32d3ddbf606952361176a7b5dde973d0d5045eb391676790274aa
|
File details
Details for the file django_react_components-1.1.0-py3-none-any.whl.
File metadata
- Download URL: django_react_components-1.1.0-py3-none-any.whl
- Upload date:
- Size: 6.6 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.11.14
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
90ed74a9373d89aaee3d62daf1fbf930fb324702562b93ee652acbdc35372366
|
|
| MD5 |
7541afbd9952054eb4ddc1bc230498e0
|
|
| BLAKE2b-256 |
f2626812dc179c68fba2e8ce02b0b9f9989fc8feaed0ee18e225e7b7eca1d123
|
