使用启动模板构建 React 应用

React 是最广泛使用的 JavaScript 前端库。

在本教程中，我们将使用 Deno 构建一个简单的 React 应用。该应用将显示恐龙列表。当您单击其中一个时，它将带您进入包含更多详细信息的恐龙页面。您可以在 GitHub 上查看完成的应用仓库

demo of the app

本教程将使用 Vite 在本地提供应用。Vite 是一个用于现代 Web 项目的构建工具和开发服务器。它与 React 和 Deno 配合良好，利用 ES 模块并允许您直接导入 React 组件。

启动器应用跳转到标题

我们为您设置了一个启动器模板供您使用。这将为您设置一个基本的启动器应用，其中包含 React、Vite 和一个 deno.json 文件，用于配置您的项目。访问 GitHub 存储库 https://github.com/denoland/react-vite-ts-template 并单击“使用此模板”按钮以创建一个新的存储库。

创建新的模板存储库后，将其克隆到本地计算机并导航到项目目录。

在本地克隆存储库跳转到标题

git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name

安装依赖项跳转到标题

通过运行以下命令安装项目依赖项

deno install

运行开发服务器跳转到标题

现在，您可以通过运行以下命令来提供新的 react 应用

deno run dev

这将启动 Vite 服务器，单击输出链接到 localhost 以在浏览器中查看您的应用。

关于模板跳转到标题

您克隆的模板存储库带有一个基本的 React 应用。该应用使用 Vite 作为开发服务器，并提供一个使用 oak 构建的静态文件服务器，该服务器将在部署时提供构建的应用。React 应用位于 client 文件夹中，后端服务器位于 server 文件夹中。

deno.json 文件用于配置项目并指定运行应用所需的权限，它包含 tasks 字段，该字段定义可以使用 deno run 运行的任务。它具有一个 dev 任务，用于运行 Vite 服务器；一个 build 任务，用于使用 Vite 构建应用；以及一个 serve 任务，用于运行后端服务器以提供构建的应用。

添加后端 API 跳转到标题

我们将在模板提供的服务器中构建一个 API。这将是我们获取恐龙数据的地方。

在您的新项目的 server 目录中，创建一个 api 文件夹。在该文件夹中，创建一个 data.json，其中将包含硬编码的恐龙数据。

将此 json 文件复制并粘贴到 api/data.json 文件中。（如果您正在构建一个真正的应用，您可能会从数据库或外部 API 获取此数据。）

我们将构建一些 API 路由，将恐龙信息返回到模板附带的服务器中，我们将需要 cors 中间件来启用 CORS。

使用 deno install 命令将 cors 依赖项添加到您的项目

deno install jsr:@tajpouria/cors

接下来，更新 server/main.ts 以导入所需的模块并创建一个新的 Router 实例来定义一些路由

main.ts

import { Application } from "jsr:@oak/oak/application";
import { Router } from "jsr:@oak/oak/router";
import { oakCors } from "@tajpouria/cors";
import routeStaticFilesFrom from "./util/routeStaticFilesFrom.ts";
import data from "./api/data.json" with { type: "json" };

export const app = new Application();
const router = new Router();

之后，在同一文件中，我们将定义两个路由。一个在 /api/dinosaurs 处返回所有恐龙，另一个在 /api/dinosaurs/:dinosaur 处返回基于 URL 中名称的特定恐龙

main.ts

router.get("/api/dinosaurs", (context) => {
  context.response.body = data;
});

router.get("/api/dinosaurs/:dinosaur", (context) => {
  if (!context?.params?.dinosaur) {
    context.response.body = "No dinosaur name provided.";
  }

  const dinosaur = data.find((item) =>
    item.name.toLowerCase() === context.params.dinosaur.toLowerCase()
  );

  context.response.body = dinosaur ?? "No dinosaur found.";
});

在同一文件的底部，将我们刚刚定义的路由附加到应用程序。我们还必须包含模板中的静态文件服务器，最后我们将启动服务器监听 8000 端口

main.ts

app.use(oakCors());
app.use(router.routes());
app.use(router.allowedMethods());
app.use(routeStaticFilesFrom([
  `${Deno.cwd()}/client/dist`,
  `${Deno.cwd()}/client/public`,
]));

if (import.meta.main) {
  console.log("Server listening on port https://127.0.0.1:8000");
  await app.listen({ port: 8000 });
}

您可以使用 deno run --allow-env --allow-net server/main.ts 运行 API 服务器。我们将创建一个任务在后台运行此命令，并更新 dev 任务以同时运行 React 应用和 API 服务器。

在您的 package.json 文件中，更新 scripts 字段以包含以下内容

deno.json

{
  "tasks": {
+   "dev": "deno run -A --node-modules-dir=auto npm:vite & deno run server:start",
    "build": "deno run -A --node-modules-dir=auto npm:vite build",
    "server:start": "deno run -A --node-modules-dir --watch ./server/main.ts",
    "serve": "deno run build && deno run server:start"
}

如果您现在运行 deno run dev 并访问浏览器中的 localhost:8000/api/dinosaurs，您应该会看到所有恐龙的 JSON 响应。

更新入口点跳转到标题

React 应用的入口点位于 client/src/main.tsx 文件中。我们的入口点将非常基本

main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

添加路由器跳转到标题

该应用将具有两个路由：/ 和 /:dinosaur。

我们将使用 react-router-dom 来构建一些路由逻辑，因此我们需要将 react-router-dom 依赖项添加到您的项目中。在项目根目录中运行

deno install npm:react-router-dom

更新 /src/App.tsx 文件以导入和使用 BrowserRouter 组件从 react-router-dom 中导入，并定义两个路由

App.tsx

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Index from "./pages/index.tsx";
import Dinosaur from "./pages/Dinosaur.tsx";
import "./App.css";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Index />} />
        <Route path="/:selectedDinosaur" element={<Dinosaur />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

代理以转发 API 请求跳转到标题

Vite 将在端口 3000 上提供应用程序，而我们的 API 在端口 8000 上运行。因此，我们需要设置一个代理，以允许路由器访问 api/ 路径。将代理设置添加到 vite.config.ts

vite.config.ts

export default defineConfig({
  root: "./client",
  server: {
    port: 3000,
+   proxy: {
+     "/api": {
+       target: "https://127.0.0.1:8000",
+       changeOrigin: true,
+     },
+   },

创建页面跳转到标题

我们将创建两个页面：Index 和 Dinosaur。Index 页面将列出所有恐龙，Dinosaur 页面将显示特定恐龙的详细信息。

在 src 目录中创建一个 pages 文件夹，并在其中创建两个文件：index.tsx 和 Dinosaur.tsx。

类型跳转到标题

两个页面都将使用 Dino 类型来描述它们期望从 API 获取的数据形状，因此让我们在 src 目录中创建一个 types.ts 文件

types.ts

export type Dino = { name: string; description: string };

index.tsx 跳转到标题

此页面将从 API 获取恐龙列表，并将它们呈现为链接

index.tsx

import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { Dino } from "../types.ts";

export default function Index() {
  const [dinosaurs, setDinosaurs] = useState<Dino[]>([]);

  useEffect(() => {
    (async () => {
      const response = await fetch(`/api/dinosaurs/`);
      const allDinosaurs = await response.json() as Dino[];
      setDinosaurs(allDinosaurs);
    })();
  }, []);

  return (
    <main>
      <h1>Welcome to the Dinosaur app</h1>
      <p>Click on a dinosaur below to learn more.</p>
      {dinosaurs.map((dinosaur: Dino) => {
        return (
          <Link
            to={`/${dinosaur.name.toLowerCase()}`}
            key={dinosaur.name}
            className="dinosaur"
          >
            {dinosaur.name}
          </Link>
        );
      })}
    </main>
  );
}

Dinosaur.tsx 跳转到标题

此页面将从 API 获取特定恐龙的详细信息，并在段落中呈现它

Dinosaur.tsx

import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { Dino } from "../types";

export default function Dinosaur() {
  const { selectedDinosaur } = useParams();
  const [dinosaur, setDino] = useState<Dino>({ name: "", description: "" });

  useEffect(() => {
    (async () => {
      const resp = await fetch(`/api/dinosaurs/${selectedDinosaur}`);
      const dino = await resp.json() as Dino;
      setDino(dino);
    })();
  }, [selectedDinosaur]);

  return (
    <div>
      <h1>{dinosaur.name}</h1>
      <p>{dinosaur.description}</p>
      <Link to="/">🠠 Back to all dinosaurs</Link>
    </div>
  );
}

设置恐龙列表的样式跳转到标题

由于我们在主页上显示恐龙列表，因此让我们进行一些基本格式化。将以下内容添加到 src/App.css 的底部，以有序地显示我们的恐龙列表

src/App.css

.dinosaur {
  display: block;
}

运行应用跳转到标题

要运行应用，请使用您先前设置的任务

deno run dev

导航到浏览器中的本地 Vite 服务器 (localhost:5173)，您应该看到显示的恐龙列表，您可以单击该列表以了解每只恐龙的信息。

demo of the app

构建和部署跳转到标题

您克隆的模板带有 serve 任务，该任务构建应用并使用后端服务器提供它。运行以下命令以构建和提供应用

deno run serve

如果您在浏览器中访问 localhost:8000，您应该会看到应用正在运行！

您可以将此应用部署到您最喜欢的云提供商。我们建议使用 Deno Deploy 以获得简单易用的部署体验。

要部署到 Deno Deploy，请访问 Deno Deploy 仪表板并创建一个新项目。然后，您可以通过连接您的 GitHub 存储库并选择您要部署的分支来部署该应用。

给项目命名，并确保将 build step 设置为 deno run build，并将 Entrypoint 设置为 server/main.ts。

单击 Deploy Project 按钮，您的应用将上线！

🦕 现在您可以搭建和开发一个带有 Vite 和 Deno 的 React 应用了！您已准备好构建闪电般快速的 Web 应用程序。我们希望您喜欢探索这些前沿工具，我们迫不及待想看看您制作的东西！

使用启动模板构建 React 应用

启动器应用 跳转到标题#

在本地克隆存储库 跳转到标题#

安装依赖项 跳转到标题#

运行开发服务器 跳转到标题#

关于模板 跳转到标题#

添加后端 API 跳转到标题#

更新入口点 跳转到标题#

添加路由器 跳转到标题#

代理以转发 API 请求 跳转到标题#

创建页面 跳转到标题#

类型 跳转到标题#

index.tsx 跳转到标题#

Dinosaur.tsx 跳转到标题#

设置恐龙列表的样式 跳转到标题#

运行应用 跳转到标题#

构建和部署 跳转到标题#

您找到所需内容了吗？

启动器应用跳转到标题

在本地克隆存储库跳转到标题

安装依赖项跳转到标题

运行开发服务器跳转到标题

关于模板跳转到标题

添加后端 API 跳转到标题

更新入口点跳转到标题

添加路由器跳转到标题

代理以转发 API 请求跳转到标题

创建页面跳转到标题

类型跳转到标题

index.tsx 跳转到标题

Dinosaur.tsx 跳转到标题

设置恐龙列表的样式跳转到标题

运行应用跳转到标题

构建和部署跳转到标题