在 Kotlin 的体系下，似乎一切都变得很方便了，Ktjs x React 也是一直说要写但是一直也抽不出时间来，其实已经准备了很久了。和 Ktjs 的很多扩展方向不同，React 是 Kotlin 官方支持的，拥有非常优秀的开发体验，同样的也可以让 IDE 来生成很多东西。
一、新建一个 Ktjs x React 项目
在新建项目之前，我们需要先安装生成工具，安装到全局后可以直接使用，以后再建项目就不再需要安装工具了。
$ sudo npm install -g create-react-kotlin-app
完成后就可以直接建立项目了，非常简单，建立项目时，会同时下载相关的依赖:
$ create-react-kotlin-app my-app
此时已经建立好项目，我们可以用 npm start 或 yarn start 来启动一个服务，以便让我们可以在浏览器内直观的看到展示效果。
需要注意的是，start 只需一次，在修改项目代码的过程中，改动会实时的同步到浏览器内，不需要重启服务，甚至不需要手动刷新页面，一切都是自动的。
二、使用 IntelliJ IDEA 来打开项目
打开项目
打开后的项目结构如图所示，就这个项目来说，index 是默认的页面入口，app，logo 和 ticker 均是 React 组件，它们遵守 React 的一切规则。
三、自定义组件
在使用 Kotlin 建立 React 组件之前，建议先学习一下 React，有一个大致的了解后再进行。
一个自定义的组件代码是相当简单的，如下所示:
class MyComp(props: RProps) : RComponent<RProps, RState>(props) {
override fun RBuilder.render() {
+"This is my component."
}
}
fun RBuilder.mycomp() = child(MyComp::class) { }
在 RBuilder.render() 内的内容，即是需要被返回的内容，它可以是一个或一堆组件，也可以是一些 html 代码。
请注意，在 Kotlin 内，return 语句不是必要的，渲染的代码可以是:
override fun RBuilder.render() {
+"This is my component."
}
也可以是:
override fun RBuilder.render() {
return +"This is my component."
}
它们的作用完全一样。通常为了简便，在 Kotlin 内不写 return。
然后我们可以修改一下 App.kt，加入对 mycomp 的使用:
override fun RBuilder.render() {
... ...
p { mycomp() }
... ...
}
在浏览器看到以下效果后，说明我们的自定义组件已经成功的渲染到页面上了。
自定义组件
四、组件的刷新
对于大部分应用场景来说，静态的组件是没有意义的，要让页面能动起来，这需要用到 React 的刷新机制。
下面我们对 MyComp 做一点改造，让它可以接受参数:
interface MyProps: RProps {
var pass: Int
}
class MyComp(props: MyProps) : RComponent<MyProps, RState>(props) {
override fun RBuilder.render() {
+"This is my component, ${props.pass}."
}
}
fun RBuilder.mycomp(pass: Int) = child(MyComp::class) { attrs.pass = pass }
然后把 App.kt 内的使用改为带参的调用:
override fun RBuilder.render() {
... ...
p { mycomp(0) }
... ...
}
保存后页面自动刷新，即可看到可以传入数据了。
那么如何更新数据呢？对于组件内部的刷新，可以参考生成的项目中 Ticker.kt，这段代码完成了一个计时器的组件，并且不断在自我刷新。
那么如果要从外部进行刷新怎么办呢？下面给大家一些简单的代码，当然也是遵从 React 的:
var pass = 0
override fun RBuilder.render() {
... ...
p { mycomp(pass) }
button {
+"Click"
attrs.onClickFunction = { setState { pass += 1 } }
}
}
把 mycomp() 内的参数换成 pass，然后调用 setState()，即可刷新使用了 pass 变量的组件。
五、发布 React 项目
在这个例子内，我们使用 npm start 或 yarn start 来启动服务，从而呈现页面。而正式发布时，就不应该这么用了，我们需要正规的发布手段。
在项目根目录内执行以下命令可以对当前编辑的代码进行发布操作:
$ yarn build
完成后可以在项目根目录下找到 build 目录，其中所有的文件均是用于发布的。如果要验证这些文件，我们可以使用 simplehttp2server，如果没有该命令，可以这样安装:
$ brew tap GoogleChrome/simplehttp2server https://github.com/GoogleChrome/simplehttp2server
$ brew install simplehttp2server
然后我们 cd 到 build 目录，执行 simplehttp2server 即可跑起一个简单的服务器，用来验证页面效果是再好不过的了。
网友评论