REACT×FLASKセットアップ

FLASK とは何ですか?
FLASK は、Python 用の軽量 Web フレームワークで、最小限の定型コードで Web アプリを迅速に構築できます。さあ、ステップを踏みましょう～。

段階的に始めましょう
必要なセットアップを作成することから始めましょう。 Vite に移動し、次のコマンドをコピーします:

npm create vite@latest

私は MAC のみを使用しているため、WINDOWS のセットアップは少し異なる可能性があります。次に、ターミナルを開いて、Vite Web サイトからコピーしたコードを貼り付けます。コードを実行すると、次のプロンプトが表示されます:

? Project name: › vite-project

vite-project を独自のプロジェクト名に置き換えます。名前を付けた後、フレームワークを選択するよう求められます。私の場合はフレームワークとして REACT を選択しますが、使い慣れたフレームワークを選択して Enter キーを押すこともできます。

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

フレームワークを選択したら、選択したバリアント (言語) を選択できます。私は JavaScript に精通しているので、それを選択します。覚えておいてください: あなたがより多くを支配するバリアントを選択し、Enter タブを押す必要があります。

? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
❯   JavaScript
    JavaScript + SWC
    Remix ↗

これらのプロンプトを選択すると、それらを実行するために次のコマンドが提供されます:

Scaffolding project in /Users/Marlon/Development/code/practice-phase-4/flask_app_dev/my-app...

Done. Now run:

  cd my-app
  npm install
  npm run dev

上記のコードが正常に実行された場合は、ローカル ホストに到達します。

  VITE v5.4.8  ready in 1455 ms

  ➜  Local:   http://127.0.0.1:5555/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

http アドレスをコピーしてブラウザに貼り付けると、Vite React ページが表示され、プロジェクトで使用できるようになります。

ここでコード エディターを開きます。私はコード エディターとして Visual Studio Code を使用しています。もう一度、お気に入りのエディタを使用できます。次に、VSCode の統合ターミナル内で、これらのコマンドを個別に実行してローカル ホスト アドレスを取得し、アプリを編集してビルドを開始する必要があります。

npm install
npm run dev

src 内に cd してみましょう。次のファイルが表示されます

src % tree
.
├── App.css
├── App.jsx
├── assets
│   └── react.svg
├── index.css
└── main.jsx

「App.jsx」内では、そのファイル内のコードを編集および/または削除し、それに応じて独自のコードを追加できます。これらのファイルには、Vite と React のロゴが含まれています。

作成したファイルに慣れたら、フロントエンド ディレクトリとバックエンド ディレクトリをセットアップできます。次のコードを実行して作成しましょう:

mkdir backend; mkdir server; mkdir frontend

プロジェクトのセットアップを次のようにしましょう:

my-app/
├── backend/
|       server/
│       ├── app.py
│       ├── models.py
│       ├── requirements.txt
├── frontend/
│   ├── src/
│   ├── public/
│   ├── package.json

2 つのターミナルを開きます:
1 つのターミナルはバックエンド/サーバー用であり、もう 1 つはフロントエンド/ソース用です。
バックエンド/サーバー内で次のコマンドを実行します:

pipenv install && pipenv shell

すべての依存関係がインストールされていることを確認し、Pipfile を作成します。

フロントエンド/ソース内で次のコマンドを実行します:

npm install
npm run dev

package.json ファイルなどの必要なファイルがすべて作成されていることを確認します。

パート 2 が登場します....

以上がREACT×FLASKセットアップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。