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:
$ pip install django-react-components
Add django_react_components to your INSTALLED_APPS in settings.py:
INSTALLED_APPS = (
...,
'django_react_components',
)
You will also need to install three other dependencies:
django-react-loader: the JS counterpart to this package, used to serve the React components fordjango-react-componentsto load into Django templates.django-webpack-loader: the Django dependency used to render the runtime bundles required for React to run.webpack-bundle-tracker: the dependency used by Webpack to generate stats to be consumed bydjango-webpack-loader.
Usage
Rendering React Components
In your templates, you can render React components by using the {% react_component %} template tag. To do so:
- Load the template tag and the
render_bundletag fromdjango_webpack_loader:
{% load react_component from 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' id='app' prop1=prop1 prop2=prop2 %}
</body>
3a. 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>
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
Hashes for django-react-components-0.1.3a0.tar.gz
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 284121280113ec64c8bdf60dc855cad02b6ae1711a1c5d28310fb5dcb8c06dbe |
|
| MD5 | 2bcf944c5db55c9cc9353e49ebf37030 |
|
| BLAKE2b-256 | 886479e452335af86efc223d8555ed4966fe75a19dfeb604280c8e51f6ce807f |
