如何将React.js与Django连接？含无需Node.js的方法及实现代码

一、常规连接方式（需安装 Node.js） #

采用前后端分离架构，Django 作为后端提供 API 接口，React 作为前端独立运行。

1. 配置 Django 后端 #

• 初始化 Django 项目及应用：

  django-admin startproject django_react_proj
  cd django_react_proj
  python manage.py startapp api
  

• 安装并配置跨域支持（解决前后端跨域问题）：

  pip install django-cors-headers
  

  修改 django_react_proj/settings.py：

  INSTALLED_APPS = [
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
      'corsheaders',  # 新增跨域应用
      'api',          # 新增业务应用
  ]
  
  MIDDLEWARE = [
      'django.middleware.security.SecurityMiddleware',
      'django.contrib.sessions.middleware.SessionMiddleware',
      'corsheaders.middleware.CorsMiddleware',  # 新增跨域中间件（需在CommonMiddleware之前）
      'django.middleware.common.CommonMiddleware',
      'django.middleware.csrf.CsrfViewMiddleware',
      'django.contrib.auth.middleware.AuthenticationMiddleware',
      'django.contrib.messages.middleware.MessageMiddleware',
      'django.middleware.clickjacking.XFrameOptionsMiddleware',
  ]
  
  # 开发环境允许所有跨域请求，生产环境请指定具体域名
  CORS_ALLOW_ALL_ORIGINS = True
  

• 创建 API 视图（api/views.py）：

  from django.http import JsonResponse
  
  def hello_api(request):
      return JsonResponse({"message": "Hello from Django Backend!"})
  

• 配置 API 路由（django_react_proj/urls.py）：

  from django.contrib import admin
  from django.urls import path
  from api.views import hello_api
  
  urlpatterns = [
      path('admin/', admin.site.urls),
      path('api/hello/', hello_api),
  ]
  

• 启动 Django 服务：

  python manage.py runserver
  

2. 配置 React 前端 #

• 初始化 React 项目：

  npx create-react-app react_frontend
  cd react_frontend
  

• 在 React 组件中请求 Django API（src/App.js）：

  import { useEffect, useState } from 'react';
  
  function App() {
    const [backendMessage, setBackendMessage] = useState('');
  
    useEffect(() => {
      fetch('http://localhost:8000/api/hello/')
        .then(response => response.json())
        .then(data => setBackendMessage(data.message))
        .catch(error => console.error('请求失败:', error));
    }, []);
  
    return (
      <div className="App">
        <h1>{backendMessage}</h1>
      </div>
    );
  }
  
  export default App;
  

• 启动 React 开发服务：

  npm start
  

访问 http://localhost:3000 即可看到 Django 返回的消息。

二、不安装 Node.js 的连接方式 #

直接通过 CDN 引入 React 相关资源，将 React 代码嵌入 Django 模板中，无需 Node.js 打包工具。

1. 配置 Django 模板与路由 #

• 修改 django_react_proj/settings.py 中的模板路径：

  TEMPLATES = [
      {
          'BACKEND': 'django.template.backends.django.DjangoTemplates',
          'DIRS': [BASE_DIR / 'templates'],  # 添加自定义模板目录
          'APP_DIRS': True,
          'OPTIONS': {
              'context_processors': [
                  'django.template.context_processors.debug',
                  'django.template.context_processors.request',
                  'django.contrib.auth.context_processors.auth',
                  'django.contrib.messages.context_processors.messages',
              ],
          },
      },
  ]
  

• 在项目根目录创建 templates 文件夹，并新建 index.html：

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
      <meta charset="UTF-8">
      <title>React + Django (No Node.js)</title>
      <!-- 引入 React、ReactDOM 及 Babel CDN -->
      <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
      <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
      <div id="root"></div>
  
      <!-- React 组件代码 -->
      <script type="text/babel">
          const App = () => {
              const [message, setMessage] = React.useState('加载中...');
  
              React.useEffect(() => {
                  fetch('/api/hello/')
                      .then(res => res.json())
                      .then(data => setMessage(data.message))
                      .catch(err => setMessage('请求失败'));
              }, []);
  
              return <h1>{message}</h1>;
          };
  
          // 渲染 React 应用到页面
          ReactDOM.createRoot(document.getElementById('root')).render(<App />);
      </script>
  </body>
  </html>
  

• 添加模板渲染视图（api/views.py）：

  from django.shortcuts import render
  
  def react_template_view(request):
      return render(request, 'index.html')
  

• 更新路由（django_react_proj/urls.py）：

  from django.contrib import admin
  from django.urls import path
  from api.views import hello_api, react_template_view
  
  urlpatterns = [
      path('admin/', admin.site.urls),
      path('api/hello/', hello_api),
      path('', react_template_view),  # 根路径指向 React 模板
  ]
  

• 启动 Django 服务：

  python manage.py runserver
  

访问 http://localhost:8000 即可看到 React 页面加载并展示 Django API 返回的内容。

内容的提问来源于stack exchange，提问作者A.t parmar