DEV Community
·
在Django应用中使用React作为静态文件：逐步指南
💡
原文英文，约1000词，阅读约需4分钟。
📝
内容提要
本文介绍了如何使用Django作为后端和React作为前端创建基本Web应用。首先设置Django项目，创建虚拟环境并安装Django；然后创建React应用并配置静态文件；最后定制欢迎页面并运行应用。
🎯
关键要点
- 使用Django作为后端和React作为前端创建基本Web应用的步骤
- 设置Django项目，包括创建虚拟环境和安装Django
- 创建React应用并配置静态文件
- 定制欢迎页面并运行应用
- 在Windows 11 Pro环境下进行操作
- 使用PowerShell/CLI和Python 3.11.5
- 创建项目目录并激活虚拟环境
- 安装Django并创建项目和应用
- 更新Django的settings.py以添加新应用
- 使用Vite创建React应用并选择框架和语言
- 更新Django的settings.py以服务React的静态文件
- 创建Django视图以渲染index.html模板
- 设置React的vite.config.js以确保输出到Django的静态文件夹
- 自定义欢迎页面并构建React应用
- 运行Django服务器并在浏览器中查看应用
❓
延伸问答
如何在Django中设置虚拟环境？
使用命令 `python -m venv venv` 创建虚拟环境，然后使用 `venv\Scripts\activate` 激活它。
如何创建React应用并配置静态文件？
使用命令 `npm create vite@latest frontend` 创建React应用，并在Django的settings.py中配置静态文件路径。
如何在Django中渲染React的index.html模板？
在Django的views.py中创建一个视图类，使用 `TemplateView` 渲染 `index.html` 模板。
在Windows 11上使用Django和React的环境要求是什么？
需要Windows 11 Pro、PowerShell/CLI和Python 3.11.5，以及nvm-windows来安装Node。
如何自定义React的欢迎页面？
删除src目录中的多余文件，只保留App.jsx、App.css和main.jsx，并在App.jsx中编写欢迎页面内容。
如何运行Django服务器查看应用？
在项目目录下使用命令 `python manage.py runserver` 启动Django服务器，然后在浏览器中访问 http://localhost:8000/。
➡️
