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.
- Import non-compiled JSX from anywhere (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.
- Caches npm stuff. You'll notice that the command
react-pages project
runs much after the 1st time.
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
# Basic
$ 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)
# Misc
$ react-pages runserver # django runserver alternative
$ react-pages clear-cache
Django Integration
Quickstart
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
...
]
template.html
{% load react_pages %}
...
{% render_react_page 'my_page' %}
...
Remember to use react-pages runserver
instead of manage.py runserver
!
(This was done to remove the manual build step).
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.
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 %}
App.js
console.log(js_var);
Note: These must be JSON serializable or JSON serialized.
For production, just put DEBUG=False
in settings.py
and relax.
Note: This is not implemented yet.
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
-
It might not uninstall using pip.
This is a side-effect of react-page's caching.
As a temporary fix, Runreact-pages clear-cache
, and thenpip uninstall react-pages
will work as expected.
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for react_pages-0.1.8-py2.py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | f23d7eec78502d74cf51d093b0e3347c9d9c62aa1de66d7fb4d9295679f49bfb |
|
MD5 | 7a6e3f9b8c09e4e6c86c9fd0c92987bc |
|
BLAKE2b-256 | 82d23edea5da2ca06ddfa9640607cb04fd2cba22e6ab9e21315729418d2c1b09 |