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中文网其他相关文章！