Deno 是一款基于 V8 引擎的安全 TypeScript 运行时。它是由 Node.js 的创始人 Ryan Dahl 开发，用于弥补 Node.js 的一些不足。
React 是 Facebook 开源的一款 UI 框架，为开发者提供了构建高效、可重用且易于维护的 UI 组件的能力。如何在 Deno 中使用 React 呢？我们可以使用一个叫做 Deno React 的第三方库来帮助我们实现这一点。
安装 Deno React
在使用 Deno React 之前，我们需要先安装 Deno。你可以按照 Deno 的官方文档进行安装。
接下来，我们需要在我们的 Deno 项目中安装 Deno React。打开终端并输入以下命令来完成安装：
deno install --allow-read --allow-net --unstable https://deno.land/x/deno_react/mod.ts
命令中 --allow-read 和 --allow-net 用于允许 Deno 读取文件和访问网络，--unstable 则用于允许使用实验性功能。
创建 Deno React 应用
现在，我们已经成功地安装了 Deno React，我们可以开始创建我们的第一个应用程序了。
首先，我们需要在我们的项目文件夹中创建一个名为 app.tsx 的文件。我们将在这个文件中编写我们的 React 组件：
-- -------------------- ---- -------
------ - ------ -------- - ---- -------------------------------------
-------- ----- -
------ -
-----
---------- ---- -----------
------
--
-
-------------------- --- --------------------------------------上面的代码中，我们使用了 Deno React 提供的 React 和 ReactDOM 方法，同时也引入了我们的组件 App。这是一个非常简单的组件，它只是渲染了一个包含文字的 div 标签。
接下来，我们需要为我们的应用程序创建一个 HTML 文件，以便我们可以将我们的组件渲染到其中。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----------- ----- -----------
-------
------
---- ---------------------
------- ------------- -------------------------
-------
-------在 HTML 文件中，我们引入了我们的应用程序文件 app.tsx，并将它作为一个模块加载到我们的页面中。
运行 Deno React 应用
现在我们已经完成了应用程序的开发，我们可以使用以下命令在本地运行应用程序：
deno run --allow-read --allow-net --unstable --import-map=import_map.json ./app.tsx
在命令中，我们使用了 --import-map 参数，并通过一个名为 import_map.json 的文件来映射我们的依赖项引入。我们的 import_map.json 文件应该如下所示：
{
"imports": {
"https://cdn.skypack.dev/deno_react": "./deps/deno_react.ts"
}
}这个文件告诉 Deno React 包在下载时存储在我们项目的 ./deps/deno_react.ts 文件夹下。
现在，我们就可以在我们的浏览器中访问 http://localhost:8000，并看到我们的应用程序已经成功地运行了！
总结
在本文中，我们了解了如何在 Deno 中使用 React 来构建我们的前端应用程序。我们安装了 Deno React，创建了一个简单的组件，并在本地运行了应用程序。
使用 Deno React 可以让我们在 Deno 的环境下使用 React，同时也可以享受到 Deno 的安全性和类型检查等功能。希望这篇文章可以帮助你开始学习如何使用 Deno React。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64533dc4968c7c53b07b08e7