` header and uses a typesafe DSL to render HTML.
+* `h1` is a function that takes a lambda parameter. When you add the `+` sign in front of the string literal,
+ the `unaryPlus()` function is actually invoked using [operator overloading](operator-overloading.md).
+ It appends the string to the enclosed HTML element.
+
+When the project recompiles, the browser displays this HTML page:
+
+{width=700}
+
+### Convert HTML to Kotlin's typesafe HTML DSL
+
+The Kotlin [wrappers](https://github.com/JetBrains/kotlin-wrappers/blob/master/kotlin-react/README.md) for React come
+with a [domain-specific language (DSL)](type-safe-builders.md) that allows writing HTML in
+pure Kotlin code. In this way, it's similar to [JSX](https://reactjs.org/docs/introducing-jsx.html) from JavaScript.
+However, with this markup being Kotlin, you get all the benefits of a statically typed language, such as autocomplete or
+type checking.
+
+Compare classic HTML code for the future web app and its typesafe variant in Kotlin:
+
+
+
+
+```html
+KotlinConf Explorer
+
+ Videos to watch
+ John Doe: Building and breaking things
+ Jane Smith: The development process
+ Matt Miller: The Web 7.0
+ Videos watched
+ Tom Jerry: Mouseless development
+
+
+ John Doe: Building and breaking things
+ 
+
+```
+
+
+
+
+```kotlin
+h1 {
+ +"Hello, React+Kotlin/JS!"
+}
+div {
+ h3 {
+ +"Videos to watch"
+ }
+ p {
+ + "John Doe: Building and breaking things"
+ }
+ p {
+ +"Jane Smith: The development process"
+ }
+ p {
+ +"Matt Miller: The Web 7.0"
+ }
+ h3 {
+ +"Videos watched"
+ }
+ p {
+ +"Tom Jerry: Mouseless development"
+ }
+}
+div {
+ h3 {
+ +"John Doe: Building and breaking things"
+ }
+ img {
+ src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
+ }
+}
+```
+
+
+
+
+Copy the Kotlin code and update the `Fragment.create()` function call inside the `main()` function, replacing the previous `h1` tag.
+
+Wait for the browser to reload. The page should now look like this:
+
+{width=700}
+
+### Add videos using Kotlin constructs in markup
+
+There are some advantages in writing HTML in Kotlin using this DSL. You can manipulate your app using regular Kotlin
+constructs, like loops, conditions, collections, string interpolation
+
+You can now replace the hardcoded list of videos with a list of Kotlin objects:
+
+1. In `Main.kt`, create a `Video` [data class](data-classes.md) to hold together video attributes:
+
+ ```kotlin
+ data class Video(
+ val id: Int,
+ val title: String,
+ val speaker: String,
+ val videoUrl: String
+ )
+ ```
+
+2. Fill up the two lists for unwatched videos and watched videos, respectively. Add these declarations at
+ file-level in `Main.kt`:
+
+ ```kotlin
+ val unwatchedVideos = listOf(
+ Video(1, "Opening Keynote", "Andrey Breslav", "https://youtu.be/PsaFVLr8t4E"),
+ Video(2, "Dissecting the stdlib", "Huyen Tue Dao", "https://youtu.be/Fzt_9I733Yg"),
+ Video(3, "Kotlin and Spring Boot", "Nicolas Frankel", "https://youtu.be/pSiZVAeReeg")
+ )
+
+ val watchedVideos = listOf(
+ Video(4, "Creating Internal DSLs in Kotlin", "Venkat Subramaniam", "https://youtu.be/JzTeAM8N1-o")
+ )
+ ```
+
+3. To use these videos on the page, write a Kotlin `for` loop to iterate over the collection of unwatched `Video` objects.
+Replace the three `p` tags under "Videos to watch" with the following snippet:
+
+ ```kotlin
+ for (video in unwatchedVideos) {
+ p {
+ +"${video.speaker}: ${video.title}"
+ }
+ }
+ ```
+
+4. Apply the same process to modify the code for the single tag following "Videos watched" as well:
+
+ ```kotlin
+ for (video in watchedVideos) {
+ p {
+ +"${video.speaker}: ${video.title}"
+ }
+ }
+ ```
+
+Wait for the browser to reload. The layout should stay the same as before. You can add some more videos to the list to make
+sure that the loop is working.
+
+### Add styles with typesafe CSS
+
+The [kotlin-emotion](https://github.com/JetBrains/kotlin-wrappers/blob/master/kotlin-emotion/) wrapper for the [Emotion](https://emotion.sh/docs/introduction)
+library allows specifying CSS attributes – even dynamic ones – right alongside HTML with JavaScript. Conceptually, that
+makes it similar to [CSS-in-JS](https://reactjs.org/docs/faq-styling.html#what-is-css-in-js) – but for Kotlin.
+The benefit of using a DSL is that you can use Kotlin code constructs to express formatting rules.
+
+The template project for this tutorial already includes the dependency needed to use `kotlin-emotion`:
+
+```kotlin
+dependencies {
+ // ...
+ // Kotlin React Emotion (CSS) (chapter 3)
+ implementation("org.jetbrains.kotlin-wrappers:kotlin-emotion")
+ // ...
+}
+```
+
+With `kotlin-emotion`, you can specify a `css` block inside HTML elements `div` and `h3`, where you can define the styles.
+
+To move the video player to the top right corner of the page, use CSS and adjust the code for the video player
+(the last `div` in the snippet):
+
+```kotlin
+div {
+ css {
+ position = Position.absolute
+ top = 10.px
+ right = 10.px
+ }
+ h3 {
+ +"John Doe: Building and breaking things"
+ }
+ img {
+ src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
+ }
+}
+```
+
+Feel free to experiment with some other styles. For example, you could change the `fontFamily`, or add some `color` to your UI.
+
+> You can find this state of the project on the `02-first-static-page` branch [here](https://github.com/kotlin-hands-on/web-app-react-kotlin-js-gradle/tree/02-first-static-page).
+>
+{type="note"}
+
+## Design app components
+
+The basic building blocks in React are called _[components](https://reactjs.org/docs/components-and-props.html)_.
+Components themselves can also be composed of other, smaller components. By combining components, you build your application.
+If you structure components to be generic and reusable, you'll be able to use them in multiple parts of the app without
+duplicating code or logic.
+
+The content of the `render()` function generally describes a basic component. The current layout of your application looks
+like this:
+
+{width=700}
+
+If you decompose your application into individual components, you'll end up with a more structured layout, in which
+each component handles its responsibilities:
+
+{width=700}
+
+Components encapsulate a particular functionality. Using components shortens source code and makes it easier to read and
+understand.
+
+### Add the main component
+
+To start creating application structure, first explicitly specify the main component for rendering into the `root`
+element, the `App`:
+
+1. Create a new `App.kt` file in the `src/main/kotlin` folder.
+2. Inside this file, add the following snippet, and move the typesafe HTML from `Main.kt` into the snippet:
+
+ ```kotlin
+ import kotlinx.coroutines.async
+ import react.*
+ import react.dom.*
+ import kotlinx.browser.window
+ import kotlinx.coroutines.*
+ import kotlinx.serialization.decodeFromString
+ import kotlinx.serialization.json.Json
+ import emotion.react.css
+ import csstype.Position
+ import csstype.px
+ import react.dom.html.ReactHTML.h1
+ import react.dom.html.ReactHTML.h3
+ import react.dom.html.ReactHTML.div
+ import react.dom.html.ReactHTML.p
+ import react.dom.html.ReactHTML.img
+
+ val App = FC {
+ // typesafe HTML goes here, starting with the first h1 tag!
+ }
+ ```
+
+ The `FC` function creates a [function component](https://reactjs.org/docs/components-and-props.html#function-and-class-components).
+
+3. In the `Main.kt` file, update the `main()` function as follows:
+
+ ```kotlin
+ fun main() {
+ val container = document.getElementById("root") ?: error("Couldn't find root container!")
+ createRoot(container).render(App.create())
+ }
+ ```
+
+ Now the program creates an instance of the `App` component and renders it to the specified container.
+
+For more information on React concepts, see its [documentation and guides](https://reactjs.org/docs/hello-world.html#how-to-read-this-guide).
+
+### Extract a list component
+
+Since the `watchedVideos` and `unwatchedVideos` lists both contain a list of videos, it makes sense to create a single
+reusable component, and only adjust the content displayed in the lists.
+
+The `VideoList` component follows the same pattern as the `App` component. It uses the `FC` builder function,
+and contains the code from the `unwatchedVideos` list.
+
+1. Create a new `VideoList.kt` file in the `src/main/kotlin` folder and add the following code:
+
+ ```kotlin
+ import kotlinx.browser.window
+ import react.*
+ import react.dom.*
+ import react.dom.html.ReactHTML.p
+
+ val VideoList = FC {
+ for (video in unwatchedVideos) {
+ p {
+ +"${video.speaker}: ${video.title}"
+ }
+ }
+ }
+ ```
+
+2. In `App.kt`, use the `VideoList` component by invoking it without parameters:
+
+ ```kotlin
+ // . . .
+ div {
+ h3 {
+ +"Videos to watch"
+ }
+ VideoList()
+
+ h3 {
+ +"Videos watched"
+ }
+ VideoList()
+ }
+ // . . .
+ ```
+
+ For now, the `App` component has no control over the content that is shown by the `VideoList` component. It's hard-coded,
+ so you see the same list twice.
+
+### Add props to pass data between components
+
+For reusing the `VideoList` component, it should be possible to fill it with different content. You can add
+the ability to pass the list of items as an attribute to the component. In React, these attributes are called _props_.
+When the props of a component are changed in React, the framework automatically re-renders the component.
+
+For `VideoList`, you'll need a prop containing the list of videos to be shown. Define an interface
+that holds all the props which can be passed to a `VideoList` component:
+
+1. Add the following definition to the `VideoList.kt` file:
+
+ ```kotlin
+ external interface VideoListProps : Props {
+ var videos: List
KotlinConf Explorer
+
+
+Videos to watch
+John Doe: Building and breaking things
+Jane Smith: The development process
+Matt Miller: The Web 7.0
+Videos watched
+Tom Jerry: Mouseless development
+
+
+
+```
+
+John Doe: Building and breaking things
+
+