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.

  1. In IntelliJ IDEA, select File | New | Project.

  2. In the panel on the left, select Kotlin.

  3. Enter a project name, select React Application as the project template, and click Next.

    Create a react application

    By default, your project will use Gradle with Kotlin DSL as the build system.

  4. Select the CSS Support and Use styled-components checkboxes and click Finish.

    Configure a frontend application

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.

Running a frontend app

Your default web browser opens the URL http://localhost:8080/ with your frontend application.

Web browser with JS application

Enter your name in the text box and accept the greetings from your application!

Update the application

Show your name backwards

  1. Open the file welcome.kt in src/main/kotlin.
    The src directory contains Kotlin source files and resources. The file welcome.kt includes sample code that renders the web page you've just seen.

    Source code for frontend application
  2. 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()}!" } 
  3. Save your changes to the file.

  4. 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.

Web browser with a reversed name

Add an image

  1. Open the file welcome.kt in src/main/kotlin.

  2. Add a div container with a child image element img after the styledInput block.

    div { img(src = "https://placekitten.com/408/287") {} } 
  3. Save your changes to the file.

  4. 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.

Web page with with an image

Add a button that changes text

  1. Open the file welcome.kt in src/main/kotlin.

  2. Add a button element with an onClickFunction event handler.

    button { attrs.onClickFunction = { setState( WelcomeState(name = "Some name") ) } +"Change name" } 
  3. Save your changes to the file.

  4. 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.

Web page with a button

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, and react-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.

Last modified: 28 October 2021

© 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