Kotlin For React创建一个React项目

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是最新版。

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

Kotlin For React创建一个React项目_第1张图片

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

Kotlin For React创建一个React项目_第2张图片

  1. 构建完成后的项目结构如下,它会自动生成一个欢迎页面:

Kotlin For React创建一个React项目_第3张图片

运行项目

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

Kotlin For React创建一个React项目_第4张图片

默认会自动打开浏览器显示页面,如果没有打开可以通过http://localhost:8080/访问页面。
Kotlin For React创建一个React项目_第5张图片

分析

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

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS Clienttitle>
head>
<body>
<script src="kotlin_for_react_demo.js">script>
<div id="root">div>
body>
html>
  1. 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"
                }
            }
        }
    }
}
  1. 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)
                    )
                }
            }
        }
    }
}
  1. 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
    }
} 
  1. 生成的html页面结构如下:
    Kotlin For React创建一个React项目_第6张图片

可以看到与我们代码中的结构类似。

扩展

为页面添加一个img标签。在welcome组件的styledInput函数后加入以下代码

div {
    img(src = "img.png"){}
}

该项目支持热更新,ctrl+s保存就可以在浏览器中看到更新的代码。
Kotlin For React创建一个React项目_第7张图片

后续

Kotlin For React提供了react常用组件库,并且支持导入npm包,可以构建起强大的Web前端项目。

你可能感兴趣的:(前端,react,kotlin)