首页 文章

ReactJS与Django - 真实使用

提问于
浏览
72

我和React有点混乱,我非常喜欢它 . 它比Angular(ng-repeat with | filter无 Value )更冗长,但还可以 .

那个让我烦恼的事情就是我应该如何使用React和Django模板 . 我应该将所有的javascript与“HTML”标记一起放入模板中吗?

实现Angular非常无缝 . 我只是将一些属性放入template / django表单类中,然后在单独的文件中编写javascript . 包括该文件并完成 .

如何“使用”反应?什么是正确的方法?

提前致谢!

3 回答

  • 4

    由于您希望将React与Django模板一起使用,我认为React代码只会影响页面的特定部分 . 基于该假设编写以下解释 .

    首先,您不必将所有JS代码放在模板中 - 事实上,这将是一团糟 .

    您可以创建一个单独的基于JS的构建过程using Webpackcheck out this howto) . 这增强了客户端代码的功能,允许您在浏览器中使用CommonJS模块,您可以直接从npm提取,包括React .

    反过来,Webpack将生成一个包(或多个包,具体取决于应用程序的性质和Webpack配置),您需要像往常一样通过 <script> 标记包含在Django模板中 .

    现在,您需要进行 React.render() 调用,以在现有页面布局中的某处呈现React应用程序 . 您需要使用具有特定ID /类名称的空HTML元素作为应用程序的安装点 .

    但需要注意的是:您无法直接从浏览器或Django模板访问CommonJS模块 . 所以要么你,

    • React 和你的应用曝光到 window 对象,或者

    • 使用胶水代码创建一个模块来处理应用程序初始化并将该方法公开给 window 对象 .

    在任何情况下,您都需要直接从模板中调用初始化代码(请查看an example of glue codecall to app initialization) .

    此初始化步骤还允许您将Django模板中可用的变量传递给JS代码 .

    最终的Django模板看起来像这样:

    {% load staticfiles %}
    {% extends 'base.html' %}
    
    {% block scripts %}
    <script type="text/javascript" src="{% static 'path/to/app.bundle.js' %}"></script>
    <script type="text/javascript">
      // Initialization glue code
      window.MyApp.init({el: '.app-mountpoint'});
    </script>
    {% endblock %}
    
    {% block content %}
    <!-- Your template contents -->
    
    <!-- The mount point of your app -->
    <div class="app-mountpoint" />
    {% endblock %}
    

    胶水代码:

    var React = require('react');
    
    var MyAppComponent = require('MyAppComponent');
    
    
    window.MyApp = {
    
      init: function (opts) {
        var mountPoint = document.querySelector(opts.el);
    
        React.render(<MyAppComponent />, mountPoint);
      }
    
    };
    

    我知道所有这一切在开始时可能听起来都是压倒性的(甚至比你使用Angular的几步还要多),但相信我从长远来看会有所回报 .

    总结如下:

    • 在单独的JS文件中编写React代码

    • 使用Webpack(利用CommonJS模块)捆绑您的React代码

    • 在Django模板中包含该包

    • 使用Django模板中的胶水代码渲染React代码

  • 81

    如果您将前端和后端视为两个不同的独立实体,该怎么办?我的意思是:

    • Django应该只是一个API并使用json数据进行响应

    • The frontend should be only static files served by nginx

    • 您可能必须处理CORS才能允许两者之间的通信 . 一种选择是允许来自前端的预检请求,另一种选择是设置nginx代理 . 这是一个单独的问题,如果您需要更多详细信息,请搜索它 .

    我认为这种架构允许您将事物分开,而不是处理它们的集成 . 在前端/ React生态系统上已经太复杂了,所以我认为必须考虑配置的简单性 .

    我也有兴趣了解一个部署过程如何寻找这个架构(使用什么工具?),所以如果你有建议请添加评论,我会相应地更新响应,为未来的读者提供有用的信息 .

  • 9

    我实现了类似于你要求的东西 . 我的前端完全是使用webpack编译的reactjs,我的模板是在django中创建的 .

    所以我做了以下事项: -

    • 使用react-router并做出反应以创建.jsx / .js代码 .

    • 使用webpack编译 .

    • 使用django-webpack

    所以django-webpack非常好用,可以帮助你在django之外隔离你的编译,让思考以一种漂亮和可扩展的方式工作 .

相关问题