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.

Terminology

Project

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

Page:

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

Install

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

Commands

$ 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 manage.py runserver!

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

Setup

settings.py

INSTALLED_APPS = [
    ...
    'react_pages',
    ...
]

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

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

Usage

template.html

{% 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 settings.py and relax.

Note: This is not implemented yet.

Django Context

You can pass django template context varialbes like so -

views.py

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

template.html

{% render_react_page 'my_page' js_var=py_var %}

my_page/App.js

console.log(js_var);

Note: These must be JSON serializable or JSON serialized.

Class Based View

views.py

from react_pages.views import ReactPageView

class MyPageView(ReactPageView):
    page_name = 'my_page'

urls.py

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

views.py

class MyPageView(ReactPageView):
    page_name = 'my_page'

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

my_page/App.js

console.log(js_var);

Django Forms

views.py

from react_pages.views import ReactPagesFormView


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

my_page/App.js

import React, { Component } from 'react';


# see the magic in console!
console.log(csrf_token);
console.log(form);

export default class App extends Component {
    render() {
        return (
            <form
                dangerouslySetInnerHTML={{
                    __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.

Issues


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.

Files for react-pages, version 0.3.2
Filename, size File type Python version Upload date Hashes
Filename, size react_pages-0.3.2-py2.py3-none-any.whl (154.9 kB) File type Wheel Python version py2.py3 Upload date Hashes View
Filename, size react-pages-0.3.2.tar.gz (138.6 kB) File type Source Python version None Upload date Hashes View

Supported by

Pingdom Pingdom Monitoring Google Google Object Storage and Download Analytics Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN DigiCert DigiCert EV certificate StatusPage StatusPage Status page