React Pages

React Pages lets you use React freely in non-node environments, like Django.

sans React Pages

Features

• 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 and automatically update it (see .env).
• Supports sass-loader, essential for material-components-web.
• Parallel-ized builds.

Terminology

Project

The project contains some basic scaffolding for a project.

Unlike traditional create-react-app projects, react-pages doesn't require any npm pacakges to be installed.

The inital package.json file is literally empty and is present as a scaffolding, nothing more.

└── my_project
    ├── package.json
    ├── .env
    ├── .gitignore
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   └── manifest.json
    <pages>

Page:

A page contains basic scaffolding for a web-page.

You are allowed to import files from other pages in your projects, leveraging true re-usability of components in a project.

└── 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/zsh, 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.

TODO: For production, just put DEBUG=False in settings.py and relax

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 .forms import MyAwesomeForm # Any ol' Django Form
from react_pages.views import ReactPagesFormView


class MyFormView(ReactPagesFormView):
    form_class = MyAwesomeForm
    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.

---

🐍🏕️