使用reactify-django CLI将React无缝集成到Django中

将 React 添加到 Django 项目可以提升您的开发体验，让您通过 React 的动态客户端功能来利用 Django 的服务器端渲染和安全性的强大功能。借助reactify-django CLI，这种集成变得简单，允许您利用 Django 强大的后端，同时使用 React 构建高度交互的 UI。此外，您还可以灵活地配置 TypeScript 以实现静态类型，并配置 Tailwind CSS 以实现实用程序优先的样式，从而从一开始就实现简化、现代化的开发设置。

在本指南中，我们将探讨为什么结合 Django 和 React 是有益的，然后逐步使用reactify-django 在新的和现有的 Django 项目中设置 React。

为什么选择单体 Django-React 设置？

单体 Django-React 架构为您提供两全其美的优势。
这就是为什么这种方法是有利的：

• 服务器端渲染 (SSR)：Django 的模板引擎和强大的后端功能提供开箱即用的服务器端渲染，提高 SEO 和初始页面加载速度。
• 增强的路由和安全性：Django 的内置路由和强大的安全功能（如 CSRF 保护和会话处理）简化了后端管理，使其更安全、更轻松地处理复杂的路由。
• 统一部署：通过将 React 和 Django 放在同一个屋檐下，您可以将其部署为单个应用程序，从而降低管理单独的前端和后端服务的复杂性。它还消除了对 CORS 标头和配置的需要，因为 Django 和 React 具有相同的起源。

使用reactify-django在Django中设置React意味着更快的项目初始化和更少的样板代码，使您能够立即开始构建功能。

1. 开始使用：

安装reactify-django
要使用reactify-django，您需要在计算机上安装Node.js。一旦你有了 Node，你就可以直接使用 npx 运行reactify-django：
npx Reactify-django

命令概述
CLI 有两个主要命令：

• init 设置一个包含 React 的新 Django 项目。
• add 将 React 添加到现有的 Django 项目。

2. 使用 React 设置新的 Django 项目

要从头开始，请使用 init 命令创建一个配置了 React 的新 Django 项目。

1。运行命令：

npx Reactify-django 初始化

2。回答设置提示：
您将被要求提供：

• 项目名称： Django 项目的名称。
• 应用程序名称： 将集成 React 的 Django 应用程序的名称。
• 可选设置： 选择是否在项目中使用 TypeScript 和/或 Tailwind CSS 以获得额外的工具和样式功能。

3. 文件生成和配置：

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 应用程序，则可以对其进行修改以包含应用程序名称前缀。

3. 将 React 集成到现有 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中文网其他相关文章！