如何在 Deno 下使用 AlpehJS 庫構建 React 應用

原文地址：https://www.freecodecamp.org/news/build-react-app-using-deno-and-alephjs/

原文作者：Akash Joshi

原文發佈時間 / 翻譯時間：20210312/20210429

譯者：hylerrix

備註：本文遵循 freeCodeCamp 翻譯規範，同時本文會收錄在《Deno 鑽研之術》的翻譯篇中。

如果你是剛剛開始使用 Deno 的前端開發人員，你可能會想知道，你是否可以使用 Deno 構建像 NextJS 或 create-react-app（CRA）應用程序一樣複雜的東西？

我最近在想同樣的事情。我想嘗試使用能提供高共享性的 Deno，其能夠直接從 URL 運行 JavaScript 和 TypeScript 應用程序。同時 Deno 編譯器支持從 URL 中導入模塊，從而實現了更大的可移植性。

與 NextJS 一樣，Aleph 是一個零配置，由 TypeScript 驅動的 React 框架。唯一的缺點是 Aleph 仍然處於 Alpha 狀態。

因此，讓我們開始使用 AlephJS，來在 Deno 中獲得真正的類似於 Next 的 React 體驗。它具有 Next 相同的許多約定，例如：

一個 /pages 目錄用來創建 URL 路由
pages 中直接支持 .js .jsx .ts .tsx 格式。
一個 /public 目錄用來存放靜態資源比如視頻、音頻或圖片文件。
一個 /pages/api 目錄用來存放 JavaScript 或 TypeScript 的 serverless APIs。

如何從 AlephJS 開始

爲了能夠使用到 AlephJS，你需要確保你已安裝了 Deno。你可以在我之前的這篇文章中查看如何安裝 Deno。

準備好後，你需要先通過如下命令安裝 Aleph CLI：

deno install -A -f -n aleph https://deno.land/x/aleph@v0.3.0-alpha.1/cli.ts

安裝完後，你可以運行 aleph -h 來檢查是否安裝成功。

由於 Deno 的 URL 特性，你可以使用 deno run -A [https://deno.land/x/aleph@v0.3.0-alpha.1/cli.ts](https://deno.land/x/aleph@v0.3.0-alpha.1/cli.ts) start $app_URI 替換 aleph 來執行任何命令，並且無需本地安裝 CLI 即可運行 Aleph 程序。

運行如下命令來初始化一個應用：

aleph init hello
cd hello

然後使用 aleph dev 在開發模式下啓動該應用，以在端口 8080 上啓動服務器。

要以生產模式啓動該應用程序，你必須首先 build 構建該應用程序。你可以通過以下命令執行此操作：

aleph build # build your app
aleph start # runs built app

在你初始化完畢 Aleph 之後，你會發現根組件已經在 pages/index.tsx 中定義了。這是正常的 React 組件。你可以對其進行修改，以瞭解 Aleph 的工作原理。

你也可以通過在 pages 文件夾中創建更多 .jsx 或 .tsx 文件來嚮應用添加更多的路由。你可以在此處閱讀有關 Aleph 中路由的更多知識。

如何在 Deno 中導入庫

我之前在 freeCodeCamp 中寫過有關 Deno 的文章，其中演示了一些 Deno 的基礎知識，比如 URL 的導入。由於 Aleph 是 Deno 框架，因此所有導入均以 “Deno 的方式” 進行。

你可以在 Deno 應用程序中導入這兩種庫：

導入 Deno 原生庫：這些庫要麼是爲 Deno 構建的，要麼是從 npm 移植過來的，均支持 Deno 的使用。
從 NPM 中導入：如果你最近使用過 JS，則很可能瞭解 npm。不瞭解的話：npm（node 包管理器背後的公司）是所有 JavaScript 庫的一種標準託管庫。幸運的是，Deno 對 npm 庫有一定限度的支持。可以使用諸如 esm.sh 或 skypack.dev 這樣的工具，用戶可以將 npm 庫導入到 Deno 中。

1. 如何導入 Deno 原生庫

你可以直接通過 URL 導入 Deno 原生庫。你也可以在這裏找到 Deno 庫的列表：deno.land/x。

想要測試這個功能，讓我們導入一個標準 Deno 日期格式庫，然後在 React 頁面中調用日期格式函數。在應用程序的 pages 文件夾中創建一個文件 date-import.tsx。在文件內部編寫如下代碼：

// react 是 Aleph 中已經安裝好的基礎庫
import React from "react";

// 從 URL 中導入其 format 函數
import { format } from "https://deno.land/std@0.88.0/datetime/mod.ts";

// 將函數名稱大寫，以便將其識別爲一個 React 組件
export default function DateImport() {
  // 在這裏，直接調用 format 函數可以正常使用
  return <section>Hello all! Today is: {format(new Date(), "dd-MM-yyyy")}</section>;
}

要查看此文件的輸出，請跳轉到 localhost:8080/date-import，你應該可以看到顯示今天日期的頁面。

2. 如何從 NPM 中導入庫

要導入 npm 庫，你也可以直接從 URL 導入——但在這種情況下，需要進行一些更改。自從我們討論了 esm.sh 和 skypack.dev 以來，讓我們嘗試在實際中使用它們。此時，我們嘗試在項目中導入 dayjs 庫。

注意：並非所有 npm 庫都可以在 Deno 中正常工作，因爲它們可能依賴於特定於 Node 的功能。

要在 esm.sh 中導入庫，請將庫的軟件包名追加到 URL 後面。比如導入 dayjs 的話，我們可以導入 [https://esm.sh/dayjs](https://esm.sh/dayjs) 地址。這同時適用於你可能從庫中導入的任何 CSS 文件。

現在，讓我們在名爲 pages 中創建一個文件 dayjs-import.tsx。因此，我們頁面中的代碼將如下所示：

// react 是 Aleph 中已經安裝好的基礎庫
import React from "react";

// 使用 esm.sh 導入 dayjs npm 庫
import dayjs from "https://esm.sh/dayjs";

// 將函數名稱大寫，以便將其識別爲一個 React 組件
export default function DateImport() {
  // 直接調用 dayjs 函數來顯示今天的日期
  return <section>Hello all! Today is: {dayjs().format("DD-MM-YYYY")}</section>;
}

要查看此文件的輸出，打開 localhost:8080/dayjs-import，你應該會看到顯示當天日期的頁面。

但在我們進行下一步之前，有一件重要的事——你如何導入 React 下的 useState、useEffect 等？幸運的是，Aleph 開發人員已經爲我們編寫了一個示例。

進入 ./lib/useCounter.ts，你將找到在頁面中用於計數器自定義鉤子的代碼。

由於我在本文中將重點介紹 Aleph 和 React 本身，因此，要查看在 Aleph 中導入 CSS 文件的所有不同方法，請訪問官方文檔中的相關頁面。

如何使用 Deno 和 AlephJS 構建示例應用

現在，讓我們進入實戰環境，來嘗試自己在 Aleph 中構建一個 React 應用。我們將構建 “Is It Down”，這是我使用現有的網站檢查 API 製作的一個示例應用。這個應用將使我們能夠檢查一個網站當前是打開還是關閉的。

這是 CodeSandbox 鏈接：https://codesandbox.io/s/awesome-firefly-5dofg

構建此應用將向你展示如何使用 State hook、Effect Hook 以及如何在 Aleph 中進行 API 調用。

在 pages 文件夾中創建一個名爲 web-checker.tsx 的新文件。讓我們從僅添加 UI 元素開始。我們將顯示一個帶標題的 h1 元素，一個鏈接到 API 的 h2 元素以及一個接受用戶輸入的 form 元素。這是一個非交互式的頁面，僅顯示元素。

import React from "react";

export default function App() {
 return (
    <div style={{ fontFamily: "sans-serif", textAlign: "center" }}>
      <h1>Is it Down?</h1>
      <h2>
        Go{" "}
        <a
          href="https://rapidapi.com/jakash1997/api/website-data-gathering-and-update-tracking"
          target="_blank"
        >
          here
        </a>{" "}
        to get an API key
      </h2>

      <form
        onSubmit={(e) => {
          e.preventDefault();
        }}
      >
        <input
          type="text"
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

接下來，爲了捕獲輸入字段的狀態，以及捕獲我們必須進行的 API 調用的響應，讓我們引入一下 state。

// import useState from react
import React, { useState } from "react";

export default function App() {
  // define both state variables
  const [siteURL, setUrl] = useState("");
  const [response, setResponse] = useState(undefined);
...

現在，我們可以在輸入元素中使用此狀態，以便它可以對此作出響應：

...
<input
  value={siteURL}
  onChange={(e) => setUrl(e.target.value)}
  type="text"
/>
...

當 API 返回響應時，我們還需要添加一些代碼來顯示響應：

...
 </form>
 
 

 
 <code>{JSON.stringify(response, null, 2)}</code>
</div>
...

現在，準備開始集成 API。讓我們嘗試正確的組合請求體。此時，API 是一個簡單的 GET 調用，因此我們只需傳遞一個參數和一個 API 祕鑰。

首先轉到此處來生成 API 祕鑰：https://rapidapi.com/jakash1997/api/website-data-gathering-and-update-tracking。如下截圖所示，找到密碼並將其存儲到安全的地方：

接下來，讓我們創建一個單獨的函數 sumitData，用來生成所需的請求體。我們將使用 axios 庫進行 GET 調用，同時用到 options 對象。

...
const [response, setResponse] = useState(undefined);

const submitData = (siteURL) => {
  setResponse("Loading...");
  const options = {
  // passing siteURL here through object shorthand
    params: { siteURL },

  // passing the required headers here
    headers: {
      "x-rapidapi-key": "YOUR_API_KEY",
      "x-rapidapi-host":
        "website-data-gathering-and-update-tracking.p.rapidapi.com",
    },
  };

 // print options here
 console.log("options", options);
};

return (
...

然後，將其添加到表單的 onSubmit 函數中。

onSubmit={(e) => {
  e.preventDefault();
  submitData(siteURL);
}}

現在，每當你點擊 Submit 按鈕時，你都能看到我們在控制檯中生成的 options。如果你能看到，代表目前爲止一切都正常！

接下來，我們只需執行簡單的步驟，即使用 http://esm.sh 來導入 axios 庫並使用它進行 API 調用。

在 React 導入之後，像這樣導入 axios：

import React, { useState } from "react";
import axios from "https://esm.sh/axios";

...

並將其在 submitData 函數中使用：

...
 axios
    .get(
      "https://website-data-gathering-and-update-tracking.p.rapidapi.com/sitecheck",
      options
    )
    .then(function (response) {
      setResponse(response.data);
      console.log(response.data);
    })
    .catch(function (error) {
      console.error(error);
    });
};
...

就這麼簡單！嘗試再次提交表單，這次你將在屏幕和控制檯上都能看到正確的結果。

結論

現在你瞭解了 Aleph 的基礎知識。這是一個非常有趣的工具，它使你可以將現有的 React 知識與 deno.land 的前沿性和安全性結合。

如果你喜歡本教程，可以在 Twitter 上關注我 @thewritingdev。

© https://github.com/hylerrix/deno-tutorial 2020~2021

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/XEt46Qop9v8N94rYOp_6mQ

如何從 AlephJS 開始

如何在 Deno 中導入庫

1. 如何導入 Deno 原生庫

2. 如何從 NPM 中導入庫

如何使用 Deno 和 AlephJS 構建示例應用

結論

猜你喜歡