Skip to main content

A Django app providing generic Class Based views and template tags that make it easy to use react alongside django views and templates.

Project description


django-react-riews is a Django app providing generic Class Based views and template tags that make it easy to use react alongside django views and templates.

It can be used along with channels-redux-python and channels-redux-js to provide a framework to use websockets to keep a frontend redux state in sync with the database state.

Quick start

  1. Add "django_react_views" to your INSTALLED_APPS setting like this::

  2. Create a directory in your app called react

  3. Copy webpack.config.js or use you're own webpack config as long as it builds your react components into one of your STATICFILES_DIRS

  4. Use npm to install at least the packages required for react & building with webpack

    npm install --save-prod react react-dom
    npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-es2015 babel-preset-react glob webpack webpack-cli
  5. Add these scripts to package.json

    "scripts": {
        "build": "webpack",
        "watch": "webpack --watch"
  6. Execute npm run watch to start building your react files

  7. Add the react template tag to the template where you want to show your react component

    {% load react %}
    {% react %}
  8. Create a view for your template

    from django_react_views.views import ReactDetailView
    class MyReactView(ReactDetailView):
        react_component = 'MyReactComponent.js'  # By default this will resolve to dist/app_name/{react_component}. If {% static %} can not find the file you may need to edit some other properties of this class
        model_serializer = MyModelSerializer
        model = MyModel
  9. Add a url for your view

    urlpatterns = [
        path('my-react-view/<int:pk>/', MyReactView.as_view(), name='my-react-view')
  10. This framework provides window.props, which contains a javascript object that can be used to hydrate your react state. This has the shape of::

    window.props = {"objects": {"appname.modelname": {"": {object as serialized by your model serializer}} } }
  11. Start the development server and visit and visit your page to see you're react component in action

Project details

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-views, version 1.1
Filename, size File type Python version Upload date Hashes
Filename, size django_react_views-1.1-py3-none-any.whl (6.3 kB) File type Wheel Python version py3 Upload date Hashes View
Filename, size django-react-views-1.1.tar.gz (5.5 kB) File type Source Python version None Upload date Hashes View

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring 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