将 React 添加到 Django 项目可以提升您的开发体验，让您通过 React 的动态客户端功能来利用 Django 的服务器端渲染和安全性的强大功能。借助reactify-django CLI，这种集成变得简单，允许您利用 Django 强大的后端，同时使用 React 构建高度交互的 UI。此外，您还可以灵活地配置 TypeScript 以实现静态类型，并配置 Tailwind CSS 以实现实用程序优先的样式，从而从一开始就实现简化、现代化的开发设置。
在本指南中，我们将探讨为什么结合 Django 和 React 是有益的，然后逐步使用reactify-django 在新的和现有的 Django 项目中设置 React。
单体 Django-React 架构为您提供两全其美的优势。
这就是为什么这种方法是有利的：
使用reactify-django在Django中设置React意味着更快的项目初始化和更少的样板代码，使您能够立即开始构建功能。
安装reactify-django
要使用reactify-django，您需要在计算机上安装Node.js。一旦你有了 Node，你就可以直接使用 npx 运行reactify-django：
npx Reactify-django
命令概述
CLI 有两个主要命令：
要从头开始，请使用 init 命令创建一个配置了 React 的新 Django 项目。
1。运行命令：
npx Reactify-django 初始化
2。回答设置提示：
您将被要求提供：
CLI 将设置 Django 项目文件，配置 Webpack 以进行 React 捆绑，并为 TypeScript 和/或 Tailwind 添加必要的依赖项（如果选择）。它会自动生成一个 templates/your_app_name/index.html 文件作为 React 的起点，并使用views.index 映射到根 URL。
用法示例：
npx reactify-django init -c ./my-new-project
如果您没有在所需的项目文件夹中运行它，则 -c（或 --cwd）标志可让您指定目标目录。
URL 配置注意事项：
默认情况下，reactify-django 中的 init 命令将您的 Django 应用程序映射到根 URL ("")。此配置与 Django 的典型建议略有不同，后者建议使用特定于应用程序的 URL 前缀，例如：
from django.urls import include, path
urlpatterns = [
path("your_app_name/", include("your_app_name.urls")),
path("admin/", admin.site.urls),
]
但是，为了简单起见，生成的设置直接在根级别包含应用程序的 URL：
from django.urls import include, path
urlpatterns = [
path("", include("your_app_name.urls")),
path("admin/", admin.site.urls),
]
这种方法为单页应用程序提供了一个干净的、基础级别的入口点。如果您更喜欢遵循 Django 约定或者计划拥有多个 Django 应用程序，则可以对其进行修改以包含应用程序名称前缀。
如果您已有 Django 项目，则可以使用 add 命令在现有 Django 应用程序中设置 React。
1。导航到您的应用程序目录：
cd 路径/to/your-django-app
2。运行命令：
npx Reactify-django 添加
3。选择其他选项：
系统会提示您进行 TypeScript 和 Tailwind 配置，以便您根据需要定制 React 设置。
此命令会在应用程序的目录中生成 webpack.config.js 并将 JavaScript 包作为 bundle.js 放置在 static/your_app_name/js/ 中。要将 React 包含在模板中，您可以按如下方式加载此包：
{%加载静态%}
<div>
<p><strong>用法示例：</strong></p>
<p>npx Reactify-django add -c ./path/to/app</p>
<h2>
4. 运行和构建项目
</h2>
<p>设置完成后，您可以立即开始开发：</p>
<ul>
<li><strong>开发模式</strong></li>
</ul>
<p><strong>1。启动 Webpack 开发服务器：</strong><br>
在 Django 应用程序目录（package.json 所在位置）中，运行：</p>
<p>npm 开始</p>
<p>这将启动 Webpack 开发服务器，它将在每次保存时捆绑您的 React 代码并将其输出到 Django 静态文件夹。</p>
<p><strong>2。运行 Django 开发服务器：</strong><br>
在单独的终端会话中，使用以下命令启动 Django 服务器：</p>
<p>python manage.py runserver</p>
<p>您现在可以从 Django 开发服务器访问 React 应用程序，从而允许同时进行服务器端和客户端开发。</p>
<ul>
<li><strong>生产版本</strong></li>
</ul>
<p>准备好部署后，进入 Django 应用目录并运行：</p>
<p>npm run build</p>
<p>这将捆绑 React 应用程序进行生产，将优化的 JavaScript 放置在 static/ 目录中以供 Django 提供服务。</p>
<h2>
5. 自定义您的设置
</h2>
<p>运行reactify-django后，配置文件（例如webpack.config.js和Django设置）可用于微调。这种灵活性使您可以调整设置以更好地满足您的项目要求。</p>
<h2>
结论
</h2>
<p>reactify-django CLI 简化了将 React 添加到 Django 项目的过程，无论是全新启动还是将 React 添加到现有应用程序。通过将 Django 的后端优势与 React 的前端灵活性相结合，您可以创建一个健壮、功能丰富的单体应用程序。<br>
要尝试一下，请使用 npx reactify-django 安装 CLI 并探索它如何简化您的开发过程。享受利用 Django 和 React 的优点进行编码的乐趣！</p>
<p><em>我希望您发现这个工具对您的项目有所帮助。您可以在 GitHub 上找到该项目。欢迎贡献或报告任何问题！</em></p>
</div>
以上是使用reactify-django CLI将React无缝集成到Django中的详细内容。更多信息请关注PHP中文网其他相关文章！
