# 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:
```bash
$ pip install django-react-components
```
Add 'django_react_components' and 'webpack_loader' modules to your `INSTALLED_APPS` in `settings.py`:
```python
INSTALLED_APPS = (
...,
'django_react_components',
'webpack_loader',
)
```
## Additional Requirements
Install Webpack 5 [Installation Guide](https://webpack.js.org/guides/installation/)
The command may resemble:
```bash
npm install --save-dev webpack
```
Install `django-react-loader` with your preferred package manager:
```bash
$ npm install --save-dev django-react-loader
```
_or_
```bash
$ yarn add django-react-loader --dev
```
## Usage
### Configuration
Configure Webpack: [Webpack Configuration Guide](https://webpack.js.org/configuration/). 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](https://github.com/django-webpack/django-webpack-loader)
#### 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:
```js
//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:
1. Load the template tag and the `render_bundle` tag from `django_webpack_loader`:
```python
{% load django_react_components %}
{% load render_bundle from webpack_loader %}
```
2. Use `render_bundle` to 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
Raw data
{
"_id": null,
"home_page": "https://github.com/zagaran/django-react-components",
"name": "django-react-components",
"maintainer": null,
"docs_url": null,
"requires_python": null,
"maintainer_email": null,
"keywords": null,
"author": "Zagaran, Inc.",
"author_email": "info@zagaran.com",
"download_url": "https://files.pythonhosted.org/packages/0a/6f/ef994520ad04b6e99f536f297a9261f5b08ed5e314171e8ddd5163326b0e/django_react_components-1.0.0.tar.gz",
"platform": null,
"description": "# Django React Components\n\n`django-react-components` and it's sibling package `django-react-loader` facilitate using individual react components\nin a django template with a simple template tag. This also webpack, and the paired packages `webpack-bundle-tracker` \nand `django-webpack-loader` to compile the react components and make them available within django. \n\n## Installation\n\nFor normal usage, first install `django-react-components` using pip:\n```bash\n$ pip install django-react-components\n```\nAdd 'django_react_components' and 'webpack_loader' modules to your `INSTALLED_APPS` in `settings.py`:\n\n```python\nINSTALLED_APPS = (\n ...,\n 'django_react_components',\n 'webpack_loader',\n)\n```\n\n## Additional Requirements\n\nInstall Webpack 5 [Installation Guide](https://webpack.js.org/guides/installation/)\nThe command may resemble: \n\n```bash\nnpm install --save-dev webpack\n```\n\nInstall `django-react-loader` with your preferred package manager: \n\n```bash\n$ npm install --save-dev django-react-loader \n```\n_or_\n```bash\n$ yarn add django-react-loader --dev\n```\n\n## Usage\n\n### Configuration\n\nConfigure Webpack: [Webpack Configuration Guide](https://webpack.js.org/configuration/). The rest of this guide assumes a webpack config file (probably called `webpack.config.js`)\n\n#### Setting up `django-webpack-loader` and `webpack-bundle-tracker`\n\nFollow instructions in the [Django Webpack Loader Docs](https://github.com/django-webpack/django-webpack-loader)\n\n#### Setting up `django-react-loader`\n\nModify the webpack config file so that `django-react-loader` loads the react files: \n * Import the django-react-loader\n * Specify ENTRIES - a mapping of the names of your components to the source code file\n * Add `django-react-loader` to loaders\n\nExample configuration outline: \n\n```js\n //wepback.config.js\n const DjangoReactLoader = require('django-react-loader');\n ...,\n const ENTRIES = {\n ...,\n nameOfComponent: componentImportPath\n\n }\n ...,\n\n module.exports = {\n ...,\n module: {\n rules: [\n ...,\n {\n test: /\\.js$/,\n exclude: /node_modules/,\n options: {\n entries: ENTRIES\n },\n loader: DjangoReactLoader \n }\n ...,\n```\n\n### Compiling React Components\n\nCompile your react components with `webpack`. \n\nCommand likely to resemble ```webpack build``` \n\n\n### Rendering React Components\n\nIn your templates, you can render React components by using the `{% react_component %}` or the `{% react %}`template tag. To do so:\n\n1. Load the template tag and the `render_bundle` tag from `django_webpack_loader`:\n```python\n{% load django_react_components %}\n{% load render_bundle from webpack_loader %}\n\n```\n\n2. Use `render_bundle` to pull in the appropriate javascript\n```\n<head>\n {% render_bundle 'runtime' %}\n {% render_bundle 'App' %} \n</head>\n```\n\n3a. Use the `react_component` tag to render the component with keyword arguments as props\n```\n<body>\n {% react_component 'App' component_id='app' prop1=prop1 prop2=prop2 %}\n</body>\n```\n\n3b. 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.\n```\n<body>\n {% react 'App' id='app' %}\n <h1>Hello World</h1>\n <p>{{ content }}</p>\n <a href='{% url 'endpoint' %}'>Link</a>\n {% endreact 'App' id='app' %}\n</body>\n```\n\n### Custom Props Encoding\n\n`django_react_components` uses JSON to encode props into the React components. You can specify a custom JSON encoder \nclass with the `DJANGO_REACT_JSON_ENCODER` settings in your settings file, otherwise the default DjangoJSONEncoder is used.\nThe encoder will be passed to `json_script()`\n\n## Requirements\n\nPython 3.11, Django 4.2\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "A collection of tools that assist with loading and rendering React components",
"version": "1.0.0",
"project_urls": {
"Homepage": "https://github.com/zagaran/django-react-components"
},
"split_keywords": [],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "9ad815b8bd0bd5208140dac05b1c8609b3fac26d7f1068d0b6c58314b888b562",
"md5": "42f197cb301cb64ca742c41d15e692da",
"sha256": "6c1de9249af62d93dbad210eed00058f472c934269cd7dc9dfce46d75cad97d9"
},
"downloads": -1,
"filename": "django_react_components-1.0.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "42f197cb301cb64ca742c41d15e692da",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": null,
"size": 6561,
"upload_time": "2025-07-08T14:20:30",
"upload_time_iso_8601": "2025-07-08T14:20:30.738898Z",
"url": "https://files.pythonhosted.org/packages/9a/d8/15b8bd0bd5208140dac05b1c8609b3fac26d7f1068d0b6c58314b888b562/django_react_components-1.0.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "0a6fef994520ad04b6e99f536f297a9261f5b08ed5e314171e8ddd5163326b0e",
"md5": "c89c13953b7233c9c95b79e17998900c",
"sha256": "27329342fc32fb9b0973260b84475100e7a77fd668ecaba8c419a9ea4dfec4f6"
},
"downloads": -1,
"filename": "django_react_components-1.0.0.tar.gz",
"has_sig": false,
"md5_digest": "c89c13953b7233c9c95b79e17998900c",
"packagetype": "sdist",
"python_version": "source",
"requires_python": null,
"size": 5579,
"upload_time": "2025-07-08T14:20:31",
"upload_time_iso_8601": "2025-07-08T14:20:31.867979Z",
"url": "https://files.pythonhosted.org/packages/0a/6f/ef994520ad04b6e99f536f297a9261f5b08ed5e314171e8ddd5163326b0e/django_react_components-1.0.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-07-08 14:20:31",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "zagaran",
"github_project": "django-react-components",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"requirements": [
{
"name": "asgiref",
"specs": [
[
"==",
"3.8.1"
]
]
},
{
"name": "django",
"specs": [
[
"==",
"4.2"
]
]
},
{
"name": "django-webpack-loader",
"specs": [
[
"==",
"3.1.1"
]
]
},
{
"name": "sqlparse",
"specs": [
[
"==",
"0.4.2"
]
]
}
],
"lcname": "django-react-components"
}
JSON
