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-components
to 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_bundle
tag fromdjango_webpack_loader
:
{% load react_component from django_react_components %}
{% load render_bundle from webpack_loader %}
- 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' 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
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
File details
Details for the file django-react-components-0.1.3a0.tar.gz
.
File metadata
- Download URL: django-react-components-0.1.3a0.tar.gz
- Upload date:
- Size: 4.5 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/1.11.0 pkginfo/1.4.2 requests/2.18.4 setuptools/40.2.0 requests-toolbelt/0.8.0 tqdm/4.23.4 CPython/3.6.8
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | 284121280113ec64c8bdf60dc855cad02b6ae1711a1c5d28310fb5dcb8c06dbe |
|
MD5 | 2bcf944c5db55c9cc9353e49ebf37030 |
|
BLAKE2b-256 | 886479e452335af86efc223d8555ed4966fe75a19dfeb604280c8e51f6ce807f |