deno.com
本页内容

用 Deno 构建 SolidJS 应用

SolidJS 是一个声明式的 JavaScript 库，用于创建用户界面，它强调细粒度响应性和最小开销。当与 Deno 的现代运行时环境结合时，您将获得一个强大、高性能的栈，用于构建 Web 应用程序。在本教程中，我们将构建一个简单的恐龙目录应用程序，以展示这两种技术的关键特性。

我们将介绍如何使用 Deno 构建一个简单的 SolidJS 应用

您可以直接跳到源代码，或者按照下面的步骤进行！

用 Vite 构建 SolidJS 应用骨架 跳转到标题

让我们使用 Vite 设置 SolidJS 应用程序，Vite 是一个现代化的构建工具，通过热模块替换和优化构建等功能提供了出色的开发体验。

deno init --npm vite@latest solid-deno --template solid-ts

我们的后端将由 Hono 提供支持，我们可以通过 JSR 安装它。我们还要添加 solidjs/router，用于客户端路由和恐龙目录页面之间的导航。

deno add jsr:@hono/hono npm:@solidjs/router
了解更多关于 deno add 和使用 Deno 作为包管理器。

我们还需要更新 deno.json，包含一些任务和 compilerOptions 来运行我们的应用

{
  "tasks": {
    "dev": "deno task dev:api & deno task dev:vite",
    "dev:api": "deno run --allow-env --allow-net --allow-read api/main.ts",
    "dev:vite": "deno run -A npm:vite",
    "build": "deno run -A npm:vite build",
    "serve": {
      "command": "deno task dev:api",
      "description": "Run the build, and then start the API server",
      "dependencies": ["deno task build"]
    }
  },
  "imports": {
    "@hono/hono": "jsr:@hono/hono@^4.6.12",
    "@solidjs/router": "npm:@solidjs/router@^0.14.10"
  },
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "solid-js",
    "lib": ["DOM", "DOM.Iterable", "ESNext"]
  }
}
您可以将 tasks 写成对象。在这里，我们的 serve 命令包含 description 和 dependencies。

太棒了！接下来，让我们设置 API 后端。

设置 Hono 后端 跳转到标题

在我们的主目录中，我们将设置一个 api/ 目录并创建两个文件。首先是我们的恐龙数据文件 api/data.json

// api/data.json

[
  {
    "name": "Aardonyx",
    "description": "An early stage in the evolution of sauropods."
  },
  {
    "name": "Abelisaurus",
    "description": "\"Abel's lizard\" has been reconstructed from a single skull."
  },
  {
    "name": "Abrictosaurus",
    "description": "An early relative of Heterodontosaurus."
  },
  ...
]

这是我们将从中提取数据的地方。在完整的应用程序中，这些数据将来自数据库。

⚠️️ 在本教程中，我们硬编码了数据。但是，您可以连接到各种数据库，甚至可以使用 Deno 使用 Prisma 等 ORM。

其次，我们需要我们的 Hono 服务器 api/main.ts

// api/main.ts

import { Hono } from "@hono/hono";
import data from "./data.json" with { type: "json" };

const app = new Hono();

app.get("/", (c) => {
  return c.text("Welcome to the dinosaur API!");
});

app.get("/api/dinosaurs", (c) => {
  return c.json(data);
});

app.get("/api/dinosaurs/:dinosaur", (c) => {
  if (!c.req.param("dinosaur")) {
    return c.text("No dinosaur name provided.");
  }

  const dinosaur = data.find((item) =>
    item.name.toLowerCase() === c.req.param("dinosaur").toLowerCase()
  );

  console.log(dinosaur);

  if (dinosaur) {
    return c.json(dinosaur);
  } else {
    return c.notFound();
  }
});

Deno.serve(app.fetch);

此 Hono 服务器提供两个 API 端点

  • GET /api/dinosaurs 用于获取所有恐龙，以及
  • GET /api/dinosaurs/:dinosaur 根据名称获取特定恐龙

当我们运行 deno task dev 时，此服务器将在 localhost:8000 上启动。

最后，在我们开始构建前端之前，让我们用以下内容更新 vite.config.ts 文件，特别是 server.proxy，它告诉我们的 SolidJS 前端在哪里找到 API 端点。

// vite.config.ts
import { defineConfig } from "vite";
import solid from "vite-plugin-solid";

export default defineConfig({
  plugins: [solid()],
  server: {
    proxy: {
      "/api": {
        target: "https://:8000",
        changeOrigin: true,
      },
    },
  },
});

创建 SolidJS 前端 跳转到标题

在我们开始构建前端组件之前，让我们快速在 src/types.ts 中定义 Dino 类型

// src/types.ts
export type Dino = {
  name: string;
  description: string;
};

Dino 类型接口确保了我们应用程序的类型安全，定义了恐龙数据的形状，并支持 TypeScript 的静态类型检查。

接下来，让我们设置前端来接收这些数据。我们将有两个页面

  • Index.tsx
  • Dinosaur.tsx

这是 src/pages/Index.tsx 页面的代码

// src/pages/Index.tsx

import { createSignal, For, onMount } from "solid-js";
import { A } from "@solidjs/router";
import type { Dino } from "../types.ts";

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

  onMount(async () => {
    try {
      const response = await fetch("/api/dinosaurs");
      const allDinosaurs = (await response.json()) as Dino[];
      setDinosaurs(allDinosaurs);
      console.log("Fetched dinosaurs:", allDinosaurs);
    } catch (error) {
      console.error("Failed to fetch dinosaurs:", error);
    }
  });

  return (
    <main>
      <h1>Welcome to the Dinosaur app</h1>
      <p>Click on a dinosaur below to learn more.</p>
      <For each={dinosaurs()}>
        {(dinosaur) => (
          <A href={`/${dinosaur.name.toLowerCase()}`} class="dinosaur">
            {dinosaur.name}
          </A>
        )}
      </For>
    </main>
  );
}

使用 SolidJS 时，与 React 相比有几个关键区别需要注意

  1. 我们使用 SolidJS 特有的原语
    • createSignal 而不是 useState
    • createEffect 而不是 useEffect
    • For 组件而不是 map
    • A 组件而不是 Link
  2. SolidJS 组件使用细粒度响应性，因此我们将信号作为函数调用，例如 dinosaur() 而不是 dinosaur
  3. 路由由 @solidjs/router 处理，而不是 react-router-dom
  4. 组件导入使用 Solid 的 lazy 进行代码拆分

Index 页面使用 SolidJS 的 createSignal 来管理恐龙列表，并使用 onMount 在组件加载时获取数据。我们使用 For 组件，这是 SolidJS 渲染列表的有效方式，而不是使用 JavaScript 的 map 函数。来自 @solidjs/router 的 A 组件创建到单个恐龙页面的客户端导航链接，防止整页重新加载。

现在是位于 src/pages/Dinosaur.tsx 的单个恐龙数据页面

// src/pages/Dinosaur.tsx

import { createSignal, onMount } from "solid-js";
import { A, useParams } from "@solidjs/router";
import type { Dino } from "../types.ts";

export default function Dinosaur() {
  const params = useParams();
  const [dinosaur, setDinosaur] = createSignal<Dino>({
    name: "",
    description: "",
  });

  onMount(async () => {
    const resp = await fetch(`/api/dinosaurs/${params.selectedDinosaur}`);
    const dino = (await resp.json()) as Dino;
    setDinosaur(dino);
    console.log("Dinosaur", dino);
  });

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

Dinosaur 页面通过使用 useParams 访问 URL 参数，展示了 SolidJS 处理动态路由的方法。它遵循与 Index 页面类似的模式，使用 createSignal 进行状态管理，并使用 onMount 进行数据获取，但它专注于单个恐龙的详细信息。此 Dinosaur 组件还展示了如何在模板中通过将其作为函数调用（例如 dinosaur().name）来访问信号值，这是与 React 状态管理的关键区别。

最后，为了将所有内容连接起来，我们将更新 App.tsx 文件，它将把 Index 和 Dinosaur 页面作为组件提供服务。App 组件使用 @solidjs/router 设置我们的路由配置，定义了两个主要路由：用于恐龙列表的索引路由和用于单个恐龙页面的动态路由。路由路径中的 :selectedDinosaur 参数创建了一个动态片段，它与 URL 中的任何恐龙名称匹配。

// src/App.tsx

import { Route, Router } from "@solidjs/router";
import Index from "./pages/Index.tsx";
import Dinosaur from "./pages/Dinosaur.tsx";
import "./App.css";

const App = () => {
  return (
    <Router>
      <Route path="/" component={Index} />
      <Route path="/:selectedDinosaur" component={Dinosaur} />
    </Router>
  );
};

export default App;

最后，此 App 组件将从我们的主索引中调用

// src/index.tsx

import { render } from "solid-js/web";
import App from "./App.tsx";
import "./index.css";

const wrapper = document.getElementById("root");

if (!wrapper) {
  throw new Error("Wrapper div not found");
}

render(() => <App />, wrapper);

我们应用程序的入口点使用 SolidJS 的 render 函数将 App 组件挂载到 DOM。它包含一个安全检查，以确保根元素存在，然后再尝试渲染，从而在初始化期间提供更好的错误处理。

现在，让我们运行 deno task dev 来同时启动前端和后端

后续步骤 跳转到标题

🦕 现在您可以使用 Deno 构建和运行 SolidJS 应用了！以下是一些可以增强您的恐龙应用的方法

SolidJS 独特的响应式原语、真正的 DOM 协调以及 Deno 的现代运行时相结合，为 Web 开发提供了极其高效的基础。没有虚拟 DOM 开销，并且只在需要时进行细粒度更新，您的应用程序可以实现最佳性能，同时保持代码简洁可读。

您找到所需内容了吗？

编辑此页面
隐私政策