Create React Kotlin app

Hands on session at #KotlinEverywhere event by GDG-Makurdi, Nigeria. We walked through creating our first react app using Kotlin. Very beginners friendly.

Transcript

1. Create React Kotlin App Pius Aboyi Twitter: @ea_pius
2. Before we start the Engine • Built a website before? • React? • Kotlin? • Kotlin JS?
3. Why Kotlin-React?
4. Is this you?
5. Templates • String Building • DOM (Append Nodes) • Templates (Static parts and little parts that change) Example: Angular Template <li *ngFor="let hero of heroes"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li>
6. Templating introduces: • Loop, • Control statements in HTML
7. JSX 1. function buttonBar({x1, x2}) { 2. return <div> 3. <button>{x1}</button> 4. <button>{x2}</button> 5. </div> 6. }
8. Kotlin 1. fun buttonBar(x1: String, x2: String) { 2. button { +x1 } 3. button { +x2 } 4. }
9. React with Kotlin • create-react-kotlin-app • Kotlin react wrappers • Kotlin type-safe builders
10. Demo
11. Requirements • Node 6+ • InteliJ IDEA • JDK 8
12. Installation • npm install -g create-react-kotlin-app • create-react-kotlin-app my-app • cd my-app
13. Run the Sample App
14. npm start Open http://localhost:3000
16. Hello World React Kotlin app fun main(args: Array<String>) { val rootDiv = document.getElementById("root") render(rootDiv) { h1 { + "Hello World!" } } } File: gdg-makurdi/src/index/index.kt
17. h1 { + "Hello World!" }
18. div { h1 { + "Blackjack" } div { div { div { b { + "Player Hand"} } div { b { + "cards go here" } } div { b { + "12 cards" } } } } } More Tags
19. div { h1 { + "Blackjack" } div { attrs.title = "Hands" //shows title when you hover on this div attrs.style = kotlinext.js.js { display = "flex" //keeps hands side-by-side } handUi() } } Add props to Tag
20. fun RBuilder.handUi(hName: String, gPoints: String) { div { div { b { +"$hName Hand" } } div { b { +"cards go here" } } div { b { +"$gPoints cards" } } } } Reusable UI Components File: gdg-makurdi/src/bj/handUi.kt
22. Extra Official repo: https://github.com/JetBrains/create-react-kotlin-app Demo app: https://github.com/buildbro/gdg-makurdi KotlinCon talk: https://www.youtube.com/watch?v=FDOECr-sT6U
23. Thank You!