一个django应用程序,提供基于类的通用视图和模板标记,使其易于与django视图和模板一起使用react。

django-react-views的Python项目详细描述


django react视图

django react riews是一个django应用程序,它提供了基于类的通用视图和模板标记,使得使用react更加容易 以及django视图和模板。

它可以与channels-redux-python一起使用 以及channels-redux-js来提供一个框架,使用websockets来保存 与数据库状态同步的前端redux状态。

快速启动

  1. 将“django_react_views”添加到已安装的应用程序设置中,如下所示:

    INSTALLED_APPS=[...'django_react_views',]
  2. 在应用程序中创建名为react

    的目录
  3. 复制webpack.config.js或使用您自己的webpack配置,只要它将您的react组件构建到一个静态文件目录中

  4. 使用npm至少安装

    npm install --save-prod react react-dom
    npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-es2015 babel-preset-react glob webpack webpack-cli
    
  5. 将这些脚本添加到package.json

    "scripts":{"build":"webpack","watch":"webpack --watch"},
  6. 执行npm run watch开始构建反应文件

  7. 将react template标记添加到要显示react组件的模板中

    {% load react %}
    ...
    {% react %}
    ...
    
  8. 为模板创建视图

    fromdjango_react_views.viewsimportReactDetailViewclassMyReactView(ReactDetailView):react_component='MyReactComponent.js'# By default this will resolve to dist/app_name/{react_component}. If {% static %} can not find the file you may need to edit some other properties of this classmodel_serializer=MyModelSerializermodel=MyModel
  9. 为视图添加URL

    urlpatterns=[...path('my-react-view/<int:pk>/',MyReactView.as_view(),name='my-react-view')]
  10. 这个框架提供了window.props,它包含一个javascript对象,可以用来优化您的反应状态。形状为:

    window.props={"objects":{"appname.modelname":{"https://example.com/appname/modelname/1/":{objectasserializedbyyourmodelserializer}}}}
  11. 启动开发服务器并访问http://127.0.0.1:8000/,然后访问您的页面以查看您正在运行的react组件

欢迎加入QQ群-->: 979659372 Python中文网_新手群

推荐PyPI第三方库


热门话题
java如何在sqlite数据库中保存特定列的历史记录   java如何更改/更新timeseriechart名称(JFreeChart)   java如何将整数转换为可绘制的   汇编什么解释Java的字节码   java查找已编译的类版本号   我应该什么时候在ColdFusion应用程序中使用Java?   java当一个实体的两个字段为(unique=true)时,如何处理JPA异常?   java为什么在所有其他实例都正确的情况下返回错误的布尔值?   java Hibernate每次都准备语句   java停留在平均字长上   对Java和日语字符进行编码   java如何将导致异常的方法的错误消息传递给侦听器中的onTestFailure方法   java代码没有打印结果   java为什么私有内部接口的方法必须是公共的?   休眠发生错误。有关详细信息,请参阅错误日志。JAVAlang.NullPointerException