Python と React を使用した SPA サンプルの構築

インターネット技術の継続的な発展に伴い、ますます多くの Web サイトが SPA (シングル ページ アプリケーション) アーキテクチャを採用し始めています。 SPA とは、従来の複数ページ方式を使用するのではなく、コンテンツのすべてまたはほとんどを 1 ページで表示し、クライアントを通じてページ コンテンツを動的に更新することを指します。この記事では、Python と React を使用して簡単な SPA サンプルを構築し、SPA の基本的な考え方と実装方法を示します。

1. 環境セットアップ

ビルドを開始する前に、開発環境をセットアップする必要があります。まず、サーバーサイドで JavaScript を実行するためのツールである Node.js と、Node.js のパッケージ マネージャーである npm をインストールする必要があります。次に、Python とそれに関連する必要なライブラリをインストールする必要があります。

管理と展開を容易にするために、プロジェクトを構築するバックエンド フレームワークとして Django を使用します。次のコマンドを使用して Django をインストールできます:

pip install Django

同時に、django-cors-headers、djangorestframework、django- などの他の Python ライブラリをインストールする必要があります。 webpack-loader 。これらのライブラリは、バックエンド フレームワークをより完全なものにし、フロントエンド構築のサポートを強化します。

pip install django-cors-headers djangorestframework django-webpack-loader

2. フロント エンドの構築

フロント エンドを構築する前に、いくつかのディレクトリ構造を定義する必要があります。 。フロントエンドコードを保存するために、プロジェクトのルートディレクトリにfrontendというフォルダーを作成します。フロントエンド フォルダーの下に、React コードを保存するための src という名前のフォルダーと、HTML テンプレート、画像、その他のリソース ファイルを保存するための public という名前のフォルダーを作成します。

次に、npx コマンドを使用して、frontend という名前の React アプリケーションを作成します。

npx create-react-appfrontend

次に、npm Install を使用する必要があります。いくつかの必要なライブラリ (react-router-dom、axios、bootstrap、react-bootstrap、prop-types など)。

npm install reverse-router-dom axios bootstrap reverse-bootstrap prop-types

インストールが完了したら、React コードの記述を開始できます。ルーティングに基づいて React コンポーネントを動的にロードし、コンポーネント内で axios を使用してバックエンドとデータを交換します。

3. バックエンドの構築

バックエンドを構築する前に、いくつかのディレクトリ構造を定義する必要があります。バックエンド コードを保存するために、プロジェクトのルート ディレクトリに backend という名前のフォルダーを作成します。バックエンド フォルダーの下に、HTML テンプレート ファイルを保存するための templates というフォルダーを作成します。

まず、mysite という名前の Django プロジェクトを作成する必要があります:

django-admin.py startproject mysite backend

次に、mysite/ に Django プロジェクトを作成する必要があります。 mysite/settings.py ファイルに必要な設定を追加します。具体的には、STATIC_URL、STATICFILES_DIRS、TEMPLATE_DIRS、CORS_ORIGIN_ALLOW_ALL、REST_FRAMEWORK、WEBPACK_LOADER を定義する必要があります。

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "frontend/build/static")]
TEMPLATE_DIRS = [os.path.join(BASE_DIR, "frontend/public")]
CORS_ORIGIN_ALLOW_ALL = True
REST_FRAMEWORK = {'DEFAULT_RENDERER_CLASSES': ('rest_framework.renderers.JSONRenderer', )}
WEBPACK_LOADER = {'DEFAULT': {'BUNDLE_DIR_NAME': ' dist/', 'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json')}}

これらの設定を行った後、バックエンド コードの記述を開始できます。消えた。 HTTP リクエストを処理するために、views.py というファイルを定義します。

ビュー関数では、React コンポーネント名をルート パラメーターとして使用して、React テンプレートを動的にロードし、フロントエンドに送信します。

4. パッケージ化ツールの構築

実際のデプロイメントでは、webpack を使用して React コンポーネントと関連リソースをファイルにパッケージ化する必要があります。管理を容易にするために、Webpack 構成ファイルに React コンポーネントの名前を埋め込むことができます。これにより、コンポーネント名に基づいて対応するパッケージング ファイルが生成されます。

これらの準備を実行した後、フロントエンド コードとバックエンド コードを統合できます。 Django の静的ファイル サービスを使用して、React パッケージ ファイルと HTML テンプレートを同じ Web ページ上で一緒に公開し、SPA サンプルの構築を完了できます。

5. 概要

この記事では、Python と React を使用して SPA サンプルを構築し、SPA の基本的な考え方と実装方法を示します。この例から、SPA アーキテクチャによりサイト全体が高速化、効率化され、保守が容易になることがわかります。初心者の方への参考になれば幸いです 問題やご質問がございましたら、お気軽にお問い合わせください。

以上がPython と React を使用した SPA サンプルの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。