使用React-JSX编写你的鸿蒙原生应用

背景

鸿蒙提供了基于自研ArtTS的UI开发方式，ArtTS是鸿蒙原生应用后续主推的模式。 我们先通过HelloWorld了解下：

这是一种基于声明式的UI范式，还是很赞的。且第一开发语言是typescript这对前端同学还是很友好的。

不过，在使用ArkTS开发的过程中，越发觉得其UI语法的限制。 作为React重度使用者，习惯了JSX的灵活自由，使用ArtTS确实会觉得束手束脚。

所以这里提供一种使用JSX开发鸿蒙原生应用的方式，主要借助harmonyos-jsx库，github地址。

harmonyos-jsx会实时把你的tsx文件转化为等效的ArkTS，还你JSX的自由和灵活。需要注意的是 状态管理仍然需要使用鸿蒙提供的@State等机制。

先来看下ArkTS在编写UI都有哪些限制。

ArkTS的UI限制

在鸿蒙官方文档中以枚举的形式 ，说明了一下ArkTS的语法规范。

其实除了官方提到的这些限制，还有很多我们在开发中会遇到的问题，比如我们不能把一个UI片段赋值给变量，UI片段不能作为函数返回值等等。 假定我们有一个数组反转API， 在React/Flutter 中我们可以直接把UI作为参数传递给函数。

这里本质的原因在于：ArkTS并不把UI当成是编程中的普通数据来处理，UI需要一些特殊的编译过程。这会限制UI的表达能力。

也正因为如此，ArkTS还定义了条件渲染 ，循环渲染 这种特殊的概念。

这些概念在JSX里面是不存在的，一切按照你编程的习惯即可，你需要条件渲染自然而然if/三元表达式，你需要循环渲染自然而然数组遍历等等。

使用JSX开发鸿蒙原生应用

上面说了JSX的灵活自由，这里我们来看下如何使用JSX开发鸿蒙原生应用。

1. 首次使用需全局安装 harmonyos-jsx。

npm install -g harmonyos-jsx  

2. 安装成功之后会提供 hsx命令。 执行--version 判断是否安装成功

hsx --version  

3. 参考HarmonyOS开发文档 创建初始化项目

4. 进入项目目录，执行如下脚本hsx， 如果是首次执行 此命令将会在ets目录下创建以下文件

   • pages-tsx 目录： 后续的tsx 源码目录
   • arks-global.d.ts
   • tsconfig.json

5. 使用vscode 或其他你喜欢的IDE，打开项目目录

6. 在entry/src/main/ets/pages-tsx目录 创建和编写你的tsx文件即可。 hsx命令会实时把你的tsx文件编译为等效的ArkTS版本， 通过鸿蒙的IDE可实时预览最新UI。

结论

have fun！ github地址。欢迎大家issue mergerequest 和 star。