DEV Community
·
在Django应用中使用React作为静态文件：逐步指南
内容提要
本文介绍了如何使用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和React构建Web应用时，确保开发环境的正确设置至关重要。本文提到使用Windows 11 Pro和Python 3.11.5，读者应确保自己的环境与之兼容，以避免在安装和运行过程中遇到不必要的错误。
静态文件配置的关键
将React应用的静态文件正确配置到Django中是实现前后端整合的关键步骤。文章中详细说明了如何在Django的settings.py中设置静态文件路径，确保React生成的文件能够被Django正确识别和服务。
自定义欢迎页面的灵活性
在创建基本的欢迎页面时，读者可以根据自己的需求进行灵活定制。文章提供了简单的“Hello World”示例，鼓励开发者在此基础上进行扩展，展示个性化的内容和功能。
延伸问答
如何在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/。
