kotlin 來寫 react

摘要： 最近在 Android 開發過程最先接觸到 kotlin，然後就產生興趣學習了一段時間。kotlin 不但開發服務端還可以開發 web 前端，可謂是處處開花。今天我們來體驗一下 kotlin， 上網搜尋一些相關資料，還真沒找到。 做一個小 Demo 體驗一下，根據官方文件...

最近在 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 寫寫看吧。