Reactify-django CLI を使用して React を Django にシームレスに統合する

Django プロジェクトに React を追加すると、開発エクスペリエンスが向上し、Django のサーバー側レンダリングとセキュリティのパワーを React の動的クライアント側機能で利用できるようになります。 Reactify-django CLI を使用すると、この統合が簡単になり、React で高度にインタラクティブな UI を構築しながら、Django の堅牢なバックエンドを活用できるようになります。さらに、TypeScript を静的型付け用に、Tailwind CSS をユーティリティファーストのスタイル用に構成できる柔軟性があり、最初から合理化された最新の開発セットアップが可能になります。

このガイドでは、Django と React を組み合わせることがなぜ有益なのかを探り、次に、reactify-django を使用して新規および既存の Django プロジェクトの両方で React をセットアップする手順を順を追って説明します。

モノリシックな Django-React セットアップを選択する理由

モノリシックな Django-React アーキテクチャは、両方の長所を提供します。
このアプローチが有利な理由は次のとおりです:

• サーバーサイド レンダリング (SSR): Django のテンプレート エンジンと強力なバックエンド機能により、すぐに使えるサーバーサイド レンダリングが提供され、SEO とページの初期読み込み速度が向上します。
• 強化されたルーティングとセキュリティ: Django の組み込みルーティングと堅牢なセキュリティ機能 (CSRF 保護やセッション処理など) により、バックエンド管理が簡素化され、複雑なルーティングの処理がより安全かつ簡単になります。
• 統合デプロイメント: React と Django を 1 つ屋根の下に配置すると、単一のアプリケーションとしてデプロイできるため、別々のフロントエンド サービスとバックエンド サービスを管理する複雑さが軽減されます。また、Django と React は同じオリジンを共有しているため、CORS ヘッダーと構成も必要なくなります。

reactify-django を使用して Django 内で React をセットアップすると、プロジェクトの初期化が速くなり、ボイラープレート コードが減り、すぐに機能の構築を開始できるようになります。

1. はじめに:

reactify-django をインストールします
Reactify-django を使用するには、マシンに Node.js がインストールされている必要があります。 Nodeを取得したら、npx:
を使用してreactify-djangoを直接実行できます。 npx reverseify-django

コマンドの概要
CLI には 2 つの主要なコマンドがあります:

• init React を含む新しい Django プロジェクトをセットアップします。
• add React を既存の Django プロジェクトに追加します。

2. React を使用して新しい Django プロジェクトをセットアップする

最初から始めるには、init コマンドを使用して、React で構成された新しい Django プロジェクトを作成します。

1.コマンドを実行します:

npx reverseify-django init

2.セットアップのプロンプトに答えます:
以下の情報を提供するよう求められます:

• プロジェクト名: Django プロジェクトの名前。
• アプリ名: React が統合される Django アプリの名前。
• オプションの設定: 追加のツールやスタイル設定機能のために、プロジェクトで TypeScript や Tailwind CSS を使用するかどうかを選択します。

3. ファイルの生成と構成:

CLI は Django プロジェクト ファイルをセットアップし、React バンドル用に Webpack を構成し、選択されている場合は TypeScript や Tailwind に必要な依存関係を追加します。 React の開始点として templates/your_app_name/index.html ファイルが自動的に生成され、views.index.

でルート URL にマッピングされます。

使用例:

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

目的のプロジェクト フォルダーで実行していない場合は、-c (または --cwd) フラグを使用してターゲット ディレクトリを指定できます。

URL 設定に関する注意:
デフォルトでは、reactify-django の init コマンドは Django アプリをルート URL ("") にマップします。この構成は、次のような URL にアプリ固有のプレフィックスを使用することを推奨する Django の一般的な推奨事項とは少し異なります。

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. App ディレクトリに移動します:

cd パス/to/your-django-app

2.コマンドを実行します:

npx reverseify-django add

3.追加のオプションを選択します:

TypeScript と Tailwind の構成を求めるプロンプトが表示され、ニーズに合わせて React セットアップを調整できます。

このコマンドは、アプリのディレクトリに webpack.config.js を生成し、JavaScript バンドルを static/your_app_name/js/ にbundle.js として配置します。 React をテンプレートに含めるには、次のようにこのバンドルをロードできます:

{% 静的負荷 %}

<p>使用例:<strong></strong>

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

</p>
  
  
  4. プロジェクトの実行と構築
<h2>

</h2>セットアップが完了したら、すぐに開発を開始できます:<p>

</p>

• 開発モード

1. Webpack 開発サーバーを起動します: Django アプリ ディレクトリ (package.json がある場所) で、次を実行します:

npm 開始

これにより、Webpack 開発サーバーが起動し、保存するたびに React コードがバンドルされ、Django 静的フォルダーに出力されます。

2. Django 開発サーバーを実行します:
別のターミナル セッションで、次のように Django サーバーを起動します。

python manage.py runserver

Django 開発サーバーから React アプリにアクセスできるようになり、サーバー側とクライアント側の同時開発が可能になります。

• 本番ビルド

デプロイの準備ができたら、Django アプリ ディレクトリに移動し、次のコマンドを実行します。

npm run build

これにより、実稼働用の React アプリがバンドルされ、Django が提供できるように最適化された JavaScript が static/ ディレクトリに配置されます。

5. セットアップのカスタマイズ

reactify-django を実行すると、設定ファイル (webpack.config.js や Django 設定など) を微調整できるようになります。この柔軟性により、プロジェクトの要件に合わせて設定を調整できます。

結論

reactify-django CLI は、新規に開始する場合でも、既存のアプリに React を追加する場合でも、React を Django プロジェクトに追加するプロセスを簡素化します。 Django のバックエンドの強みと React のフロントエンドの柔軟性を融合することで、堅牢で機能が豊富なモノリシック アプリケーションを作成できます。
これを試してみるには、npx reactify-django を使用して CLI をインストールし、開発プロセスを合理化する方法を検討してください。 Django と React の両方の長所を利用してコーディングをお楽しみください!

このツールがあなたのプロジェクトに役立つことを願っています。このプロジェクトは GitHub で見つけることができます。問題があればお気軽に投稿または報告してください!

以上がReactify-django CLI を使用して React を Django にシームレスに統合するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。