將 React 添加到 Django 項目可以提升您的開發(fā)體驗，讓您通過 React 的動態(tài)客戶端功能來利用 Django 的服務(wù)器端渲染和安全性的強(qiáng)大功能。借助reactify-django CLI，這種集成變得簡單，允許您利用 Django 強(qiáng)大的后端，同時使用 React 構(gòu)建高度交互的 UI。此外，您還可以靈活地配置 TypeScript 以實現(xiàn)靜態(tài)類型，并配置 Tailwind CSS 以實現(xiàn)實用程序優(yōu)先的樣式，從而從一開始就實現(xiàn)簡化、現(xiàn)代化的開發(fā)設(shè)置。

在本指南中，我們將探討為什么結(jié)合 Django 和 React 是有益的，然后逐步使用reactify-django 在新的和現(xiàn)有的 Django 項目中設(shè)置 React。

為什么選擇單體 Django-React 設(shè)置？

單體 Django-React 架構(gòu)為您提供兩全其美的優(yōu)勢。
這就是為什么這種方法是有利的：

• 服務(wù)器端渲染 (SSR)：Django 的模板引擎和強(qiáng)大的后端功能提供開箱即用的服務(wù)器端渲染，提高 SEO 和初始頁面加載速度。
• 增強(qiáng)的路由和安全性：Django 的內(nèi)置路由和強(qiáng)大的安全功能（如 CSRF 保護(hù)和會話處理）簡化了后端管理，使其更安全、更輕松地處理復(fù)雜的路由。
• 統(tǒng)一部署：通過將 React 和 Django 放在同一個屋檐下，您可以將其部署為單個應(yīng)用程序，從而降低管理單獨的前端和后端服務(wù)的復(fù)雜性。它還消除了對 CORS 標(biāo)頭和配置的需要，因為 Django 和 React 具有相同的起源。

使用reactify-django在Django中設(shè)置React意味著更快的項目初始化和更少的樣板代碼，使您能夠立即開始構(gòu)建功能。

1. 開始使用：

安裝reactify-django
要使用reactify-django，您需要在計算機(jī)上安裝Node.js。一旦你有了 Node，你就可以直接使用 npx 運行reactify-django：
npx Reactify-django

命令概述
CLI 有兩個主要命令：

• init 設(shè)置一個包含 React 的新 Django 項目。
• add 將 React 添加到現(xiàn)有的 Django 項目。

2. 使用 React 設(shè)置新的 Django 項目

要從頭開始，請使用 init 命令創(chuàng)建一個配置了 React 的新 Django 項目。

1。運行命令：

npx Reactify-django 初始化

2?；卮鹪O(shè)置提示：
您將被要求提供：

• 項目名稱： Django 項目的名稱。
• 應(yīng)用程序名稱： 將集成 React 的 Django 應(yīng)用程序的名稱。
• 可選設(shè)置： 選擇是否在項目中使用 TypeScript 和/或 Tailwind CSS 以獲得額外的工具和樣式功能。

3. 文件生成和配置：

CLI 將設(shè)置 Django 項目文件，配置 Webpack 以進(jìn)行 React 捆綁，并為 TypeScript 和/或 Tailwind 添加必要的依賴項（如果選擇）。它會自動生成一個 templates/your_app_name/index.html 文件作為 React 的起點，并使用views.index 映射到根 URL。

用法示例：

npx reactify-django init -c ./my-new-project

如果您沒有在所需的項目文件夾中運行它，則 -c（或 --cwd）標(biāo)志可讓您指定目標(biāo)目錄。

URL 配置注意事項：
默認(rèn)情況下，reactify-django 中的 init 命令將您的 Django 應(yīng)用程序映射到根 URL ("")。此配置與 Django 的典型建議略有不同，后者建議使用特定于應(yīng)用程序的 URL 前綴，例如：

from django.urls import include, path

urlpatterns = [
    path("your_app_name/", include("your_app_name.urls")),
    path("admin/", admin.site.urls),
]

但是，為了簡單起見，生成的設(shè)置直接在根級別包含應(yīng)用程序的 URL：

from django.urls import include, path

urlpatterns = [
    path("", include("your_app_name.urls")),
    path("admin/", admin.site.urls),
]

這種方法為單頁應(yīng)用程序提供了一個干凈的、基礎(chǔ)級別的入口點。如果您更喜歡遵循 ??Django 約定或者計劃擁有多個 Django 應(yīng)用程序，則可以對其進(jìn)行修改以包含應(yīng)用程序名稱前綴。

3. 將 React 集成到現(xiàn)有 Django 項目中

如果您已有 Django 項目，則可以使用 add 命令在現(xiàn)有 Django 應(yīng)用程序中設(shè)置 React。

1。導(dǎo)航到您的應(yīng)用程序目錄：

cd 路徑/to/your-django-app

2。運行命令：

npx Reactify-django 添加

3。選擇其他選項：

系統(tǒng)會提示您進(jìn)行 TypeScript 和 Tailwind 配置，以便您根據(jù)需要定制 React 設(shè)置。
此命令會在應(yīng)用程序的目錄中生成 webpack.config.js 并將 JavaScript 包作為 bundle.js 放置在 static/your_app_name/js/ 中。要將 React 包含在模板中，您可以按如下方式加載此包：

{%加載靜態(tài)%}
<div>



<p><strong>用法示例：</strong></p>

<p>npx Reactify-django add -c ./path/to/app</p>

<h2>
  
  
  4. 運行和構(gòu)建項目
</h2>

<p>設(shè)置完成后，您可以立即開始開發(fā)：</p>

<ul>
<li><strong>開發(fā)模式</strong></li>
</ul>

<p><strong>1。啟動 Webpack 開發(fā)服務(wù)器：</strong><br>
在 Django 應(yīng)用程序目錄（package.json 所在位置）中，運行：</p>

<p>npm 開始</p>

<p>這將啟動 Webpack 開發(fā)服務(wù)器，它將在每次保存時捆綁您的 React 代碼并將其輸出到 Django 靜態(tài)文件夾。</p>
<p><strong>2。運行 Django 開發(fā)服務(wù)器：</strong><br>
在單獨的終端會話中，使用以下命令啟動 Django 服務(wù)器：</p>

<p>python manage.py runserver</p>

<p>您現(xiàn)在可以從 Django 開發(fā)服務(wù)器訪問 React 應(yīng)用程序，從而允許同時進(jìn)行服務(wù)器端和客戶端開發(fā)。</p>

<ul>
<li><strong>生產(chǎn)版本</strong></li>
</ul>

<p>準(zhǔn)備好部署后，進(jìn)入 Django 應(yīng)用目錄并運行：</p>

<p>npm run build</p>

<p>這將捆綁 React 應(yīng)用程序進(jìn)行生產(chǎn)，將優(yōu)化的 JavaScript 放置在 static/ 目錄中以供 Django 提供服務(wù)。</p>

<h2>
  
  
  5. 自定義您的設(shè)置
</h2>

<p>運行reactify-django后，配置文件（例如webpack.config.js和Django設(shè)置）可用于微調(diào)。這種靈活性使您可以調(diào)整設(shè)置以更好地滿足您的項目要求。</p>

<h2>
  
  
  結(jié)論
</h2>

<p>reactify-django CLI 簡化了將 React 添加到 Django 項目的過程，無論是全新啟動還是將 React 添加到現(xiàn)有應(yīng)用程序。通過將 Django 的后端優(yōu)勢與 React 的前端靈活性相結(jié)合，您可以創(chuàng)建一個健壯、功能豐富的單體應(yīng)用程序。<br>
要嘗試一下，請使用 npx reactify-django 安裝 CLI 并探索它如何簡化您的開發(fā)過程。享受利用 Django 和 React 的優(yōu)點進(jìn)行編碼的樂趣！</p>

<p><em>我希望您發(fā)現(xiàn)這個工具對您的項目有所幫助。您可以在 GitHub 上找到該項目。歡迎貢獻(xiàn)或報告任何問題！</em></p>


          </div>

            
        

以上是使用reactify-django CLI將React無縫集成到Django中的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！