Skip to main content

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 for django-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 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:
{% load react_component from django_react_components %}
{% load render_bundle from webpack_loader %}
  1. 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


Download files

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

Source Distribution

django-react-components-0.1.3a0.tar.gz (4.5 kB view details)

Uploaded Source

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

Hashes for django-react-components-0.1.3a0.tar.gz
Algorithm Hash digest
SHA256 284121280113ec64c8bdf60dc855cad02b6ae1711a1c5d28310fb5dcb8c06dbe
MD5 2bcf944c5db55c9cc9353e49ebf37030
BLAKE2b-256 886479e452335af86efc223d8555ed4966fe75a19dfeb604280c8e51f6ce807f

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page