REACT x FLASK 設置

什麼是燒瓶？
FLASK 是 Python 的輕量級 Web 框架，可讓您使用最少的樣板程式碼快速建立 Web 應用程式。我們走一步-。

讓我們逐步開始
讓我們從創建必要的設定開始。前往 Vite 並複製此指令：

npm create vite@latest

我只使用MAC，所以WINDOWS的設定可能有點不同。接下來，打開終端機並貼上從 Vite 網站複製的程式碼。運行程式碼後，您將收到以下提示：

? 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

讓我們cd到src中，你會看到以下檔案

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

開啟兩個終端：
一個終端用於後端/伺服器，另一個終端用於前端/src。
在後端/伺服器內執行以下命令：

pipenv install && pipenv shell

確保安裝所有依賴項並建立我們的 Pipfile。

在 frontend/src 內執行以下指令：

npm install
npm run dev

確保建立所有必要的文件，例如我們的 package.json 文件。

第二部即將到來......

以上是REACT x FLASK 設置的詳細內容。更多資訊請關注PHP中文網其他相關文章！