Skip to main content

Django Reactify is an app that allows developers to add and use React components in their Django app without using the legacy create-react-app.

Quick start

  1. Install the package via the following command:

    pip install django-reactify

  2. Add “reactify” to your INSTALLED_APPS setting like this:

    INSTALLED_APPS = [
        ...
        'reactify',
    ]
  3. Run the following command:

    python manage.py reactify <app_name>

    Ensure that the templates directory exists in the specified app name.

    • Replace the app name with the existing Django app you want to reactify.

    • This command does the following:

      • Creates barbel and webpack configuration files in the app’s root directory.

      • Creates package.json file with the scripts to run React development server.

      • Creates a react folder directory with the necessary files and subdirectories where you can add your react component files and redux actions and reducers.

      • Creates a react folder directory with the necessary files and subdirectories where you can add your react component files and redux actions and reducers.

      • Installs the basic npm development packages.

      • starts the react development server that listens on the changes made to the react components and compile a minimal js file that is rendered to the view.

  4. cd into the django app (app_name) directory and run the following command:

    npm run dev

  5. Add the new view function to the views file to render the compiled version of the react app.

    def index(request):

    template_name = ‘<app_name>/index.html’

    return render(request, template_name)

  6. Add more React components to the react app’s component folder.

Managing React Routes

If you don’t configure Django urls to accept the Routes declared in the react, you will encouter 404 error.

To fix this, lets say you have react routes as follows:

<Switch>

<Route exact path=”/” component={Main} />

<Route exact path=”/login” component={LoginPage} />

<Route exact path=”/services” component={ServicesPage} />

<Route exact path=”/about” component={AboutPage} />

In the app urls file use re_path,

from django.urls import re_path

from .views import index

urlpatterns = [

re_path(r’’, index, name=”home”), ]

Metadata

Release files for django-reactify 1.4.0

For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.

Source distribution (sdist)

Source distribution for django-reactify 1.4.0
File Size Uploaded
django_reactify-1.4.0.tar.gz 55.9 kB Details

Built distribution (wheel)

Table of built distributions (wheels) for django-reactify 1.4.0
File Interpreter ABI Platform
django_reactify-1.4.0-py3-none-any.whl Python 3 none any Details

Total release size: 113.8 kB

Release files / django_reactify-1.4.0.tar.gz

Download URL django_reactify-1.4.0.tar.gz
Size 55.9 kB
Tags Source
SHA-256 checksum
How to use checksums
b96741a9eb5bb56a8166900e7bc59ccfac0998808fdc4853b691cd37f76547d8
BLAKE2b-256 checksum
How to use checksums
ee959384e61c382120d5846c8c1d027533da4664b626c9e3cfc1d41c31eba810
Upload date
Uploaded using Trusted Publishing?
What is trusted publishing?
No
Uploaded via twine/6.0.1 CPython/3.9.18

Release files / django_reactify-1.4.0-py3-none-any.whl

Download URL django_reactify-1.4.0-py3-none-any.whl
Size 57.9 kB
Tags Python 3
SHA-256 checksum
How to use checksums
126de5e73849292b5390236c3af075a1071024d435fa80586ee11f037ad233e6
BLAKE2b-256 checksum
How to use checksums
7360092f59bacd5b2800006317066238e55da0405b17cea05f60c274afd64d6d
Upload date
Uploaded using Trusted Publishing?
What is trusted publishing?
No
Uploaded via twine/6.0.1 CPython/3.9.18

Release history Release notifications | RSS feed

This release

1.4.0 This release

2 release files

1.3.9

2 release files

1.3.8

2 release files

1.3.7

2 release files

1.3.6

2 release files

1.3.5

2 release files

1.3.4

2 release files

1.3.3

1 release file

1.3.2

1 release file

1.3.1

1 release file

1.3

1 release file

1.2

1 release file

1.1

1 release file

1.0.2

1 release file

1.0.1

1 release file

0.1

1 release file

Anthropic, PBC Visionary sponsor Bloomberg Visionary sponsor Hudson River Trading Visionary sponsor Meta Visionary sponsor NVIDIA Visionary sponsor Microsoft Sustainability sponsor Depot Continuous Integration AWS Cloud computing and Security Sponsor Datadog Monitoring Fastly CDN Google Download Analytics Sentry Error logging StatusPage Status page