使用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 前綴，例如：

但是，為了簡單起見，產生的設定直接在根層級包含應用程式的 URL：

這種方法為單頁應用程式提供了一個乾淨的、基礎層級的入口點。如果您喜歡遵循 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中文網其他相關文章！