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-Views

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::

    INSTALLED_APPS = [
        ...
        'django_react_views',
    ]
    
  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": {"https://example.com/appname/modelname/1/": {object as serialized by your model serializer}} } }
    
  11. Start the development server and visit http://127.0.0.1:8000/ 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.

Filename, size & hash SHA256 hash help File type Python version Upload date
django_react_views-1.1-py3-none-any.whl (6.3 kB) Copy SHA256 hash SHA256 Wheel py3
django-react-views-1.1.tar.gz (5.5 kB) Copy SHA256 hash SHA256 Source None

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN SignalFx SignalFx Supporter DigiCert DigiCert EV certificate StatusPage StatusPage Status page