Kotlin~MPP~ 【フロントエンド React編】

概要

公式のチュートリアルをしてみたのでそのまとめです
Create React Kotlin App
公式チュートリアル

準備

以下をダウンロード
npm Download/Install
yarn Download/Install
IntelliJ IDEA Download/Install

プロジェクト作成

$ yarn create react-kotlin-app <プロジェクト名>

最初のページ作成

main関数はKotlinプログラムのエントリポイントです。
main関数内にrender関数を記述します。

Main.kt

fun main() {
    // ここはお決まり
    render(document.getElementById("root")) {
        // <h1>Hello</h1>タグはReact.ktでは以下のようになります。
        h1 {
            // ※文字列を表示したい場合は先頭に『+』を記述する必要があります。
            +"Hello"
        }
    }
}

componentの作成

クラスコンポーネント

MyClassComponent.kt

interface State : RState {
    var name: String
}

inteface Props : RProps {
    var text: String
}

class MyClassComponent(props: Props) : RComponent<Props, State>(props) {
    override fun MyClassComponent.init() {
        // stateの初期化
        text = "MyClassComponent"
    }

    override fun RBuilder.render() {
        div {
            h1 {
                +"${props.text} ${state.name}"
            }
        }
    }
}

fun RBuiler.myClassComponent: ReactElement {
    return child(MyClassComponent::class) {}
}

ファンクションコンポーネント

myFunctionComponent.kt

fun RBuilder.myFunctionComponent(text: String): ReactElement {
    return h1 {
        +"${text} myFunctionComponent"
    }
}

呼び出しかた

Main.kt

fun main() {
    render(document.getElementById("root")) {
        myClassComponent {
            text = "Hello"
        }
        myFunctionComponent("Hello")
    }
}

Styleの適用

cssファイルを使用する場合

Main.kt

// main関数でrequire
fun main() {
    // src以下のcssを読み込む
    requireAll(require.context("src", true, js("/\\.css$/")))

    render(document.getElementById("root")) {
        h1("title") {
            +"Hello"
        }
    }
}

main.css

.title {
    color: #000;
    fontSize: 32px;
}

styled-componentを使用する場合

パッケージをインストール

$ yarn add @jetbrains/kotlin-css @jetbrains/kotlin-css-js @jetbrains/kotlin-styled inline-style-prefixer styled-components@4

Main.kt

// main関数でrequire
fun main() {
    render(document.getElementById("root")) {
        // styled + タグ名で「css{}」が使用できる
        styledH1 {
            css {
                color = Color("#fff")
                fontSize = 32.px
            }
            +"Hello"
        }
    }
}

npmパッケージの使用

kotlinでjsのモジュールを呼び出すには一手間必要です。
サンプル：react-playerを呼び出す。

jsの場合

import ReactPlayer from 'react-player'
// ...
<ReactPlayer
  url={url}
/>

kotlinの場合

モジュールの設定

@file:JsModule("react-player")

import react.*
// jsの「export default」のこと
@JsName("default")
external val ReactPlayer: RClass<ReactPlayerProps>

external interface ReactPlayerProps : RProps {
    var url: String
}

呼び出し

// ...
ReactPlayer { attrs.url = url }

REST APIの使用

ブラウザのfetchを使用した場合

fun fetchData() {
    window.fetch("https://url").then {
        it.json().then {
            return it
        }
    }
}

coroutinesを使用(async/await)

suspend fun fetchData() =
    window.fetch("https://url")
                    .await()
                    .json()
                    .await()

感想

npmのモジュールを使用する際に一手間かかるのとHooksが使用できない（ライブラリーがあるかも？）点が少し不便だと感じました。

ただkotlinで書くので、コルーチンや型の安全性、便利なkotlin組み込み関数などが使用でき、IDE(IntelliJ IDEA)の補完やインポートが便利なため悪くないと思います。