# 第一个微应用
使用 CLI 1.2.0 创建包含 React 微应用的 Astro shell，并完成首次挂载验证。
## 你将获得什么
你将打开包含 React 应用的页面并操作计数器。**WU 负责在页面内部显示该应用。** 这个过程称为挂载**微应用**或微前端。
承载它的页面称为 **shell**。本流程用 Astro 构建 shell，用 React 构建微应用；自己的项目也可选择其他框架。
汇集两者的目录称为 **workspace**，通过 **CLI**，即终端的 `wu` 命令创建。CLI 准备文件并运行开发工具；`wu-framework` 软件包则是在浏览器挂载应用的 **runtime**。
## 1. 准备环境
使用 **Node 24** 和 npm。在准备创建项目的目录打开终端，检查 Node 版本：
```sh
node --version
npm --version
```
首个命令应输出 `v24.x.x`。安装本流程使用的 CLI，并检查版本：
```sh
npm install --global @wu-framework/cli@1.2.0
wu --version
```
最后一个命令应输出 `wu 1.2.0`。若找不到 `wu` 或使用其他 Node 版本，请先阅读[安装与版本](/zh-cn/docs/cli/installation/)。
## 2. 创建 shell 和 React
`mi-plataforma` 目录此时应尚不存在。运行：
```sh
wu create mi-plataforma --template react --shell astro
cd mi-plataforma
```
命令生成 Astro shell 和 React 微应用。将用到以下部分：
```text
mi-plataforma/
├── shell/ # Página anfitriona Astro
├── mf-mi-plataforma/ # Microapp React
├── wu.config.json # Configuración del workspace
└── package.json
```
应用名为 `mi-plataforma`，目录带 `mf-` 前缀。**接下来的命令都在此根目录运行**，即 `wu.config.json` 所在位置。所需配置已经生成。
## 3. 安装并启动
安装依赖，并等待命令成功完成：
```sh
wu install
```
随后启动服务器，保持终端打开：
```sh
wu dev --native --port 3000 --no-open
```
终端提示开始监听后，打开 [http://127.0.0.1:3000](http://127.0.0.1:3000)。此模式下，WU 从端口 3000 提供 shell 和微应用。首次启动还会构建 Astro shell，可能需要更长时间。
## 4. 检查第一个应用
CLI 1.2.0 模板包含起始页和计数器：
1. 打开页面后，找到 **Overview**、**Welcome to WU** 和应用 `mi-plataforma`。
2. 点击导航或卡片中的 **mi-plataforma**，应看到 **React**、名称 `mi-plataforma`，以及 **Interactions** 下的计数器。
3. 点击 **+**，数值从 **0** 变为 **1**；点击 **−** 返回 **0**。
4. 点击 **Overview** 返回起始页。
**你已用 WU 挂载微应用。** 导航显示名称证明应用已注册，看到组件并操作计数器则证明它已加载且能够响应。
刚使用的 React 组件位于 `mf-mi-plataforma/src/App.tsx`，宿主页面位于 `shell/src/pages/index.astro`。
## 内容没有出现时
| 现象 | 检查内容 |
| --- | --- |
| 端口 3000 被占用 | 停止另一服务器，或用 `--port` 选择其他端口，并打开相应 URL。 |
| `wu install` 以错误结束 | 启动服务器前先解决终端首个错误。参阅[诊断](/zh-cn/docs/cli/doctor/)。 |
| 页面响应 404 | 检查 Astro 初始构建是否失败。WU 正在监听不保证 shell 已构建。 |
| shell 能打开，但 React 为空 | 检查浏览器首个控制台或 JavaScript 加载错误，继续阅读[开发与重新加载](/zh-cn/docs/cli/development/)。 |
更多版本、依赖与开发模式说明
本教程使用 WU CLI **1.2.0** 和 **Node 24**。项目依赖在安装时解析，其版本不由 CLI 版本固定。请参阅[版本与分发](/zh-cn/sources/)，了解本文档覆盖的版本。
`wu install` 汇总 shell 和应用依赖，保留根目录自定义脚本与元数据，并运行配置的包管理器。在实际使用依赖的包中声明它。共享版本范围、冲突和目录详见[依赖与目录](/zh-cn/docs/cli/dependencies/)。
使用 `--native` 时，Astro 将 shell 构建到 `shell/dist/`，WU 提供该输出并在源码变化时重新构建。本示例不启动另一个 Astro 开发服务器。`wu.config.json` 的各应用端口用于替代模式 `--vite`；微应用编译仍使用 Node 工具。[查看两种模式](/zh-cn/docs/cli/development/)。
`wu.config.json`、`wu.json` 和 `wu.init()` 的区别见[各文件配置什么](/zh-cn/docs/guides/add-an-app/#qué-configura-cada-archivo)。
## 下一步
继续[添加第二个应用](/zh-cn/docs/guides/add-an-app/)，保留本项目并在 React 旁挂载 Vue 应用。
暂时只需要一个应用，也可直接进入[准备生产版本](/zh-cn/docs/guides/production/)，构建并检查输出。