Deno 与 React 配合使用的指南

前言

Deno 是一款由 Node.js 的创始人 Ryan Dahl 所创建的一个运行时环境,该工具具有很多成熟的 Node.js 工具不具备的诸多优点,比如安全,可维护性等等。而 React 是一款强大且广泛使用的前端框架,因此 Deno 与 React 的组合将是一个非常有趣和强大的组合。本篇文章主要介绍如何使用 Deno 与 React 结合,以及如何在此过程中使用 Deno 提供的优势。

安装 Deno

与 Node.js 不同,Deno 不需要安装任何依赖项,因此它安装起来非常简单。只需在您的终端中打开下面的链接并复制粘贴以下命令:https://deno.land/x/install/install.sh ,这将自动从官方源下载 Deno 并将其安装在您的设备上。

安装 React

React 可以使用 npmyarn 包管理器进行安装。此处,我们使用 yarn 包管理器。

---- --- ----- ---------

构建 React 应用

构建 React 应用的过程与普通的 React 应用非常类似。在命令行中,输入以下命令:

--- ---------------- ------
-- ------
---- -----

接下来,定义一个名为 HelloWorld.jsx 的组件。

------ ----- ---- -------

----- ---------- ------- --------------- -
  -------- -
    ------ --------- -----------
  -
-

------ ------- ----------

使用 Deno

现在我们可以开始尝试使用 Deno 了。我们可以使用 Deno 作为我们的 API 服务器,并将 React 应用与其结合。

创建文件 server.js 并添加以下代码:

------ - ------------ ------ - ---- ---------------------------------
------ ---------- ---- -------------------

----- ------ - --- ---------
--------------- ----- -- -
  ----------------- - ------------
  ----------------- - -
    --------- -----
    ------
      ------
        ------------- --- ------------------
      -------
      ------
        ---- -------------------------------
        ------- ------------- -----------------------
      -------
    -------
  --
---

----- --- - --- --------------
-------------------------

------------- ----- -- -
  ----- -----------
    ------- -----
    ---- -------- --------- ------------------ -----------------
  ---

  ----- ----------
    ----- -----------------------
    ------ -------------
  ---
---

---------------------- -- ---- -------
----- ------------ ----- ---- ---

server.js 文件中,我们使用 oak 框架来包装我们的应用程序,并将我们的 HelloWorld 组件呈现在 HTML 页面上。

在命令行中启动服务器:

---- --- ----------- ---------

现在,您可以在浏览器中输入以下 URL 然后查看 Deno 与 React 结合的效果:http://localhost:3000

实际显示效果如下:

结论

在这个简短的指南中,我们讨论了 Deno 和 React 结合使用的过程。Denon 提供了更好的模块性和安全性,也相对更容易定位错误。React 是构建前端应用的强大工具,然而,Deno 为开发人员提供了前所未有的灵活性和可维护性。在构建 Web 应用程序或 API 服务器的时候,使用 Deno 和 React 结合将是一个非常好的选择。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/672d6b05ddd3a70eb6da54db