將 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 前綴，例如：
但是，為了簡單起見，產生的設定直接在根層級包含應用程式的 URL：
這種方法為單頁應用程式提供了一個乾淨的、基礎層級的入口點。如果您喜歡遵循 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中文網其他相關文章！
