React 很棒但是你尝试过新鲜的吗？

为什么新鲜？

首先，我先问你一个简单的问题——“你用过 React 吗？”或者你用过任何 JS 框架或库来创建 Web 应用，比如 Vue、Svelte、Lit、NextJS 之类的。你知道它们都有一个共同点吗？它们都构建在 Node.js 之上，包含大量的样板代码，安装了大量的其他库，并且使用那个“邪恶”的node_modules文件夹。

如果我说，有一个框架不存在这些问题，它拥有极简的样板代码，没有node_modules ，并且构建于deno之上，那会怎么样呢？我说的就是fresh。它是一个基于 deno 构建的 Web 框架，最近刚刚完成 Beta 测试，并在 JS 生态系统中获得了相当多的关注。fresh 的创建者称之为“下一代 Web 框架”，听起来很酷吧！

Fresh 脱颖而出的一些特点是——

边缘即时渲染。
基于岛屿的客户端补水以实现最大程度的互动。
零运行时开销：默认情况下不会向客户端发送任何 JS。
沒有建置步驟。
无需配置。
开箱即用的 TypeScript 支持。

在这篇博客中，我将带您了解框架的基础知识，我们将像往常一样构建经典的 ToDo 应用程序，让我们开始吧！

先决条件：您应该在您的机器上安装了 deno，您可以使用这个来安装它。

创建应用程序

让我们从搭建项目脚手架开始。要创建一个新的项目并运行它，您需要在终端中运行以下命令。请确保在“fresh”提示时使用 twind。

deno run -A -r https://fresh.deno.dev todo-app
cd todo-app
deno task start

这将在 localhost:8000 上启动您的应用程序，其中包含一个基本的计数器应用程序。

现在让我们了解基本概念，一个新项目总共有 8 个组件，我将在此博客中仅介绍routes/和文件夹，您可以在这里islands/了解所有这些组件。

routes/：此文件夹包含项目中的所有路由。此文件夹中每个文件的名称与访问该页面的路径相对应。此文件夹中的代码绝不会直接发送给客户端
islands/：此文件夹包含项目中所有可交互的岛。每个文件的名称与该文件中定义的岛的名称相对应。此文件夹中的代码可以在客户端和服务器端运行。

简单来说，为了给您的项目添加交互性和反应性，您需要使用islands和创建您需要使用的页面/路线routes。

首先，在应用中创建一个新的待办事项路由，我们将在其中构建待办事项应用。todo.tsx在 routes 文件夹中添加一个名为 inside 的文件，内容如下。我们将使用 twind 来设置应用的样式，因此最好具备 tailwind 的基础知识。

// routes/todo.tsx

/** @jsx h */
import { h } from "preact";
import { tw } from "@twind";

export default function Todo() {
    return (
        <div class={tw`w-screen h-screen flex flex-col justify-center items-center`}>
            <h1>hello world</h1>
        </div>
    )
}

这个语法和 React 非常相似，因为我们使用的是 jsx，而 tw 则通过 twind 来设置元素的样式。如果你想了解更多信息，可以访问 twind 的网站。现在，如果你所有操作都正确，localhost:8000/todo你将看到一个如下所示的页面：

现在，让我们开始在文件夹中构建我们的 todo 组件islands/。在 inslands 文件夹中创建一个名为 inside 的新文件TodoComponent.tsx，并将以下代码放入其中。

// islands/TodoComponent.tsx

/** @jsx h */
import { h } from "preact";
import { useState } from "preact/hooks";
import { IS_BROWSER } from "$fresh/runtime.ts";
import { tw } from "@twind";

export default function TodoComponent() {
  const [todoEl, setTodoEL] = useState("");
  const [todos, setTodos] = useState([]);
  const btn = tw
    `px-2 py-1 border-gray-200 border-2 hover:bg-gray-200 focus:outline-none`;

  return (
    <div class={tw`h-2/3 w-1/2 flex flex-col justify-center ites-center gap-3`}>
      <div class={tw`flex gap-3 h-[10%] w-full`}>
        <input
          type="text"
          class={tw
            `flex-grow-1 outline-none focus:outline-none border-gray-200 border-2 p-2`}
          placeholder="Enter new ToDo"
          onChange={(e: any) => {
            setTodoEL(e.target.value);
          }}
        >
        </input>
        <button
          class={btn}
          onClick={() => {
            if (todoEl) {
              setTodos([...todos, todoEl]);
              setTodoEL("");
            }
          }}
          disabled={!IS_BROWSER}
        >
          ➕
        </button>
      </div>
      <ul class={tw`flex flex-col gap-2 overflow-y-scroll min-h-[90%]`}>
        {todos.map((todo, index) => (
          <li class={tw`flex gap-2`} key={todo}>
            <p class={tw`flex-grow-1`}>{todo}</p>
            <button
              class={btn}
              onClick={() => {
                setTodos(todos.filter((todo, i) => i !== index));
              }}
              disabled={!IS_BROWSER}
            >
              ❌
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

这是一个基本的待办事项应用程序代码，您可以轻松理解。
我们有两个状态，一个用于当前待办事项元素，另一个用于待办事项列表，我们渲染一个包含两个容器的弹性容器，第一个容器有一个输入框和一个用于添加待办事项的按钮。我们使用onChange输入元素来更新todoEl状态，并onClick使用添加待办事项按钮，在确保不是后将添加todoEl到数组中null。
第二部分有一个ul元素，它将我们的todos数组映射到创建li元素，并将其todo作为其文本，并使用待办事项的索引来删除待办事项元素。

现在我们需要把这个岛添加到我们的todo路线中。我们可以这样做——

routes/todo.tsx

/** @jsx h */
import { h } from "preact";
import { tw } from "@twind";
import TodoComponent from "../islands/TodoComponent.tsx";

export default function Todo() {
  return (
    <div
      class={tw`w-screen h-screen flex flex-col justify-center items-center`}
    >
      <TodoComponent />
    </div>
  );
}

现在，如果localhost:8000/todo你正确遵循了教程，你打开它时会看到类似这样的内容-

你可以尝试一下这个应用，看看它是否能用，它确实能用！你也可以尝试添加一个按钮，把待办事项标记为已完成，作为练习。

结论

这是关于新框架的基本介绍，您可以通过阅读文档了解更多信息。

感谢阅读，祝您编码愉快！

给我买个披萨🍕

文章来源：https://dev.to/asheeshh/react-is-awesome-but-have-you-tried-fresh-47ho