maochaokuo/kotlin-react2

from kotlin official web site

Kotlin React 2

A first static page with React

A first static page with React

data class

data class listOf

add style

step 1: yarn add @jetbrains/kotlin-css @jetbrains/kotlin-css-js @jetbrains/kotlin-styled inline-style-prefixer styled-components@4

step 2: import kotlinx.css.* import styled.*

example:

styledDiv {
    css {
        position = Position.absolute
        top = 10.px
        right = 10.px
    }
    h3 {
        +"John Doe: Building and breaking things"
    }
    img {
        attrs {
            src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
        }
    }
}

Making It React: Our first Component

Making It React: Our first Component

lambdas with receivers

lambdas with receivers

fun RBuilder.videoList(handler: VideoListProps.() -> Unit): ReactElement {
    return child(VideoList::class) {
        this.attrs(handler)
    }
}

Adding state

interface VideoListState: RState {
    var selectedVideo: Video?
}
class VideoList(props: VideoListProps) : RComponent<VideoListProps, VideoListState>(props) {
    override fun RBuilder.render() {
        for (video in props.videos) {
            p {
                key = video.id.toString()
                attrs {
                    onClickFunction = {
                        setState {
                            selectedVideo = video
                        }
                    }
                }
                if(video == state.selectedVideo) {
                    +"▶ "
                }
                +"${video.speaker}: ${video.title}"
            }
        }
    }
}

Working together: Composing components

Working together: Composing components

More components

More components

Using packages from NPM

Using packages from NPM

Adding the video player component

yarn add react-player

Adding social share buttons

yarn add react-share

Using an external REST API

Using an external REST API

Coroutines instead of callbacks

yarn add kotlinx-coroutines-core