Package: react-pages
React PagesA zero-fuss way to create non single page apps with react.Zero Configuration required.
Mostly thanks tocreate-react-app.Custom react scriptsinbuilt.Allows cross-page imports
(create-react-appdoesn't allow this).Ready-to-serve production builds with the proper paths.
(using--static-urloption)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 isreally fast(at the cost of installation time).RespectNODE_ENVvar wherever possible
(see.env).Supports sass-loader, essential formaterial-components-web.TerminologyProjectThe 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 anindex.jsfile,
(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.jsInstallpip install react-pagesLicense: MIT License (MIT)Requires: Python >=3.6If you don't have node,For bash, usenvm.For fish shell, you can usefisher fnm(get fisher).Once you have npm/node, react pages will work as expected.TODO: make react-pages automatically install nodeCommands$react-pagesprojectmy_project# create a "project"$cdmy_project# don't forget to do this!$react-pagespagemy_page# create a "page"$react-pagesdevelop# development$react-pagesdeploy# production# Open `./my_project/build/my_page/index.html` in browser$react-pagesrunserver# django runserver alternative$react-pages--build-cache# rebuild the cache$react-pages--rm# clear the cache$react-pages--cache# ouput the cache dirDjango IntegrationRemember to usereact-pages runserverinstead ofmanage.py runserver!(This was done to remove the manual build step).Setupsettings.pyINSTALLED_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
    ...
]Usagetemplate.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 putDEBUG=Falseinsettings.pyand relax.Note: This is not implemented yet.Django ContextYou can pass django template context varialbes like so -views.pycontext['py_var']=[1,2,3]template.html{% render_react_page 'my_page' js_var=py_var %}my_page/App.jsconsole.log(js_var);Note: These must be JSON serializable or JSON serialized.Class Based Viewviews.pyfromreact_pages.viewsimportReactPageViewclassMyPageView(ReactPageView):page_name='my_page'urls.pyurlpatterns = [
    ...
    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 aget_js_context()methodviews.pyclassMyPageView(ReactPageView):page_name='my_page'defget_js_context(self):return{'js_var':'Hello!'}my_page/App.jsconsole.log(js_var);Django Formsviews.pyfromreact_pages.viewsimportReactPagesFormViewclassMyFormView(ReactPagesFormView):form_class=MyAwesomeForm# Any ol' Django Formpage_name="my_page"my_page/App.jsimportReact,{Component}from'react';#seethemagicinconsole!console.log(csrf_token);console.log(form);exportdefaultclassAppextendsComponent{render(){return(<formdangerouslySetInnerHTML={{__html:csrf_token.as_html+form.as_html}}/>);}}Existing projectsReact Pages will automatically patch itsef into any existing project,
that was created usingcreate-react-app.Just runreact-pages project .from your project directory!Projects not usingcreate-react-appwill probably work,
but no guarantees can be made.Issues🐍🏕️