使用react创建非单页应用程序的零麻烦方法。
react-pages的Python项目详细描述
反应页面
使用react创建非单页应用程序的零麻烦方法。
- 需要零配置。 多亏了 create-react-app。
- Custom react scripts 内置。
- 允许跨页导入 （创建react应用程序doesn't allow this）。
- 准备好用正确的路径为生产构建服务。
（使用
--static-url选项） - 在Django本地使用React。
- 轻松从开发走向生产。
- 每个virtualenv只加载一次npm包。
这意味着创建新项目的速度非常快。 （以安装时间为代价）。 - 尽可能尊重
NODE_ENV变量 （见.env）。 - 支持sass加载程序，对于 material-components-web。
术语
项目
该项目包含必要的node.js模块 使用react和您创建的页面。
└── my_project
├── package.json
├── package-lock.json
├── .env
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
<pages>
页码：
页面是至少包含index.js文件的目录，
（以及特定于应用程序的其他css/js文件。）
└── my_page
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── registerServiceWorker.js
安装
pip install react-pages
许可证：MIT许可证（MIT）
需要：python>；=3.6
如果没有节点，
对于bash，使用nvm。
对于鱼壳，可以使用fisher fnm
（get fisher）。
一旦有了npm/node，react页面将按预期工作。
todo:使react页面自动安装node
命令
$ 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集成
记住使用react-pages runserver而不是manage.py runserver！
（这样做是为了删除手动生成步骤）。
设置
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' %}
...
就这样！
React Pages将从“我的项目”中获取“我的页面”页面
为transpile react jsx项目并做必要的工作。
制作时，只需将DEBUG=False放入settings.py并放松。
注意：尚未实现。
django上下文
您可以传递django模板上下文变量，如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);
注意：这些必须是json可序列化的或json序列化的。
基于类的视图
views.py
fromreact_pages.viewsimportReactPageViewclassMyPageView(ReactPageView):page_name='my_page'
urls.py
urlpatterns = [
...
path('my_page/', views.MyPageView.as_view(), name="my page"),
]
当你转到“我的网页/网址”时， 你会看到反应页面呈现出它的全部荣耀！
要将a上下文传递给js，请定义一个get_js_context()方法
views.py
classMyPageView(ReactPageView):page_name='my_page'defget_js_context(self):return{'js_var':'Hello!'}
我的网页/app.js
console.log(js_var);
django forms
views.py
fromreact_pages.viewsimportReactPagesFormViewclassMyFormView(ReactPagesFormView):form_class=MyAwesomeForm# Any ol' Django Formpage_name="my_page"
我的网页/app.js
importReact,{Component}from'react';#seethemagicinconsole!console.log(csrf_token);console.log(form);exportdefaultclassAppextendsComponent{render(){return(<formdangerouslySetInnerHTML={{__html:csrf_token.as_html+form.as_html}}/>);}}
现有项目
Read页面将自动将ITSEF插入任何现有项目中，
是用create-react-app创建的。
从项目目录中运行react-pages project .！
不使用create-react-app的项目可能会工作，
但不能保证。
问题
欢迎加入QQ群-->： 979659372
