HarmonyOS APP＜玩转React＞开源教程一：开发环境搭建与项目创建

第1次：开发环境搭建与项目创建

如果需要看上架项目 可以在华为应用市场 搜索《玩转React》，也有姐妹篇《vue开发教程》
本次课程将带你完成 HarmonyOS 开发环境的搭建，创建第一个项目，并了解项目的基本结构。这是整个教程的起点，请确保每一步都正确完成。

学习目标

• 了解 HarmonyOS 开发生态
• 安装并配置 DevEco Studio 开发工具
• 创建第一个 HarmonyOS 项目
• 理解项目目录结构
• 掌握基本的运行与调试方法

1.1 HarmonyOS 开发环境介绍

什么是 HarmonyOS？

HarmonyOS（鸿蒙操作系统）是华为开发的面向万物互联时代的分布式操作系统。它具有以下特点：

• 分布式架构：支持多设备协同
• 一次开发，多端部署：代码可运行在手机、平板、智能穿戴等设备
• 流畅安全：确定时延引擎和高安全性设计

开发语言：ArkTS

ArkTS 是 HarmonyOS 的主力开发语言，它基于 TypeScript 扩展而来，具有以下特点：

TypeScript 语法基础
↓
+ 声明式 UI 语法
↓
+ 状态管理装饰器
↓
= ArkTS

开发框架：ArkUI

ArkUI 是 HarmonyOS 的 UI 开发框架，采用声明式编程范式：

// 声明式 UI 示例
@Entry
@Component
struct HelloWorld {
build() {
Column() {
Text('Hello, HarmonyOS!')
.fontSize(24)
.fontWeight(FontWeight.Bold)
}
}
}

1.2 DevEco Studio 安装与配置

下载 DevEco Studio

Windows 安装步骤

macOS 安装步骤

首次启动配置

首次启动 DevEco Studio 时，需要完成以下配置：

1.3 创建第一个 HarmonyOS 项目

创建新项目

等待项目初始化

项目创建后，DevEco Studio 会自动：

• 下载项目依赖
• 构建项目索引
• 同步 Gradle 配置

右下角会显示进度，等待完成即可。

1.4 项目目录结构详解

创建完成后，项目结构如下：

ReactTutorial/
├── .hvigor/ # 构建缓存目录
├── AppScope/ # 应用级配置
│ ├── app.json5 # 应用配置文件
│ └── resources/ # 应用级资源
│ └── base/
│ ├── element/ # 字符串等元素
│ └── media/ # 图片资源
├── entry/ # 主模块（重点关注）
│ ├── src/
│ │ └── main/
│ │ ├── ets/ # ArkTS 源代码
│ │ │ ├── entryability/
│ │ │ │ └── EntryAbility.ets # 应用入口
│ │ │ └── pages/
│ │ │ └── Index.ets # 首页
│ │ ├── resources/ # 模块资源
│ │ └── module.json5 # 模块配置
│ ├── build-profile.json5 # 构建配置
│ └── oh-package.json5 # 依赖配置
├── hvigor/ # 构建工具配置
├── oh-package.json5 # 项目依赖
└── build-profile.json5 # 项目构建配置

核心文件说明

1. AppScope/app.json5 – 应用配置

{
"app": {
"bundleName": "com.example.reacttutorial", // 应用包名
"vendor": "example", // 开发者
"versionCode": 1000000, // 版本号
"versionName": "1.0.0", // 版本名
"icon": "$media:app_icon", // 应用图标
"label": "$string:app_name" // 应用名称
}
}

2. entry/src/main/module.json5 – 模块配置

{
"module": {
"name": "entry", // 模块名
"type": "entry", // 模块类型
"description": "$string:module_desc",
"mainElement": "EntryAbility", // 入口 Ability
"deviceTypes": ["phone"], // 支持设备
"pages": "$profile:main_pages", // 页面配置
"abilities": [
{
"name": "EntryAbility",
"srcEntry": "./ets/entryability/EntryAbility.ets",
"icon": "$media:layered_image",
"label": "$string:EntryAbility_label",
"exported": true,
"skills": [
{
"entities": ["entity.system.home"],
"actions": ["ohos.want.action.home"]
}
]
}
]
}
}

3. entry/src/main/ets/pages/Index.ets – 首页

@Entry
@Component
struct Index {
@State message: string = 'Hello World';

build() {
RelativeContainer() {
Text(this.message)
.id('HelloWorld')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
}
.height('100%')
.width('100%')
}
}

4. entry/src/main/resources/base/profile/main_pages.json – 页面路由

{
"src": [
"pages/Index"
]
}

1.5 运行与调试基础

方式一：使用预览器（Preview）

最快速的预览方式，适合 UI 开发：

优点：速度快，实时刷新
缺点：部分 API 不支持

方式二：使用模拟器（Emulator）

完整的运行环境：

方式三：使用真机调试

最真实的运行环境：

调试技巧

查看日志

// 在代码中添加日志
console.info('这是一条信息日志');
console.warn('这是一条警告日志');
console.error('这是一条错误日志');

在 DevEco Studio 底部的 “Log” 面板查看输出。

断点调试

1.6 实操：创建 ReactTutorial 项目并成功运行

现在，让我们动手创建本教程的实战项目。

步骤 1：创建项目

按照 1.3 节的步骤创建项目，使用以下配置：

步骤 2：修改首页代码

打开 entry/src/main/ets/pages/Index.ets，替换为以下代码：

/**
* React 学习教程 App – 首页
* 第1次课程实操代码
*/
@Entry
@Component
struct Index {
@State message: string = 'React 学习教程';
@State subTitle: string = '由浅入深，系统掌握 React';

build() {
Column() {
// 应用图标
Text('⚛️')
.fontSize(80)
.margin({ top: 100 })

// 主标题
Text(this.message)
.fontSize(28)
.fontWeight(FontWeight.Bold)
.fontColor('#1a1a2e')
.margin({ top: 20 })

// 副标题
Text(this.subTitle)
.fontSize(16)
.fontColor('#495057')
.margin({ top: 8 })

// 开始按钮
Button('开始学习')
.width(200)
.height(48)
.fontSize(16)
.fontColor('#ffffff')
.backgroundColor('#61DAFB')
.borderRadius(24)
.margin({ top: 60 })
.onClick(() => {
console.info('点击了开始学习按钮');
this.message = '欢迎开始学习！';
})

// 版本信息
Text('v1.0.0')
.fontSize(12)
.fontColor('#adb5bd')
.margin({ top: 40 })
}
.width('100%')
.height('100%')
.backgroundColor('#f8f9fa')
.justifyContent(FlexAlign.Start)
.alignItems(HorizontalAlign.Center)
}
}

步骤 3：运行项目

预期效果

运行成功后，你将看到：

┌─────────────────────────┐
│ │
│ ⚛️ │
│ │
│ React 学习教程 │
│ 由浅入深，系统掌握 React │
│ │
│ ┌──────────────┐ │
│ │ 开始学习 │ │
│ └──────────────┘ │
│ │
│ v1.0.0 │
│ │
└─────────────────────────┘

点击按钮后，标题会变为"欢迎开始学习！"

本次课程小结

通过本次课程，你已经：

✅ 了解了 HarmonyOS 开发生态和 ArkTS 语言
✅ 成功安装并配置了 DevEco Studio
✅ 创建了第一个 HarmonyOS 项目
✅ 理解了项目的目录结构
✅ 掌握了预览、模拟器、真机三种运行方式
✅ 完成了首页的基础代码编写

课后练习

下次预告

第2次：ArkTS 语言基础

我们将深入学习 ArkTS 语言的核心语法，包括：

• 数据类型与变量
• 函数与箭头函数
• 类与接口
• 模块系统

这些知识将为后续的项目开发打下坚实基础。