Kotlin For React创建一个React项目

最新推荐文章于 2024-03-23 09:40:23 发布

po破小孩

最新推荐文章于 2024-03-23 09:40:23 发布

阅读量752

点赞数

分类专栏：前端文章标签： react kotlin

本文链接：https://blog.csdn.net/qq_37063860/article/details/111874109

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Kotlin

Kotlin 是一门优秀的开发语言。它被广泛应用于Android开发，Google公司在2017年开发者大会中宣布了在Android上为Kotlin提供一等支持。但Kotlin的优秀不仅仅如此，JetBrains公司在设计这门语言之初就设想将它作为一门全能型开发语言使用。它不仅兼容Java语言并且继承了Java语言的一些特点，同时也继承了JavaScript语言的一些特点，使得它可以很好的编译成JavaScript代码。

React

React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。它的优秀前端开发者应该十分清楚。

联系

作为一个后端开发者，也想体验一下前端开发的感觉，前面提到Kotlin可以编译成JavaScript代码，而React又是基于JavaScript库的，那我们是不是可以用Kotlin来开发React。所以我发现了https://github.com/JetBrains/kotlin-wrappers这个项目，它是Kotlin官方提供的支持React的库，使用它我们可以愉快的开发React项目。

创建一个项目

首先确保你的IDEA是最新版。

在IDEA中，选择新建项目，在左侧面板选择kotlin，选择React Application作为项目模板，然后单击Next。

在这里插入图片描述

根据需要选择复选框，至少要选择CSS Support和Use styled-components复选框。如果你希望在你的项目中支持React-Router那么选择Use react-router-dom复选框，如果你希望使用react-redux那么选择Use react-redux复选框，然后单击Finish。

在这里插入图片描述

构建完成后的项目结构如下，它会自动生成一个欢迎页面：

在这里插入图片描述

运行项目

点击红色三角形运行项目，BrowserProductionRun in continuous mode是生产模式运行项目，该模式下不会输出错误信息，BrowserDevelopmentRun in continuous mode是开发模式运行项目，会输出错误信息。

在这里插入图片描述

默认会自动打开浏览器显示页面，如果没有打开可以通过http://localhost:8080/访问页面。
在这里插入图片描述

分析

让我们分析一下Kotlin版的React代码。

在resources文件夹下有一个index.html文件，程序运行时会首先加载该文件，可以看到他引入了以项目名称命名的js文件。这个文件就是由我们写的Kotlin代码编译后生成的文件，一个id为root的div标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS Client</title>
</head>
<body>
<script src="kotlin_for_react_demo.js"></script>
<div id="root"></div>
</body>
</html>

client.kt是项目的入口文件，该文件中包含一个main函数，它注册了window的onload事件，在页面加载之初会获取到id为root的标签对其进行渲染之后显示到页面上。它调用child函数将Welcome组件作为他的child，并通过props传递参数name = "Kotlin/JS"

fun main() {
    window.onload = {
        render(document.getElementById("root")) {
            child(Welcome::class) {
                attrs {
                    name = "Kotlin/JS"
                }
            }
        }
    }
}

Welcome.kt 定义了继承自RProps接口的WelcomeProps接口用于接收Props参数，继承自RState的WelcomeState作为组件状态，以及Welcome组件。styledDiv描述了带css的div标签，+“Hello, ${state.name}” 用来显示div内容，styledInput描述了带css的input标签，使用attrs设置Input标签的属性及监听函数。如果想使用不带css类的div标签可以使用div(classes=""){}函数，传入原生css类，只需要在index.html文件中引入css文件就可以了。

external interface WelcomeProps : RProps {
    var name: String
}

data class WelcomeState(val name: String) : RState

@JsExport
class Welcome(props: WelcomeProps) : RComponent<WelcomeProps, WelcomeState>(props) {

    init {
        state = WelcomeState(props.name)
    }

    override fun RBuilder.render() {
        styledDiv {
            css {
                +WelcomeStyles.textContainer
            }
            +"Hello, ${state.name}"
        }
        styledInput {
            css {
                +WelcomeStyles.textInput
            }
            attrs {
                type = InputType.text
                value = state.name
                onChangeFunction = { event ->
                    setState(
                        WelcomeState(name = (event.target as HTMLInputElement).value)
                    )
                }
            }
        }
    }
}

WelcomeStyles.kt 是css描述类，用来定义css属性。

object WelcomeStyles : StyleSheet("WelcomeStyles", isStatic = true) {
    val textContainer by css {
        padding(5.px)

        backgroundColor = rgb(8, 97, 22)
        color = rgb(56, 246, 137)
    }

    val textInput by css {
        margin(vertical = 5.px)

        fontSize = 14.px
    }
}