以 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 Multiplatform.

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

4. Accept the default configuration on the next screen and click Finish. Your project will open.

   

5. Open the build.gradle.kts file, the build script created by default based on your configuration. It includes the kotlin("js") plugin and dependencies required for your frontend application. Ensure that you use the latest version of the plugin:

   plugins {
       kotlin("js") version "1.8.21"
   }
   

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

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.

   

2. Change the code of div 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()}.

   div {
        css {
            padding = 5.px
            backgroundColor = rgb(8, 97, 22)
            color = rgb(56, 246, 137)
        }
        +"Hello, $name"
        +" Your name backwards is ${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.

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 input block.

   Follow IDE suggestions to import all the required elements of the react.dom.html package.

   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.

Add a button that changes text

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

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

   Make sure that you import the relevant react.dom.html.ReactHTML element.

   button {
        onClick = {
            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.

下一步做什么？

Once you have created your first application, you can 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.

Tutorials

• Build a web application with React and Kotlin/JS — tutorial 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.

• Build 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.