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
Project details
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
Close
Hashes for django-react-components-0.1.2a0.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | df9da608451453919c5ba6f671879ac0f738ba9481f97743393cd7add388286f |
|
MD5 | 474f0f9bc7b2aed4e9fc0bc280d0a34e |
|
BLAKE2b-256 | 0ec5c7783736dbf2dcd1c967cddc5e7f1bd5712f7ec65e9c76515827395b1d5a |