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.


Install django-react-components and django-webpack-loader using pip:

$ pip install django-react-components django-webpack-loader

Add both modules to your INSTALLED_APPS in




django-react-components relies on the django-webpack-loader python module. Install it with pip:

$ pip install django-webpack-loader



django-react-components uses nwb to compile compile React components. Install it globally:

$ npm install -g nwb


$ yarn global add nwb


django-react-components uses webpack-bundle-tracker and a sibling package, django-react-loader, to generate and render the react components. Install them locally:

$ npm install --save-dev django-react-loader webpack-bundle-tracker


$ yarn add django-react-loader webpack-bundle-tracker --dev



You will need to create a file called nwb.config.js to configure nwb to properly compile your components. Check out nwb's (configuration guide)[] for more details. Also look at their (webpack configuration options)[].

In your config file, add django-react-loader as a loader to the webpack section of it. For example:

// nwb.config.js

module.exports = {
  webpack: {
    module: {
      rules: [
          loader: ['django-react-loader'],

The loader will run on every entry passed to the nwb config file. For example, if you wanted to load three react components:


your config file might look like this:


module.exports = {
  webpack: {
    entry: {
      Comp1: './src/Comp1.js',
      Comp2: './src/Comp2.js',
      Comp3: './src/Comp3.js'

The default export of each entry point will be compiled and attached to window on load using the key of the entry point in the config file, so in out example,:

window.Comp1 // The component at './src/Comp1.js'
window.Comp2 // The component at './src/Comp2.js'
window.Comp1 // The component at './src/Comp3.js'

The template tags from django-react-components will run an initialization function on the code attached to window to create the component using the props provided to the template.

Setting up webpack-bundle-tracker

You will also need to specify the locations to bundle the javascript with the webpack-bundle-tracker. For example:

var path = require('path')
var BundleTracker = require('webpack-bundle-tracker')
module.exports = {
  webpack: {
    output: {
      path: path.resolve('./dist/webpack_bundles/'), // Location for compiled files
    plugins: [
      new BundleTracker({filename: './webpack-stats.json'}), // Location for generated tracking file

Compiling React Components

Compile your react source code with nwb. Make sure to include the -no-vendor flag:

nwb build --no-vendor

Rendering React Components

In your templates, you can render React components by using the {% react_component %} or the {% react %}template tag. To do so:

  1. Load the template tag and the render_bundle tag from django_webpack_loader:
{% load django_react_components %}
{% load render_bundle from webpack_loader %}
  1. Use render_bundle to pull in the appropriate javascript
    {% render_bundle 'runtime' %}
    {% render_bundle 'App' %} 

3a. Use the react_component tag to render the component with keyword arguments as props

    {% react_component 'App' id='app' prop1=prop1 prop2=prop2 %}

3b. 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.

    {% react 'App' id='app' %}
        <h1>Hello World</h1>
        <p>{{ content }}</p>
        <a href='{% url 'endpoint' %}'>Link</a>
    {% endreact 'App' id='app' %}

Custom Props Encoding

django_react_components uses JSON to encode props into the React components. You can specify a custom JSON encoder class with the DJANGO_REACT_JSON_ENCODER settings in your settings file. It will be passed to json.dumps(props, cls=MyJSONEncoder)


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.

Files for django-react-components, version 0.1.8a0
Filename, size File type Python version Upload date Hashes
Filename, size django-react-components-0.1.8a0.tar.gz (6.0 kB) File type Source Python version None Upload date Hashes View

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring DigiCert DigiCert EV certificate Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page