Kotlin/JS for React 入门

最终更新: %latestDocDate%

本教程演示如何在 IntelliJ IDEA 中使用 Kotlin/JS for React 创建一个前端应用程序.

开始之前, 请安装 IntelliJ IDEA 的最新版本.

创建一个应用程序

安装 IntelliJ IDEA 后, 就可以创建你的第一个 Kotlin/JS with React 前端应用程序了.

在 IntelliJ IDEA 中, 选择 File | New | Project.
在左侧面板中, 选择 Kotlin Multiplatform.
输入项目名称, 选择 React Application 作为项目模板, 然后点击 Next.
你的项目默认会使用 Gradle 和 Kotlin DSL 作为构建系统.
接受下一个画面中的默认配置, 并点击 Finish. 你的项目会打开.
打开 build.gradle.kts 文件, 这是根据你的配置默认创建的构建脚本. 它包含你的前端应用程序所需要的 kotlin("js") plugin 和依赖项. 请确认使用了插件的最新版本:
plugins { kotlin("js") version "{{ site.data.releases.latest.version }}" }

点击屏幕顶部运行配置旁边的 Run, 启动应用程序.

你的默认 Web 浏览器会打开你的前端应用程序 URL http://localhost:8080/.

在文本框中输入你的名字, 然后可以收到你的应用程序给你的问候!

打开 src/main/kotlin 中的 Welcome.kt 文件. src 目录包含 Kotlin 源代码文件和资源. Welcome.kt 文件包含示例代码, 描绘你刚才看到的Web 页面.
修改 div 代码, 反转显示你的名字.
- 使用标准库函数 reversed() 反转你的名字.
- 使用字符串模板表示你反转后的名字, 添加一个 $ 符号, 然后将表达式包在括号内 – ${state.name.reversed()}.
div { css { padding = 5.px backgroundColor = rgb(8, 97, 22) color = rgb(56, 246, 137) } +"Hello, $name" +" Your name backwards is ${name.reversed()}!" }
将你的修改保存到文件.
到浏览器查看结果. 只有你的前一个应用程序还在继续运行, 你才会看到修改后的结果. 如果你停止了你的应用程序, 请重新运行它.

打开 src/main/kotlin 中的 Welcome.kt 文件.
添加一个 div 容器, 其中包含一个图片子元素 img, 放在 input 代码段之后.
按照 IDE 的建议, 导入 react.dom.html 包中所有需要的元素.

div {
     img {
         src = "https://placekitten.com/408/287"
     }
 }

button {
     onClick = {
         name = "Some name"
     }
     +"Change name"
 }

创建过你的第一个应用程序之后, 你可以完成比较长的 Kotlin/JS 教程, 或者查看 Kotlin/JS 示例项目寻找启发. 这两种资源都包含有用的代码片段和模式, 可以用作你自己项目的一个很好的起点.

教程 - 使用 React 和 Kotlin/JS 创建 Web 应用程序指导你使用 React 框架创建一个简单的 Web 应用程序, 演示用于 HTML 的类型安全的 Kotlin DSL 如何简化 reactive DOM 元素的构建工作, 并展示如何使用第三方 React 组件, 以及如何通过 API 获取信息 , 整个应用程序逻辑完全使用 Kotlin/JS 来编写.
使用 Kotlin Multiplatform 构建一个全栈 Web 应用程序通过创建一个 Client-Server 应用程序, 教授创建针对 Kotlin/JVM 和 Kotlin/JS 的应用程序背后的概念, 其中用到共通代码, 序列化, 以及其他跨平台范例. 它还简要介绍了如何使用 Ktor 作为 Server 端和 Client 端框架.

Spring 全栈项目: 协作工作的待办事项列表(to-do list) 介绍在 JS 和 JVM 目标平台上如何使用 kotlin-multiplatform 创建一个用于协作工作的待办事项列表(to-do list) 后端开发使用 Spring, Kotlin/JS 和 React 用于前端开发和 RSocket.
Kotlin/JS 与 React Redux 开发的待办事项列表(to-do list) 实现 React Redux 的待办事项列表(to-do list), 演示如何使用 npm 的 JS 库(react, react-dom, react-router, redux, 以及 react-redux), 使用 Webpack 进行打包, 最小化, 并运行项目.
全栈的演示项目指导你如何构建一个应用程序, 接受用户生成的贴文和评论. 项目中的所有的数据都由fakeJSON 和 JSON Placeholder 服务提供.

2026/06/26