kotlin 来写 react

最近在 Android 开发过程最先接触到 kotlin，然后就产生兴趣学习了一段时间。kotlin 不但开发服务端还可以开发 web 前端，可谓是处处开花。今天我们来体验一下 kotlin， 上网搜索一些相关资料，还真没找到。
做一个小 Demo 体验一下，根据官方文档搭建项目，运行下面命令就行。

create-react-kotlin-app my-app

先从入口文件入手，index.kt 中的 main 函数入口函数，应用就从这里开始。

fun main(args: Array<String>) {
    requireAll(require.context("src", true, js("/\\.css$/")))

    render(document.getElementById("root")) {
        app()
    }
}

• requireAll 获取资源文件
• render 函数确定将我们应用渲染在哪个 dom 下，启动我们的应用。

package app

import react.*
import react.dom.*
import logo.*
import ticker.*

class App : RComponent<RProps, RState>() {
    override fun RBuilder.render() {
        div("App-header") {
            logo()
            h2 {
                +"Welcome to React with Kotlin"
            }
        }
        p("App-intro") {
            +"To get started, edit "
            code { +"app/App.kt" }
            +" and save to reload."
        }
        p("App-ticker") {
            ticker()
        }
    }
}

fun RBuilder.app() = child(App::class) {}

• RComponent 组件类
• RProps 为属性类
• RState 为状态类
  我们可以模仿地写一个 header 标题栏组件，其中定义为 div，然后给他一个样式类，修改他的样式属性，为 header 然后将 header 显示在界面就成功。

package header

import react.*
import react.dom.*
import kotlinext.js.*
import kotlinx.html.style

fun RBuilder.header(){
    div("header"){
        attrs.jsStyle.height = 100
        attrs.jsStyle.background = "#ffff00"
    }
}

不过资料太少，只有自己造轮子，我还是考虑用ocaml 写写看吧。