Skip to main content

A zero-fuss way to create non single page apps with react.

Project description

React Pages

A zero-fuss way to create non single page apps with react.
  • Zero Configuration required. Mostly thanks to create-react-app.
  • Custom react scripts inbuilt.
  • Allows cross-page imports (create-react-app doesn't allow this).
  • Ready-to-serve production builds with the proper paths. (using --static-url option)
  • Natively use react in django.
  • Go from development to production with ease.
  • Donwloads npm packages only once, per virtualenv.
    This means creating a new project is really fast (at the cost of installation time).
  • Respect NODE_ENV var wherever possible (see .env).
  • Supports sass-loader, essential for material-components-web.



The project contains the node.js modules necessary to use react and the pages you create.

└── my_project
    ├── package.json
    ├── package-lock.json
    ├── .env
    ├── .gitignore
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   └── manifest.json


A page is a directory containing at least an index.js file, (and other css/js files specific to your application.)

└── my_page
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js


pip install react-pages

License: MIT License (MIT)
Requires: Python >=3.6

If you don't have node,

For bash, use nvm.

For fish shell, you can use fisher fnm (get fisher).

Once you have npm/node, react pages will work as expected.

TODO: make react-pages automatically install node


$ react-pages project my_project # create a "project"

$ cd my_project # don't forget to do this!

$ react-pages page my_page # create a "page"

$ react-pages develop # development

$ react-pages deploy # production

# Open `./my_project/build/my_page/index.html` in browser

$ react-pages runserver # django runserver alternative

$ react-pages --build-cache # rebuild the cache

$ react-pages --rm # clear the cache

$ react-pages --cache # ouput the cache dir

Django Integration

Remember to use react-pages runserver instead of runserver!

(This was done to remove the manual build step).



# specify the react-pages project directory
REACT_PAGES_PROJECT_DIR = os.path.join(BASE_DIR, 'my_project')

    os.path.join(REACT_PAGES_PROJECT_DIR, 'build')  # mark the build dir as a static file dir



{% load react_pages %}
{% render_react_page 'my_page' %}

That's it!
React Pages will pick-up the "my_page" page from "my_project" project and do the necessary work to transpile react JSX.

For production, just put DEBUG=False in and relax.

Note: This is not implemented yet.

Django Context

You can pass django template context varialbes like so -

context['py_var'] = [1, 2, 3]


{% render_react_page 'my_page' js_var=py_var %}



Note: These must be JSON serializable or JSON serialized.

Class Based View

from react_pages.views import ReactPageView

class MyPageView(ReactPageView):
    page_name = 'my_page'

urlpatterns = [
    path('my_page/', views.MyPageView.as_view(), name="my page"),

when you go over to 'my_page/' url, you'll see the react page rendered in its full glory!

To pass the a context to JS, define a get_js_context() method

class MyPageView(ReactPageView):
    page_name = 'my_page'

    def get_js_context(self):
        return {'js_var': 'Hello!'}



Django Forms

from react_pages.views import ReactPagesFormView

class MyFormView(ReactPagesFormView):
    form_class = MyAwesomeForm # Any ol' Django Form
    page_name = "my_page"


import React, { Component } from 'react';

# see the magic in console!

export default class App extends Component {
    render() {
        return (
                    __html: csrf_token.as_html + form.as_html

Existing projects

React Pages will automatically patch itsef into any existing project, that was created using create-react-app.

Just run react-pages project . from your project directory!

Projects not using create-react-app will probably work, but no guarantees can be made.


Buy Me A Coffee


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

react-pages-0.3.2.tar.gz (138.6 kB view hashes)

Uploaded Source

Built Distribution

react_pages-0.3.2-py2.py3-none-any.whl (154.9 kB view hashes)

Uploaded Python 2 Python 3

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