Skip to main content
Donate to the Python Software Foundation or Purchase a PyCharm License to Benefit the PSF! Donate Now

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

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Filename, size & hash SHA256 hash help File type Python version Upload date
django-react-components-0.1.2a0.tar.gz (3.8 kB) Copy SHA256 hash SHA256 Source None

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN SignalFx SignalFx Supporter DigiCert DigiCert EV certificate StatusPage StatusPage Status page