Начало работы с Kotlin/JS для React

В этом руководстве показано, как использовать IntelliJ IDEA для создания веб-приложения с помощью Kotlin/JS для React.

Для начала установите последнюю версию IntelliJ IDEA.

Создание приложения

После установки IntelliJ IDEA пришло время создать ваше первое веб-приложение на основе Kotlin/JS с React.

В IntelliJ IDEA выберите Файл | Новый | Проект.
В левой панели выберите Kotlin Multiplatform.
Введите имя проекта, выберите Веб-приложение React в качестве шаблона проекта и нажмите Далее.

По умолчанию ваш проект будет использовать Gradle с Kotlin DSL в качестве системы сборки.
Примите значения по умолчанию на следующем экране и нажмите Готово. Ваш проект откроется.
Откройте файл build.gradle.kts, скрипт сборки, созданный по умолчанию на основе вашей конфигурации. Он включает kotlin("js") плагин и зависимости, необходимые для вашего веб-приложения. Убедитесь, что вы используете последнюю версию плагина:
```
plugins {
    kotlin("js") version "1.7.20"
}
```

Запуск приложения

Запустите приложение, нажав Запуск рядом с настройкой запуска в верхней части экрана.

Ваш браузер по умолчанию откроет URL http://localhost:8080/ с вашим веб-приложением.

Введите свое имя в текстовое поле и получите приветствие от вашего приложения!

Обновление приложения

Показать ваше имя наоборот

Откройте файл Welcome.kt в src/main/kotlin.
Каталог src содержит Kotlin-файлы исходного кода и ресурсы. Файл Welcome.kt содержит пример кода, который отображает веб-страницу, которую вы только что видели.
Измените код div для отображения вашего имени наоборот.
- Используйте стандартную функцию библиотеки reversed() для обратного порядка вашего имени.
- Используйте шаблон строки $ для вашего имени в обратном порядке, добавив знак доллара ${state.name.reversed()} и заключив его в фигурные скобки – ${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()}!"
 }
```
Сохраните изменения в файле.
Перейдите в браузер и наслаждайтесь результатом.
Вы увидите изменения только если ваше предыдущее приложение все еще запущено. Если вы остановили приложение, запустите его снова.

Добавление изображения

Откройте файл Welcome.kt в src/main/kotlin.
Добавьте контейнер div с дочерним элементом изображения img после блока input.

Следуйте предложениям IDE для импорта всех необходимых элементов пакета react.dom.html.
```
div {
     img {
         src = "https://placekitten.com/408/287"
     }
 }
```
Сохраните изменения в файле.
Перейдите в браузер и наслаждайтесь результатом.
Вы увидите изменения только если ваше предыдущее приложение все еще запущено. Если вы остановили приложение, запустите его снова.

Добавление кнопки, меняющей текст

Откройте файл Welcome.kt в src/main/kotlin.
Добавьте элемент button с обработчиком события onClick.

Убедитесь, что вы импортировали соответствующий элемент react.dom.html.ReactHTML.
```
button {
     onClick = {
         name = "Some name"
     }
     +"Change name"
 }   
```
Сохраните изменения в файле.
Перейдите в браузер и наслаждайтесь результатом.
Вы увидите изменения только если ваше предыдущее приложение все еще запущено. Если вы остановили приложение, запустите его снова.

Что дальше?

После создания своего первого приложения вы можете изучить подробные руководства Kotlin/JS или посмотреть список образцов проектов Kotlin/JS для вдохновения. Оба типа ресурсов содержат полезные фрагменты кода и шаблоны и могут послужить отличной отправной точкой для ваших собственных проектов.

Руководства

Создание веб-приложения с React и Kotlin/JS — руководство проведет вас через процесс создания простого веб-приложения с использованием фреймворка React, покажет, как безопасный тип Kotlin DSL для HTML упрощает создание реактивных элементов DOM, и продемонстрирует, как использовать компоненты React сторонних разработчиков и получать информацию из API, выполняя всю логику приложения на чистом Kotlin/JS.
Создание полнофункционального веб-приложения с Kotlin Multiplatform изучит концепции создания приложения, ориентированного на Kotlin/JVM и Kotlin/JS, создавая клиентско-серверное приложение, использующее общий код, сериализацию и другие многоплатформенные парадигмы. Также представлено краткое введение в работу с Ktor как с серверной, так и с клиентской стороны.

Примеры проектов

Полнофункциональное совместное приложение списка задач Spring демонстрирует, как создать список задач для совместной работы, используя kotlin-multiplatform с JS и JVM-целями, Spring для бэкенда, Kotlin/JS с React для фронтенда и RSocket.
Список задач Kotlin/JS и React Redux реализует список задач React Redux с использованием JS-библиотек (react, react-dom, react-router, redux, и react-redux) из npm и Webpack для сборки, минификации и запуска проекта.
Пример полнофункционального веб-приложения проведет вас через процесс создания приложения с лентой, содержащей созданные пользователем записи и комментарии. Все данные подменяются службами fakeJSON и JSON Placeholder.

Последнее изменение: 24 августа 2022 г.

© 2010–2022 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