A collection of tools that assist with loading and rendering React components
Project description
# Django React Components
Django React Components is a collection of tools that automate the loading and rendering of React components when used in
conjunction with `django-react-loader`. This tool is currently in beta.
## Installation
Install Django React Components using pip:
```bash
$ pip install django-react-components
```
Add `django_react_components` to your `INSTALLED_APPS` in `settings.py`:
```python
INSTALLED_APPS = (
...,
'django_react_components',
)
```
You will also need to install three other dependencies:
- [`django-react-loader`](https://github.com/zagaran/django-react-loader): the JS counterpart to this
package, used to serve the React components for `django-react-components` to load into Django templates.
- [`django-webpack-loader`](https://github.com/owais/django-webpack-loader/): the Django dependency used to render the
runtime bundles required for React to run.
- [`webpack-bundle-tracker`](https://github.com/owais/webpack-bundle-tracker): the dependency used by Webpack to
generate stats to be consumed by `django-webpack-loader`.
## Usage
#### Rendering React Components
In your templates, you can render React components by using the `{% react_component %}` template tag. To do so:
1. Load the template tag and the `render_bundle` tag from `django_webpack_loader`:
```python
{% load react_component from 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>
```
3. Use the template tag to render the component, passing in keyword arguments as props
```
<body>
{% react_component 'App' id='app' prop1=prop1 prop2=prop2 %}
</body>
```
## Requirements
Python 3.4-3.7, Django 1.11-2.2
Django React Components is a collection of tools that automate the loading and rendering of React components when used in
conjunction with `django-react-loader`. This tool is currently in beta.
## Installation
Install Django React Components using pip:
```bash
$ pip install django-react-components
```
Add `django_react_components` to your `INSTALLED_APPS` in `settings.py`:
```python
INSTALLED_APPS = (
...,
'django_react_components',
)
```
You will also need to install three other dependencies:
- [`django-react-loader`](https://github.com/zagaran/django-react-loader): the JS counterpart to this
package, used to serve the React components for `django-react-components` to load into Django templates.
- [`django-webpack-loader`](https://github.com/owais/django-webpack-loader/): the Django dependency used to render the
runtime bundles required for React to run.
- [`webpack-bundle-tracker`](https://github.com/owais/webpack-bundle-tracker): the dependency used by Webpack to
generate stats to be consumed by `django-webpack-loader`.
## Usage
#### Rendering React Components
In your templates, you can render React components by using the `{% react_component %}` template tag. To do so:
1. Load the template tag and the `render_bundle` tag from `django_webpack_loader`:
```python
{% load react_component from 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>
```
3. Use the template tag to render the component, passing in keyword arguments as props
```
<body>
{% react_component 'App' id='app' prop1=prop1 prop2=prop2 %}
</body>
```
## Requirements
Python 3.4-3.7, Django 1.11-2.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
File details
Details for the file django-react-components-0.1.2a0.tar.gz.
File metadata
- Download URL: django-react-components-0.1.2a0.tar.gz
- Upload date:
- Size: 3.8 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/1.13.0 pkginfo/1.5.0.1 requests/2.21.0 setuptools/41.0.1 requests-toolbelt/0.9.1 tqdm/4.31.1 CPython/2.7.16
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | df9da608451453919c5ba6f671879ac0f738ba9481f97743393cd7add388286f |
|
| MD5 | 474f0f9bc7b2aed4e9fc0bc280d0a34e |
|
| BLAKE2b-256 | 0ec5c7783736dbf2dcd1c967cddc5e7f1bd5712f7ec65e9c76515827395b1d5a |
