大家可能知道，当使用Vanilla JS时，你可以只将html文件提交给Django，然后在Python语言的行之间编写代码，以便在Web应用程序的后端创建所需的功能。但是，当我们使用React JS时，情况并非如此。有没有类似的方法（如vanilla JS和html文件）来集成REACT. JS和Django（除了使用rest API端点）？
9w11ddsr1#
也许使用react和Django是两种不同的技术，你需要API来交互，而在Django HTML文件中编写vanilla js则不是这样。
ldxq2e6h2#
它被称为React服务器端渲染。如果你添加Django并搜索它，你会得到一些点击，就像下面的教程：https://medium.com/meural-product-development/setting-up-server-side-rendering-with-react-redux-and-django-4d6f4d2fd705看起来可行，只要你对Node也有点精通。
hujrc8aj3#
如果你想在不使用API的情况下连接Django和React，你可以直接在React组件中渲染Django模板。以下是您可以实现这一点的方法：1.**从Django提供React应用：**首先，确保您的React应用已构建，并且静态文件收集在Django的静态目录中。你可以使用像create-react-app这样的工具构建你的React应用，然后将构建文件复制到Django的静态文件夹中。1.**带有React组件的Django模板：**在Django模板（.html文件）中，您可以使用<script>标签包含React组件。举例来说：
create-react-app
.html
<script>
<!DOCTYPE html><html lang="en"><head> <!-- Head elements --></head><body> <!-- Your Django template content --> <div id="react-root"></div> <script src="{% static 'js/react-bundle.js' %}"></script></body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Head elements -->
</head>
<body>
<!-- Your Django template content -->
<div id="react-root"></div>
<script src="{% static 'js/react-bundle.js' %}"></script>
</body>
</html>
在上面的示例中，react-bundle.js是包含React组件的捆绑JavaScript文件。1.**React组件：**在React组件中，您可以使用react-dom库渲染指定div元素内的组件。举例来说：
react-bundle.js
react-dom
div
import React from 'react';import ReactDOM from 'react-dom';const App = () => { return ( <div> <h1>Hello from React!</h1> </div> );};ReactDOM.render(<App />, document.getElementById('react-root'));
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (
<div>
<h1>Hello from React!</h1>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('react-root'));
确保你的React组件被绑定到一个单独的JavaScript文件中（比如模板中的react-bundle.js）。1.**处理React路由：**如果你的React应用使用React Router进行导航，你可以设置Django URL模式来处理这些路由。配置Django捕获所有不匹配的URL并使用React提供主模板，然后React Router可以接管客户端的路由。例如，在Django的urls.py中：
urls.py
from django.urls import pathfrom django.views.generic import TemplateViewurlpatterns = [ path('', TemplateView.as_view(template_name='index.html')),]
from django.urls import path
from django.views.generic import TemplateView
urlpatterns = [
path('', TemplateView.as_view(template_name='index.html')),
]
此配置确保Django应用程序中的任何路由服务于React模板，然后React Router可以处理客户端路由。请注意，此方法将React组件直接嵌入Django模板中，并且它可能无法提供基于API的方法所提供的前端和后端逻辑之间的相同级别的分离。但是，对于更简单的应用程序或特定用例，它可能是一个可行的选择。
3条答案
按热度按时间9w11ddsr1#
也许使用react和Django是两种不同的技术，你需要API来交互，而在Django HTML文件中编写vanilla js则不是这样。
ldxq2e6h2#
它被称为React服务器端渲染。如果你添加Django并搜索它，你会得到一些点击，就像下面的教程：
https://medium.com/meural-product-development/setting-up-server-side-rendering-with-react-redux-and-django-4d6f4d2fd705
看起来可行，只要你对Node也有点精通。
hujrc8aj3#
如果你想在不使用API的情况下连接Django和React，你可以直接在React组件中渲染Django模板。以下是您可以实现这一点的方法：
1.**从Django提供React应用：**首先，确保您的React应用已构建，并且静态文件收集在Django的静态目录中。你可以使用像
create-react-app这样的工具构建你的React应用，然后将构建文件复制到Django的静态文件夹中。1.**带有React组件的Django模板：**在Django模板（
.html文件）中，您可以使用<script>标签包含React组件。举例来说：在上面的示例中，
react-bundle.js是包含React组件的捆绑JavaScript文件。1.**React组件：**在React组件中，您可以使用
react-dom库渲染指定div元素内的组件。举例来说：确保你的React组件被绑定到一个单独的JavaScript文件中（比如模板中的
react-bundle.js）。1.**处理React路由：**如果你的React应用使用React Router进行导航，你可以设置Django URL模式来处理这些路由。配置Django捕获所有不匹配的URL并使用React提供主模板，然后React Router可以接管客户端的路由。
例如，在Django的
urls.py中：此配置确保Django应用程序中的任何路由服务于React模板，然后React Router可以处理客户端路由。
请注意，此方法将React组件直接嵌入Django模板中，并且它可能无法提供基于API的方法所提供的前端和后端逻辑之间的相同级别的分离。但是，对于更简单的应用程序或特定用例，它可能是一个可行的选择。