使用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片段赋值给变量，UI片段不能作为函数返回值等等。假定我们有一个数组反转API，在React/Flutter 中我们可以直接把UI作为参数传递给函数。

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

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

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

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

shell 复制代码

npm install -g harmonyos-jsx

shell 复制代码

hsx --version

参考HarmonyOS开发文档创建初始化项目
进入项目目录，执行如下脚本hsx，如果是首次执行 此命令将会在ets目录下创建以下文件
- pages-tsx 目录：后续的tsx 源码目录
- arks-global.d.ts
- tsconfig.json
使用vscode 或其他你喜欢的IDE，打开项目目录
在entry/src/main/ets/pages-tsx目录创建和编写你的tsx文件即可。 hsx命令会实时把你的tsx文件编译为等效的ArkTS版本，通过鸿蒙的IDE可实时预览最新UI。

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