使用 Wing 创建 React 应用
ReactJS 库已经面世很久了，我们都非常了解它的强大功能。我们都知道如何使用 ReactJS 构建用户界面、创建组件等等。如果您还不了解 React，网上有很多免费资源可供您使用。
在本博客中，我们将学习 Wing 以及如何创建一个连接到 Wing 后端的 React 应用。
Wing 是全球首个可在云服务上运行的云编程语言。Wing 使开发者能够轻松构建和部署云应用程序。Wing 支持在单一模型中编写基础设施代码（Terraform）和应用程序代码。
Wing 提供了一个名为“cloud”的标准库，其中包含一个名为“Api”的方法。Api 方法代表了一系列可通过互联网由客户端调用的 HTTP 端点。此 API 方法可用于创建 API，该 API 可用作后端 API 来存储和获取数据。
您可以在playground 功能中体验 Winglang 语言并了解其工作原理。
让我们创建一个 React 应用，并将其连接到使用 Wing 创建的 API。
安装
在您的设备上安装Wing 工具链。请确保您的设备上已安装 Node.js 18.13.0 或更高版本。要安装 Wing 工具链，请在您的设备上运行以下命令：
npm install -g winglang
安装VS Code应用商店中的 Wing VS Code 扩展。
您可以查看已安装的 Wing CLI 版本：
wing --version
创建项目
在文件系统中创建项目目录，并为其指定所需的名称。在 VS Code 中打开此目录。在项目目录中创建一个名为 backend 的目录。
在后端目录中创建一个名为“main.w”的文件，并将以下代码粘贴到该文件中：
bring cloud;
let queue = new cloud.Queue();
let bucket = new cloud.Bucket();
let counter = new cloud.Counter();
queue.setConsumer(inflight (body: str): void => {
let next = counter.inc();
let key = "key-{next}";
bucket.put(key, body);
});
注意：如果您在整个过程中遇到任何问题，我们建议您加入我们的Slack 频道。
在本地运行 Wing 工具链，检查其是否按预期工作。在终端中运行以下命令：
wing run backend/main.w
输出显示内容为：
这是 Wing 控制台，它用作模拟器，您可以在其中尝试、测试和试验云应用程序，以查看它是否正常工作。
创建 React 应用
现在让我们创建一个 React 应用作为前端，然后将其连接到我们创建的 Wing 后端。
我们将使用它create-react-app在您的项目目录中创建 React 应用。请确保您位于主项目目录中，而不是后端目录中。
打开一个新的终端窗口，并运行以下命令：
npx create-react-app client
cd client
npm i --save @babel/plugin-proposal-private-property-in-object
npm start
一旦看到 React 应用成功运行，就可以使用以下命令关闭服务器CTRL+C。
连接 Wing 后端
现在，我们将把 Wing 后端连接到我们的 React 应用。这将允许我们从 Wing 后端获取数据并将其显示在用户界面上。
打开backend/main.w文件并将其内容替换为以下内容：
适用于 Windows 系统：
bring ex;
bring cloud;
let react = new ex.ReactApp(
useBuildCommand: true,
projectPath: "../client",
buildCommand: "npm run start",
);
对于 Linux 系统：
bring ex;
bring cloud;
let react = new ex.ReactApp(
projectPath: "../client",
);
wing run终止正在运行该程序的终端CTRL+C，然后再次运行该程序，并设置BROWSER=none环境变量：
适用于 Windows 系统：
set BROWSER=none
wing run backend/main.w
适用于 Linux/Mac 系统：
BROWSER=none wing run backend/main.w
BROWSER=none将限制 React 每次运行时都打开一个新的浏览器窗口。
现在，您的 React 应用已成功运行并连接到 Wing 工具链后端。
从后端向前端传递配置
Wing 会生成一个wing.js文件client/public/wing.js，将配置从 Wing 后端传递到前端代码。
该文件的当前内容将包含：
// This file is generated by Wing
window.wingEnv = {};
将以下代码添加到backend/main.w：
react.addEnvironment("key1", "value1");
运行过程wing run会将此键值对添加到client/public/wing.js：
// This file is generated by wing
window.wingEnv = {
"key1": "value1"
};
现在，你需要将前端代码链接到该wing.js文件。请将以下代码复制并粘贴到client/public/index.html文件中，放在 ` <title><head>` 标签上方：
<script src="./wing.js"></script>
我们将从后端获取标题并将其显示在 React 应用中。请将文件中大约第 18 行的“Learn React”字符串替换为以下代码client/src/App.js：
{window.wingEnv.title || "Learn React"}
此表达式会显示从 React 应用中的 wingEnv 对象动态获取的标题。如果 wingEnv 对象没有 title 属性，或者 window.wingEnv.title 的值为 false，则会显示默认标题“学习 React”。
返回backend/main.w并添加以下代码：
react.addEnvironment("title", "Learn React with Wing");
这会将title密钥添加到文件中的保留Learn React with Wing消息中wing.js。
从后端获取标题
现在我们知道了如何从客户端向后端传递参数（数据）。我们可以利用这种方法在window.wingEnv.apiUrl客户端设置标题，并从后端获取标题。
我们需要通过在文件中添加以下代码来启用跨域资源共享（CORS）backend/main.w：
let api = new cloud.Api(
cors: true
);
apiUrl这将把后端 API 的密钥和当前 URL添加到main.w文件中。
/title在后端 API 中创建路由。将以下代码添加到backend/main.w文件中：
api.get("/title", inflight () => {
return {
status: 200,
body: "Hello from the API"
};
});
当向端点发出 GET 请求时/tite，服务器将以 HTTP 状态代码 200 和消息进行响应Hello from the API。
您可以根据需要更改此正文消息。
请将以下代码替换为以下内容client/src/App.js：
import logo from './logo.svg';
import { useEffect, useState } from "react";
import './App.css';
function App() {
const [title, setTitle] = useState("Default Value");
const getTitle = async () => {
const response = await fetch(`${window.wingEnv.apiUrl}/title`);
setTitle(await response.text());
}
useEffect(() => {
getTitle();
}, []);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
{title}
</header>
</div>
);
}
export default App;
在这里，我们使用fetch方法从后端 API 获取标题，useState并useEffect使用钩子将获取的标题存储在title变量中。
最终输出结果为：
恭喜！您已成功创建了一个 React 应用，该应用正在从 Wing 工具链后端获取数据。
这样就可以在 Winglang 后端存储数据，并从后端获取数据以在前端 UI 上显示。
遇到任何问题？请观看我们的视频教程，我们已在视频中详细讲解了整个过程：