前言
Deno 是一个新的 JavaScript 和 TypeScript 运行时，由 Node.js 的创始人 Ryan Dahl 开发。与 Node.js 不同，Deno 内置了 TypeScript 支持，并且不依赖于 npm 包管理器。React 是一个流行的 JavaScript 库，用于构建用户界面。在本文中，我们将探索使用 Deno 和 React 构建全栈应用程序的过程。
安装 Deno
要开始使用 Deno，需要在计算机上安装它。可以在 Deno 的官方网站上找到有关安装的说明。在安装 Deno 之后，可以通过运行以下命令来验证安装是否成功：
deno --version
安装 React
React 可以通过 npm 包管理器进行安装。但是，在本教程中，我们将使用 Deno 的内置模块来安装 React。在终端中运行以下命令：
deno install --allow-read --allow-net https://deno.land/x/install/install.ts
然后，我们可以使用以下命令安装 React：
deno run --allow-read --allow-net https://deno.land/x/install/install.ts --unstable --import-map=https://deno.land/x/react/import_map.json --name react https://esm.sh/react
创建项目
我们将使用 Deno 和 React 创建一个简单的全栈应用程序。首先，创建一个名为 deno-react-app 的新目录。在此目录中，创建一个名为 server.ts 的文件和一个名为 client 的子目录。
mkdir deno-react-app cd deno-react-app touch server.ts mkdir client
在 client 目录中，创建一个名为 index.html 的文件和一个名为 index.tsx 的文件。
cd client touch index.html touch index.tsx
编写服务器代码
在 server.ts 文件中，我们将使用 Deno 和 Oak 框架创建一个简单的 HTTP 服务器。
-- -------------------- ---- ------- ------ - ------------ ------ - ---- --------------------------------- ----- --- - --- -------------- ----- ------ - --- --------- --------------- ----- -- - ----------------- - ------- -------- --- ------------------------- --------------------------------- ------------------- -- ------- -- ------------------------ ----- ------------ ----- ---- ---展开代码
在这个代码中，我们导入了 oak 模块，创建了一个 Application 实例和一个 Router 实例。然后，我们定义了一个路由，当客户端访问根路径时，返回 "Hello, world!"。最后，我们将路由和方法添加到应用程序中，并启动服务器监听端口 8000。
编写客户端代码
在 index.html 文件中，我们将创建一个简单的 HTML 模板，其中包含一个 div 元素，它将用于渲染 React 组件。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- --------------- -- ----------- - ----- ----------- ------- ------ ---- ---------------- ------- ------------- -------------------------- ------- -------展开代码
在 index.tsx 文件中，我们将创建一个简单的 React 组件，它将渲染到 div 元素中。
import React from "react"; const App = () => { return <h1>Hello, world!</h1>; }; ReactDOM.render(<App />, document.getElementById("root"));
运行应用程序
现在，我们已经编写了服务器和客户端代码。我们可以使用以下命令在终端中启动应用程序：
deno run --allow-net server.ts
然后，在浏览器中打开 http://localhost:8000，将会看到 "Hello, world!"。这表示我们的服务器正在正常工作。
接下来，我们需要在 index.js 文件中编写一些代码，以便将 React 组件渲染到 div 元素中。我们可以使用以下命令在终端中启动开发服务器：
cd client deno run --allow-net --allow-read --allow-write --allow-plugin --unstable --watch --import-map=https://deno.land/x/react/import_map.json --config tsconfig.json https://deno.land/x/aleph/cli.ts dev
结论
在本教程中，我们学习了如何使用 Deno 和 React 构建全栈应用程序。我们创建了一个简单的 HTTP 服务器，使用 Deno 和 Oak 框架。我们还创建了一个简单的 React 组件，并将其渲染到 HTML 模板中。最后，我们启动了应用程序，并在浏览器中查看了结果。这个教程只是一个起点，可以通过学习更多的 Deno 和 React 的功能来扩展它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676bc21278388e33bb27139f
