Django后端有一个React前端

Question

这个想法

我开始构建这种社交媒体类型的网站，其中包括基本的社交媒体页面，如个人资料，状态Feed，搜索，事件等。 每个页面都是一个单独的django模板，数据通过使用django模板引擎中的变量进行可视化。 但此时，我想使用ReactJS将这些静态页面更改为更动态的页面。

但是怎么样？

我想使页面动态，但它应该仍然是一个多页面的网站，其中包含/user/<id>等网址。 我想出了以下选项：

每个页面的模板。 每个页面都有一个包。 让Django处理路由。

• 为每个页面创建一个单独的Django模板，就像普通的Django应用程序一样。
• 使用django-webpack-loader加载bundle。
• 每个页面都有一个单独的包。 通过在webpack.config.js添加多个条目来创建捆绑包。 当我们有40多个不同的页面时，这会导致相当大的入口点。
• URL由Django处理，并且可以通过模板中的公共javascript变量由React访问。 例子 。 页面的其他初始数据（例如用户名，头像，个人资料信息）也通过Django模板引擎加载到此变量中。
• 不重新加载页面的动态功能（如表单验证）由React和使用django-rest-framework的Django Rest API处理。

所以？

• 这是解决这个问题的正确方法吗？
• 我在弄清楚如何将一个django模板变量（如request.user转换为React可访问的javascript变量时遇到了一些麻烦。
• 如果是这样，我该如何构建这样的应用程序？
• 每个单独的页面都有一个包可以吗？ 例如，所有页面都具有相同的标题。 在每个包中包含此标题似乎有点过分。

Answer 1

您的计划应该有效，但我认为您应该考虑您希望您的应用程序中有多少是动态的。

如果您只需要几页来获得来自React的动态功能，那么只需将一些自包含的React组件放入其中并按照您的计划单独捆绑它们可能是个好主意。 但是，如果你的大多数项目都需要是动态的，我认为最好忘记大多数页面的Django模板，只需为React创建一个可靠的API后端即可使用。

以下是如何配置webpack以捆绑反应组件的快速示例：

这是一个大型Django项目的摘录，我们正在使用一些React组件。 bundle有一堆其他的javascript东西，而report是一个独立的React组件：

webpack.config.js

    ...
    entry: {
        bundle: './server/apps/core/static/core/app.js',
        report: './server/apps/reports/static/reports/js/app.jsx'
    },
    output: {
      path: path.resolve('./server/apps/core/static/core/bundles'),
      path: path.resolve('./server/apps/core/static/core/bundles'),
      filename: 'bundle.js' + filename: '[name].js'
    },
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    ...

然后在你想要粘贴组件的模板中：

{% block content %}
    <div id="root"></div>
{% endblock content %}
{% block extrascripts %}
    <script type="text/javascript">
        var dataUrl = "{% url 'reports:data-chart' %}";
    </script>
    <script src="{% static 'core/bundles/report.js' %}"></script>
{% endblock extrascripts %}

我在这里有另一个例子可能对你有所帮助。 我需要更新它，但它更像是一个使用React与Django REST Framework，并在Django模板系统之前的样板。

希望这可以帮助。

Answer 2

这当然是一门可行的课程。

对于将模板变量转换为React的JS变量的问题，这有一些很好的解决方案： 如何将Django模板变量插入React脚本？

您应该能够捆绑任何组合的JS并构建模板，以便每个模块都可以提取相应的包。 例如，我希望您有一个包含标题（以及任何其他网站范围的HTML）的基本模板，然后为您的各个页面扩展该模板。