Skip to main content

A Django app that allows React templating.

Project description

React Templates is a Django app made to integrate React into Django Templates.


pip install django-react-templates

Update your file with:

import os

from django.core.wsgi import get_wsgi_application
from react_templates.wsgi import get_web_application

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "main.settings")

application = get_wsgi_application()
web_application = get_web_application() # Make sure this is after the application

Once runserver command is called, React Templates will setup it’s necessary files and packages.

Important Files

React Templates creates several files inside your root:

  • package.json - For managing the React packages, you can also install your own packages inside.

  • yarn.lock - Lockfile for your packages.

  • .babelrc - Configuration file for Babel compiler.

Removing any of these files (or altering .babelrc) will result in unpredicted results or failure.

Quick Start

Inside any app in your project, create a web folder and a .js file.

// File inside /my-app/web/HelloWorld.js

import React from "react";

function HelloWorld() {
  const [number, setNumber] = React.useState(0);
  return (
      <h1>Hello World! {number} times!</h1>
      <button onClick={() => setNumber(number + 1)}>Click me!</button>

export default HelloWorld; // Defines which component will be rendered as an entrypoint.

Once you have your React Component, create a view that renders that template:

# File inside /my-app/
from react_templates.render import render_react

def hello_world_page(request):
    return render_react(request, "my-app/HelloWorld.js") # Notice you must not mention the web folder!

Now you can path it to some url and it will render a html page!


Importing components from your own project must be done using the relative path from it. For example, if we have a component in a different app:

// File inside /my-app/web/Home.js

import { OtherComponent } from "../../../new-app/web/components/OtherComponent.js";



You can pass a context to the main component and it’ll be received as a prop.

def my_view(request):
  return render_react(request, "my-app/MyComponent.js", {"name": "Breno Gomes"})
function MyComponent({name}){
  return <h1>{name}</h1>

The code above will render a title with the name “Breno Gomes”.

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-templates-0.2.tar.gz (6.0 kB view hashes)

Uploaded Source

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