Fix minor typos in "Building Web Applications with React and Kotlin/JS"

Author: SebastianAigner

Building Web Applications with React and Kotlin JS/03_A_First_Static_Page.md

@@ -2,7 +2,7 @@
 
 Let's start our story with a classic little *Hello World*-type program!
 
-Change the code inside `src/main/kotlin/Main.kt` to look like this:
+Replace the code inside `src/main/kotlin/Main.kt` with the following:
 
 ```kotlin
 import kotlinx.browser.document
@@ -161,7 +161,7 @@ val watchedVideos = listOf(
 To use these videos in our page, we can now write a Kotlin `for`-loop to iterate over the collection of unwatched videos. Replace the three `p` tags under "Videos to watch" with the following snippet:
 
 ```kotlin
-for(video in unwatchedVideos) {
+for (video in unwatchedVideos) {
     p {
         +"${video.speaker}: ${video.title}"
     }
@@ -171,7 +171,7 @@ for(video in unwatchedVideos) {
 We apply the same process to modify the code for the single tag following "Videos watched", as well:
 
 ```kotlin
-for(video in watchedVideos) {
+for (video in watchedVideos) {
     p {
         +"${video.speaker}: ${video.title}"
     }

Building Web Applications with React and Kotlin JS/04_Making_It_React.md

@@ -36,7 +36,7 @@ import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.p
 import react.dom.html.ReactHTML.img
 
-val app = FC<Props> {
+val App = FC<Props> {
     // typesafe HTML goes here, starting with the first h1 tag!
 }
 ```

Building Web Applications with React and Kotlin JS/05_Working_Together_Composing_Components.md

@@ -95,7 +95,7 @@ Here, we pass the `selectedVideo`, and a handler for `onSelectVideo` for each of
 
 ```kotlin
 VideoList {
-    videos = unwatchedVideos
+    videos = unwatchedVideos // and watched videos respectively!
     selectedVideo = currentVideo
     onSelectVideo = { video ->
         currentVideo = video

Building Web Applications with React and Kotlin JS/07_Using_Packages_From_NPM.md

@@ -23,7 +23,7 @@ This is the responsible snippet:
 dependencies {
     //...
     //Video Player (chapter 7)
-    implementation(npm("react-youtube-lite", "1.1.0"))
+    implementation(npm("react-youtube-lite", "1.5.0"))
     //...
 }
 ```
@@ -139,16 +139,16 @@ import react.ComponentClass
 import react.Props
 
 @JsName("EmailIcon")
-external val emailIcon: ComponentClass<IconProps>
+external val EmailIcon: ComponentClass<IconProps>
 
 @JsName("EmailShareButton")
-external val emailShareButton: ComponentClass<ShareButtonProps>
+external val EmailShareButton: ComponentClass<ShareButtonProps>
 
 @JsName("TelegramIcon")
-external val telegramIcon: ComponentClass<IconProps>
+external val TelegramIcon: ComponentClass<IconProps>
 
 @JsName("TelegramShareButton")
-external val telegramShareButton: ComponentClass<ShareButtonProps>
+external val TelegramShareButton: ComponentClass<ShareButtonProps>
 
 external interface ShareButtonProps : Props {
     var url: String