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