● RComponent
● RBuilder
● RState
● RProps
● RActions
● rEnhancer
Some things to remember
Slide 16
Slide 16 text
interface WelcomeProps: RProps {
var name: String
}
class Welcome: RComponent() {
override fun RBuilder.render() {
div {
+"Hello, ${props.name}"
}
}
}
fun RBuilder.welcome(name: String = "John") = child(Welcome::class) {
attrs.name = name
}
Class Components (Welcome.kt)
Code snippet from https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-react
Slide 17
Slide 17 text
Reusing Components
Code snippet from https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-react
fun RBuilder.welcome(name: String = "John") = child(Welcome::class) {
attrs.name = name
}
Slide 18
Slide 18 text
OTHER KOTLIN WEB WRAPPERS
Slide 19
Slide 19 text
kotlin-css & kotlin-styled
DSL for creating stylesheets in Kotlin.
npm i @jetbrains/kotlin-css
npm i @jetbrains/kotlin-css-js
npm i @jetbrains/kotlin-styled
Slide 20
Slide 20 text
kotlin-mocha
If you want to test, use this guy.
npm i @jetbrains/kotlin-mocha
Slide 21
Slide 21 text
kotlin-react-dom
Kotlin wrapper for the React DOM library.
npm i @jetbrains/kotlin-react-dom
Slide 22
Slide 22 text
kotlin-react-redux
Kotlin wrapper for the React Redux library.
npm i @jetbrains/kotlin-react-redux
Slide 23
Slide 23 text
kotlin-react-router-dom
Kotlin wrapper for the React Router DOM library.
npm i @jetbrains/kotlin-react-router-dom
Slide 24
Slide 24 text
kotlin-redux
Kotlin wrapper for the Redux library.
npm i @jetbrains/kotlin-redux
Slide 25
Slide 25 text
● Introduction to Kotlin
● Why Kotlin for JavaScript
● Kotlin in React
● Existing Kotlin JS wrappers
Summary