Help us understand the problem. What is going on with this article?

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

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)の補完やインポートが便利なため悪くないと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした