將 React 新增至 Django 專案可以提升您的開發(fā)體驗(yàn)，讓您透過 React 的動(dòng)態(tài)用戶端功能來利用 Django 的伺服器端渲染和安全性的強(qiáng)大功能。透過reactify-django CLI，這個(gè)整合變得簡單，讓您可以利用 Django 強(qiáng)大的後端，同時(shí)使用 React 建立高度互動(dòng)的 UI。此外，您還可以靈活地配置 TypeScript 以實(shí)現(xiàn)靜態(tài)類型，並配置 Tailwind CSS 以實(shí)現(xiàn)實(shí)用程式優(yōu)先的樣式，從而從一開始就實(shí)現(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)勢。
這就是為什麼這種方法是有利的：

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

使用reactify-django在Django中設(shè)定React意味著更快的專案初始化和更少的樣板程式碼，讓您能夠立即開始建置功能。

1. 開始使用：

安裝reactify-django
要使用reactify-django，您需要在電腦上安裝Node.js。一旦你有了 Node，你就可以直接用 npx 來執(zhí)行reactify-django：
npx Reactify-django

指令概述
CLI 有兩個(gè)主要指令：

• init 設(shè)定一個(gè)包含 React 的新 Django 專案。
• add 將 React 新增至現(xiàn)有的 Django 專案。

2. 使用 React 設(shè)定新的 Django 項(xiàng)目

要從頭開始，請使用 init 指令建立一個(gè)配置了 React 的新 Django 專案。

1。運(yùn)行指令：

npx Reactify-django 初始化

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

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

3. 文件產(chǎn)生和配置：

CLI 將設(shè)定 Django 專案文件，配置 Webpack 以進(jìn)行 React 捆綁，並為 TypeScript 和/或 Tailwind 新增必要的依賴項(xiàng)（如果選擇）。它會(huì)自動(dòng)產(chǎn)生一個(gè) templates/your_app_name/index.html 檔案作為 React 的起點(diǎn)，並使用views.index 對應(yīng)到根 URL。

用法範(fàn)例：

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

如果您沒有在所需的專案資料夾中執(zhí)行它，則 -c（或 --cwd）標(biāo)誌可讓您指定目標(biāo)目錄。

URL 設(shè)定注意事項(xiàng)：
預(yù)設(shè)情況下，reactify-django 中的 init 命令將您的 Django 應(yīng)用程式對應(yīng)到根 URL ("")。此配置與 Django 的典型建議略有不同，後者建議使用特定於應(yīng)用程式的 URL 前綴，例如：

但是，為了簡單起見，產(chǎn)生的設(shè)定直接在根層級包含應(yīng)用程式的 URL：

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

3. 將 React 整合到現(xiàn)有 Django 專案中

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

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

cd 路徑/to/your-django-app

2。運(yùn)行指令：

npx Reactify-django 添加

3。選擇其他選項(xiàng)：

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

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



<p><strong>用法範(fàn)例：</strong></p>

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

<h2>
  
  
  4. 運(yùn)行和建置項(xiàng)目
</h2>

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

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

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

<p>npm 開始</p>

<p>這將啟動(dòng) Webpack 開發(fā)伺服器，它將在每次儲(chǔ)存時(shí)捆綁您的 React 程式碼並將其輸出到 Django 靜態(tài)資料夾。 </p>
<p><strong>2。運(yùn)行 Django 開發(fā)伺服器：</strong><br>
在單獨(dú)的終端機(jī)會(huì)話中，使用下列命令啟動(dòng) Django 伺服器：</p>

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

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

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

<p>準(zhǔn)備好部署後，進(jìn)入 Django 應(yīng)用程式目錄並執(zhí)行：</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>執(zhí)行reactify-django後，設(shè)定檔（例如webpack.config.js和Django設(shè)定）可用於微調(diào)。這種靈活性使您可以調(diào)整設(shè)定以更好地滿足您的專案要求。 </p>

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

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

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


          </div>

            
        

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