[Ktjs x React] 新手上路啦！

在 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(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(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 即可跑起一个简单的服务器，用来验证页面效果是再好不过的了。