编辑“︁Django与React集成”︁（章节）

== 集成方法 ==

=== 方法1：Django作为API后端 + 独立React前端 ===

这是最常用的集成方式，Django通过REST框架提供API，React通过HTTP请求与后端交互。

==== 配置Django REST框架 ====

首先安装必要的包：
<syntaxhighlight lang="bash">
pip install djangorestframework django-cors-headers
</syntaxhighlight>

配置settings.py：
<syntaxhighlight lang="python">
INSTALLED_APPS = [
    ...
    'rest_framework',
    'corsheaders',
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True  # 开发时使用，生产环境应限制
</syntaxhighlight>

创建简单的API视图：
<syntaxhighlight lang="python">
# api/views.py
from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def hello_world(request):
    return Response({"message": "Hello from Django!"})
</syntaxhighlight>

=== 方法2：Django模板中嵌入React ===

对于小型项目，可以直接在Django模板中引入React组件。

1. 在Django项目中创建静态文件夹：
<syntaxhighlight lang="bash">
mkdir -p frontend/static/js
</syntaxhighlight>

2. 创建React组件（使用CDN方式）：
<syntaxhighlight lang="html">
<!-- templates/index.html -->
{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>Django+React</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        function App() {
            return <h1>Hello from React!</h1>;
        }
        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>
</syntaxhighlight>