GitLocker: The Coding Marketplace

Description:

reactpages 0.3.2

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

🐍🏕️