背景
鸿蒙提供了基于自研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开发鸿蒙原生应用。
- 首次使用需全局安装
harmonyos-jsx。
npm install -g harmonyos-jsx
- 安装成功之后会提供
hsx命令。 执行–version 判断是否安装成功
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。
原文链接：https://juejin.cn/post/7313768894588682266 作者：ykforerlang
