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.
- Go from development to production with ease.
Features
- custom react scripts
- Imports from other pages (create-react-app doesn't allow that)
- Natively use react in django.
- Ready-to-serve production builds with the proper paths. (using
--static-url
option)
Terminology
Project
The project contains the node.js modules necessary to use react and the pages you create.
└── 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.)
└── page
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── registerServiceWorker.js
QuickStart
You need npm on your machine!
pip install react-pages
Commands :
$ react-pages project my_project # create a project
$ cd poll_react_pages
$ react-pages page my_page # create a page
$ react-pages develop # development
$ react-pages deploy # production
$ react-pages runserver # django runserver alternative
Django Integration
settings.py
INSTALLED_APPS = [
...
'react_pages',
...
]
# React Pages
REACT_PAGES_PROJECT_DIR = os.path.join(BASE_DIR, 'my_project') # specify the react-pages project
STATICFILES_DIRS = [
...
os.path.join(REACT_PAGES_PROJECT_DIR, 'build') # mark the build dir as static file dir
...
]
template.html
{% load react_pages %}
...
{% render_react_page 'vote' %}
...
Remeber to use react-pages runserver
instead of manage.py runserver
!
That's it! React Pages will pick-up the "vote" page from "poll_react_pages" project and do the necessary work to transpire react JSX.
Django Context
You can pass django template context varialbes like so -
views.py
context['foo'] = [1, 2, 3]
template.html
{% render_react_page 'vote' foo=foo %}
Then access these anywhere in react code
console.log(foo);
Note: These must be JSON serialize-able
For production, just put DEBUG=False
in settings.py
and relax.
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. As a temporary fix, Run
react-pages uninstall
once, and thenpip uninstall react-pages
will work.
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.3-py2.py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 62738ac83a552fb28de703f271a56fcebd65680d9dbc8e3a66a0b9e6403fa6a5 |
|
MD5 | c7c29b2b6d1b4937e4126a0441efa255 |
|
BLAKE2b-256 | ebed2cf05994570eac18bb8e5a9f05abc0e6a39da02da47fdcb8d3e614a543e3 |