Get started with Kotlin/JS for React
This tutorial demonstrates how to use IntelliJ IDEA for creating a frontend application with Kotlin/JS for React.
To get started, install the latest version of IntelliJ IDEA.
Create an application
Once you've installed IntelliJ IDEA, it's time to create your first frontend application based on Kotlin/JS with React.
In IntelliJ IDEA, select File | New | Project.
In the panel on the left, select Kotlin.
-
Enter a project name, select React Application as the project template, and click Next.
By default, your project will use Gradle with Kotlin DSL as the build system.
-
Select the CSS Support and Use styled-components checkboxes and click Finish.
Your project opens. By default, you see the file build.gradle.kts
, which is the build script created by the Project Wizard based on your configuration. It includes the kotlin("js")
plugin and dependencies required for your frontend application.
Run the application
Start the application by clicking Run next to the run configuration at the top of the screen.
Your default web browser opens the URL http://localhost:8080/ with your frontend application.
Enter your name in the text box and accept the greetings from your application!
Update the application
Show your name backwards
-
Open the file
welcome.kt
insrc/main/kotlin
.
Thesrc
directory contains Kotlin source files and resources. The filewelcome.kt
includes sample code that renders the web page you've just seen. -
Change the code of
styledDiv
to show your name backwards.Use the standard library function
reversed()
to reverse your name.Use a string template for your reversed name by adding a dollar sign
$
and enclosing it in curly braces –${state.name.reversed()}
.
styledDiv { css { +WelcomeStyles.textContainer } +"Hello ${state.name}!" +" Your name backwards is ${state.name.reversed()}!" }
Save your changes to the file.
Go to the browser and enjoy the result.
You will see the changes only if your previous application is still running. If you've stopped your application, run it again.
Add an image
Open the file
welcome.kt
insrc/main/kotlin
.-
Add a
div
container with a child image elementimg
after thestyledInput
block.div { img(src = "https://placekitten.com/408/287") {} }
Save your changes to the file.
Go to the browser and enjoy the result.
You will only see the changes if your previous application is still running. If you've stopped your application, run it again.
Add a button that changes text
Open the file
welcome.kt
insrc/main/kotlin
.-
Add a
button
element with anonClickFunction
event handler.button { attrs.onClickFunction = { setState( WelcomeState(name = "Some name") ) } +"Change name" }
Save your changes to the file.
Go to the browser and enjoy the result.
You will only see the changes if your previous application is still running. If you've stopped your application, run it again.
What's next?
Once you have created your first application, you can go to Kotlin hands-on labs and complete long-form Kotlin/JS tutorials or check out the list of Kotlin/JS sample projects for inspiration. Both types of resources contain useful snippets and patterns and can serve as a nice jump-off point for your own projects.
Hands-on labs
Building Web Applications with React and Kotlin/JS guides you through the process of building a simple web application using the React framework, shows how a type-safe Kotlin DSL for HTML makes it easy to build reactive DOM elements, and illustrates how to use third-party React components and obtain information from APIs, all while writing the whole application logic in pure Kotlin/JS.
Building a Full Stack Web App with Kotlin Multiplatform teaches the concepts behind building an application that targets Kotlin/JVM and Kotlin/JS by building a client-server application that makes use of shared code, serialization, and other multiplatform paradigms. It also provides a brief introduction to working with Ktor both as a server- and client-side framework.
Sample projects
Full-stack Spring collaborative to-do list shows how to create a to-do list for collaborative work using
kotlin-multiplatform
with JS and JVM targets, Spring for the backend, Kotlin/JS with React for the frontend, and RSocket.Kotlin/JS and React Redux to-do list implements the React Redux to-do list using JS libraries (
react
,react-dom
,react-router
,redux
, andreact-redux
) from npm and Webpack to bundle, minify, and run the project.Full-stack demo application guides you through the process of building an app with a feed containing user-generated posts and comments. All data is stubbed by the fakeJSON and JSON Placeholder services.
© 2010–2021 JetBrains s.r.o. and Kotlin Programming Language contributors
Licensed under the Apache License, Version 2.0.
https://kotlinlang.org/docs/js-get-started.html