跳转到主要内容
在本页

构建 React 应用

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

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

demo of the app

使用 Vite 和 Deno 创建 React 应用 跳转到标题

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

在终端中运行以下命令，使用 TypeScript 模板创建一个新的 React 应用：

deno run -A npm:create-vite@latest --template react-ts

出现提示时，为您的应用命名，并使用 cd 命令进入新创建的项目目录。然后运行以下命令安装依赖项：

deno install

现在，您可以通过运行以下命令来启动新的 React 应用：

deno task dev

这将启动 Vite 服务器，点击输出的本地主机链接即可在浏览器中查看您的应用。

添加后端 跳转到标题

下一步是添加后端 API。我们将创建一个非常简单的 API，用于返回恐龙的信息。

在新项目的根目录下，创建一个 api 文件夹。在该文件夹中，创建一个 main.ts 文件（用于运行服务器）和一个 data.json 文件（用于包含硬编码的恐龙数据）。

将 此 JSON 文件 复制并粘贴到 api/data.json 文件中。

我们将使用 oak 中间件框架 和 cors 中间件 构建一个简单的 API 服务器，其路由返回恐龙信息，并启用 CORS。

使用 deno add 命令将所需的依赖项添加到您的项目中：

deno add jsr:@oak/oak jsr:@tajpouria/cors

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

main.ts
import { Application, Router } from "@oak/oak";
import { oakCors } from "@tajpouria/cors";
import data from "./data.json" with { type: "json" };

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.";
});

最后，在同一个文件的底部，创建一个新的 Application 实例，并使用 app.use(router.routes()) 将我们刚刚定义的路由附加到应用程序上，并启动服务器监听端口 8000。

main.ts
const app = new Application();
app.use(oakCors());
app.use(router.routes());
app.use(router.allowedMethods());

await app.listen({ port: 8000 });

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

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

{
  "scripts": {
    "dev": "deno task dev:api & deno task dev:vite",
    "dev:api": "deno run --allow-env --allow-net api/main.ts",
    "dev:vite": "deno run -A npm:vite",
    // ...
}

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

更新入口点 跳转到标题

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

main.tsx
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <App />,
);

添加路由器 跳转到标题

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

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

deno add npm:react-router-dom

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

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

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

export default App;

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

Vite 将在端口 5173 上提供应用程序，而我们的 API 运行在端口 8000 上。因此，我们需要设置一个代理，以允许路由器访问 api/ 路径。用以下内容覆盖 vite.config.ts 以配置代理：

vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    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 task dev

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

demo of the app

构建和部署 跳转到标题

此时，该应用程序由 Vite 开发服务器提供服务。要在生产环境中提供该应用程序，您可以使用 Vite 构建该应用程序，然后使用 Deno 提供构建的文件。为此，我们需要更新 API 服务器以提供构建的文件。我们将编写一些中间件来执行此操作。在您的 api 目录中，创建一个名为 routeStaticFilesFrom.ts 的新文件，并添加以下代码。

routeStaticFilesFrom.ts
import { Next } from "jsr:@oak/oak/middleware";
import { Context } from "jsr:@oak/oak/context";

// Configure static site routes so that we can serve
// the Vite build output and the public folder
export default function routeStaticFilesFrom(staticPaths: string[]) {
  return async (context: Context<Record<string, object>>, next: Next) => {
    for (const path of staticPaths) {
      try {
        await context.send({ root: path, index: "index.html" });
        return;
      } catch {
        continue;
      }
    }

    await next();
  };
}

此中间件将尝试从 staticPaths 数组中提供的路径提供静态文件。如果找不到该文件，它将调用链中的下一个中间件。我们现在可以更新 api/main.ts 文件以使用此中间件。

main.ts
import { Application, Router } from "@oak/oak";
import { oakCors } from "@tajpouria/cors";
import data from "./data.json" with { type: "json" };
import routeStaticFilesFrom from "./util/routeStaticFilesFrom.ts";

const router = new Router();

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 ? dinosaur : "No dinosaur found.";
});

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

await app.listen({ port: 8000 });

将 serve 脚本添加到您的 package.json 文件中，以使用 Vite 构建应用程序，然后运行 API 服务器。

{
  "scripts": {
    // ...
    "serve": "deno task build && deno task dev:api",
}

现在，您可以通过运行以下命令使用 Deno 提供构建的应用程序：

deno task serve

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

🦕 现在您可以使用 Vite 和 Deno 搭建和开发 React 应用程序了！您已准备好构建闪电般快速的 Web 应用程序。我们希望您喜欢探索这些尖端工具，我们迫不及待地想看到您的作品！