前言
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 可以使用 npm 或 yarn 包管理器进行安装。此处，我们使用 yarn 包管理器。
yarn add react react-dom
构建 React 应用
构建 React 应用的过程与普通的 React 应用非常类似。在命令行中，输入以下命令：
npx create-react-app my-app cd my-app yarn start
接下来，定义一个名为 HelloWorld.jsx 的组件。
-- -------------------- ---- -------
------ ----- ---- -------
----- ---------- ------- --------------- -
-------- -
------ --------- -----------
-
-
------ ------- ----------使用 Deno
现在我们可以开始尝试使用 Deno 了。我们可以使用 Deno 作为我们的 API 服务器，并将 React 应用与其结合。
创建文件 server.js 并添加以下代码：
-- -------------------- ---- -------
------ - ------------ ------ - ---- ---------------------------------
------ ---------- ---- -------------------
----- ------ - --- ---------
--------------- ----- -- -
----------------- - ------------
----------------- - -
--------- -----
------
------
------------- --- ------------------
-------
------
---- -------------------------------
------- ------------- -----------------------
-------
-------
--
---
----- --- - --- --------------
-------------------------
------------- ----- -- -
----- -----------
------- -----
---- -------- --------- ------------------ -----------------
---
----- ----------
----- -----------------------
------ -------------
---
---
---------------------- -- ---- -------
----- ------------ ----- ---- ---在 server.js 文件中，我们使用 oak 框架来包装我们的应用程序，并将我们的 HelloWorld 组件呈现在 HTML 页面上。
在命令行中启动服务器：
deno run --allow-net server.js
现在，您可以在浏览器中输入以下 URL 然后查看 Deno 与 React 结合的效果：http://localhost:3000。
实际显示效果如下：
结论
在这个简短的指南中，我们讨论了 Deno 和 React 结合使用的过程。Denon 提供了更好的模块性和安全性，也相对更容易定位错误。React 是构建前端应用的强大工具，然而，Deno 为开发人员提供了前所未有的灵活性和可维护性。在构建 Web 应用程序或 API 服务器的时候，使用 Deno 和 React 结合将是一个非常好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672d6b05ddd3a70eb6da54db