如何与材质ui以及python-django一起使用react

时间:2018-08-21 14:34:02

标签: javascript python django reactjs material-ui

我需要帮助来与Web应用程序中的材料ui组件进行反应。

为多个项目工作的以下关键技术

Materialize CSS JavaScript jQuery

要用于新项目的以下关键技术

Material UIReact

使用react或使用Angular是个好主意吗?

如何开始制作同时具有django和具有实质性UI组件的项目?

参考文献:

5 个答案:

答案 0 :(得分:0)

前端和后端是两个分开的东西。

  • 您可以使用任何数据库,因为您的后端可以使用该数据库。
  • 您可以使用任何东西作为后端。
  • React / vue / angular不在乎您将如何与服务器通信或使用什么后端。

您可以使用facebook-create-react-app来设置前端开发以进行响应,这将设置基本的开发样板。您还需要注意客户端路由(可以使用react-router,并且需要某种方式与后端进行通信,例如使用ajax调用以使用ES6 fetch()或其他方式获取数据js库,例如axios

由您决定如何处理后端,但我建议您使用RESTfull API with django来与您的前端进行通讯

答案 1 :(得分:0)

我现在正在一个项目上执行此操作。该项目是使用Docker为我设置的,但是我建议这样做,它包含的内容非常好。但是,如果您不想使用Docker,则可以使用create-react-app。我将确保它与Django项目位于单独的目录中,但位于同一git repo中。

create-react-app将创建一个开发服务器供您开发前端。

除了Material UI之外,您还需要在React代码中添加一些其他库来满足其他一些需求:

传统上,您将使用RESTful API,但这些API很难很好地设计,并且在可遍历性和随时间变化的能力方面受到限制。我认为GraphQL是Web API的未来,每个人都应该检查一下。

要在Django中实现GraphQL API,您可以使用graphene-django,它可以与Django的ORM(模型)很好地集成在一起。它的文档很薄,但是我发现它的效果很好。

在客户端,有一些React库,用于使用GraphQL API连接到服务器。我使用的Relay与React和GraphQL来自同一开发人员,但是Apollo也可能是一个不错的选择,具体取决于其开发状态。

最终,在部署项目时,您将需要从create-react-app或Webpack或用于编译React代码的任何内容中编译生产静态文件。然后将静态文件放在可以在您的站点上提供服务的位置。如果您使用的是像nginx这样的生产网络服务器,则可以直接提供静态文件,而无需访问Django。

答案 2 :(得分:0)

我为多个项目工作的以下关键技术:

后端:Python-Django(MySQL)

前端:实现CSS,JavaScript,Jquery。 我想为新项目使用以下关键技术:

  

什么是工作?如果您可以在后端编写api,请继续使用django框架编写一些api。

后端:Python-Django(MySQL) 前端:材质用户界面,React 你们可以帮我实现这一点。

  

您所说的工具是什么意思?继续,找到一个不错的react + material ui + webpack样板并启动应用程序。尝试消费   您的后端api通过它。

使用react或使用Angular是个好主意吗?

  

漫长的讨论,如果您阅读所发表的文章,您将得到此答案

我需要切换到其他数据库吗?

  

这取决于您的项目

答案 3 :(得分:0)

看看这个https://github.com/owais/django-webpack-loader,这是使用 django 启动 react 构建的好策略(我使用 django rest),您可以在 jinja 模板中使用 html,在其中注入 react JS 代码

您可以弹出或使用 config override top 覆盖 react JS 中存在的默认原生 webpack 配置 https://www.npmjs.com/package/config-override

答案 4 :(得分:0)

我认为您应该看到 Preact,它集成在任何 MVC 模板中,您可以通过它们的 id 覆盖模板的某些位置。

通过这个解决方案,你可以在你的模板表单或其他你需要的表单中注入材料 ui 代码。

对于注入,您需要使用自定义元素, https://preactjs.com/guide/v10/web-components/#creating-a-web-component