React Pages

使用React创建非单页应用的一种无需烦恼的方法。

• 无需配置。主要归功于create-react-app。
• 内置自定义react脚本。
• 允许跨页面导入（create-react-app 不允许此操作）。
• 带有正确路径的现成生产构建。（使用--static-url选项）
• 在Django中本地使用React。
• 轻松从开发到生产。
• 每个虚拟环境只下载一次npm包。
  这意味着创建新项目非常快（以安装时间为代价）。
• 尽可能尊重NODE_ENV变量（参见.env）。
  
• 支持sass-loader，这对于material-components-web至关重要。

术语

项目

该项目包含使用React和您创建的页面所需的node.js模块。

└── 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

如果您没有node，

对于bash，请使用nvm。

对于fish shell，您可以使用fisher fnm（获取fisher）。

一旦您有了npm/node，react pages将按预期工作。

TODO：让react-pages自动安装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将从“my_project”项目中提取“my_page”页面，并进行必要的转换以编译react JSX。

对于生产环境，只需在settings.py中将DEBUG=False，然后放松。

注意：此功能尚未实现。

Django上下文

您可以通过以下方式传递django模板上下文变量 -

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);

注意：这些必须是可序列化为JSON或已序列化为JSON的。

基于类的视图

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"),
]

当您访问'my_page/' URL时，您将看到渲染出的React页面！

要将上下文传递给JS，请定义一个get_js_context()方法

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表单

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
                }}
            />
        );
    }
}

现有项目

React Pages将自动将其自身集成到任何使用create-react-app创建的现有项目中。

只需从您的项目目录中运行react-pages project .！

不使用create-react-app的项目可能也可以工作，但无法保证。

问题

🐍🏕️