一个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如何在wix中为TARGETDIR和SourceDir提供路径?   java在custom starter中访问spring应用程序名称   没有构建带有ActionBarSherlock的java Android项目   java按钮边框不显示   JavaSpring:从表单数据获取文件输入流   javascript通知侦听器服务   java在Junit测试时遇到异常   java从文件中读取特定值   JavaFX:在很短的时间内隐藏窗格   如何在Docker中使用用户定义的引用类来容器化Java应用程序?   java如何更改项目的编译SDKversion?   是否有任何java/spring方法可以使用HttpServletRequest存储当前登录用户的会话信息?   Java中的双大于号(>>)?   Java阵列2x2及其工作原理   java Spring引导ddl自动生成器   java如何利用大量数据传输优化服务器客户端应用程序?   java在使用Windows的FLAG_全屏时ICS和Jelly Bean之间的不同行为   java如何获取当前在回收器视图的线性布局中不可见的视图