🚀 写在前面

最近，“HarmonyOS NEXT”、“纯血鸿蒙”、“不再兼容 Android”等关键词频繁刷屏。作为前端开发者，你是否也在思考：

“我需要学鸿蒙开发吗？难不难？和 React 差别大吗？”

好消息是：如果你会 React，你已经掌握了 HarmonyOS 开发的核心思维！

本文将从 React 开发者视角出发，带你用最熟悉的逻辑，快速跑通第一个 HarmonyOS 应用。你会发现：ArkTS 不过是“带原生 UI 能力的 React”。

---

🔧 1. 开发环境搭建：从 create-react-app 到 DevEco Studio

React 方式

npx create-react-app my-app
cd my-app
npm start

HarmonyOS 方式

1. 下载 DevEco Studio（华为官方 IDE，基于 IntelliJ）
2. 安装时勾选 HarmonyOS NEXT SDK
3. 创建新项目 → 选择 Application → Empty Ability (Stage 模型)

✅ 为什么选 Stage 模型？
这是 HarmonyOS 官方推荐的现代应用模型，类似 React 18 的并发模式——新项目必须用它。

创建完成后，你会看到如下目录结构：

MyApp/
├── src/main/ets/pages/Index.ets       # ← 主页面组件（相当于 App.tsx）
├── src/main/module.json5             # ← 路由、权限、能力配置
├── build-profile.json5               # ← 构建配置
└── oh-package.json5                  # ← 依赖管理（类似 package.json）

是不是有种“似曾相识”的感觉？

---

🏗️ 2. 入口文件解析：@Entry = 你的 ReactDOM.render()

在 React 中，应用入口是：

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

而在 HarmonyOS 中，你只需在 Index.ets 中写：

// src/main/ets/pages/Index.ets
@Entry          // ← 标记为页面入口（相当于 ReactDOM.render）
@Component      // ← 标记为 UI 组件
struct Index {  // ← 组件名（必须大写）
  build() {
    Column() {
      Text('Hello, HarmonyOS!')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

关键规则

• 一个 .ets 文件中，最多只能有一个 @Entry
• build() 方法 ≈ return (JSX)
• 所有 UI 通过 链式方法调用 构建（无 JSX）

运行后，模拟器将显示：

---

🔄 3. 核心概念映射表（React → ArkTS）

React 概念	HarmonyOS (ArkTS)	说明
function Component() {}	@Component struct Component { build() {} }	组件定义
ReactDOM.render(<App />)	@Entry @Component struct App	页面入口
.tsx 文件	.ets 文件	UI 文件扩展名
useState	@State	响应式状态（下期详解）
props	@Prop / @Link	父子通信
useEffect	aboutToAppear() / aboutToDisappear()	生命周期钩子

💡 核心思想一致：声明式 UI + 响应式状态驱动更新。

---

⚠️ 4. 新手常见错误（避坑指南）

❌ 错误 1：多个 @Entry

@Entry @Component struct A { /*...*/ }
@Entry @Component struct B { /*...*/ } // ❌ 编译失败！

✅ 正确：每个页面文件仅允许一个入口组件。

❌ 错误 2：缺少 @Component

@Entry
struct Index { /*...*/ } // ❌ 无法作为 UI 组件

✅ 正确：@Entry 必须与 @Component 成对使用。

❌ 错误 3：用普通变量代替响应式状态

build() {
  let msg = 'hello'; // ❌ 不会触发 UI 更新！
}

✅ 正确：使用 @State 声明状态（见第三期期）。

---

小结

• ✅ 你已成功搭建 HarmonyOS 开发环境
• ✅ 你理解了 @Entry 就是你的 ReactDOM.render()
• ✅ 你写出了第一个可运行的鸿蒙页面

这不是从零开始，而是带着 React 的经验，向全场景开发迈出的第一步。

---

系列名称：《React 开发者的鸿蒙入门指南》

---

🔜 下期预告

《@Component + struct = 你的新函数组件》
我们将深入：

• 为什么鸿蒙用 struct 而不是 function 定义组件？
• 如何像写 React 函数组件一样，传递 props、组合 UI？
• build() 方法和 return (JSX) 有何异同？

关注我，不错过每一篇 React → 鸿蒙实战指南！

---

📚 参考资料

• HarmonyOS 官方文档
• DevEco Studio 下载
• ArkTS 语言规范

---

✅ 欢迎点赞、收藏、评论交流！你的支持是我持续输出的动力！
✅ 点击主页关注，获取更多前端 × 鸿蒙实战内容！

---

💬 互动提问：你第一次看到 @Component struct 时，第一反应是什么？