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

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

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

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

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

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

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

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

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

Ваш веб-браузер откроет 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.
Список задач React Redux Kotlin/JS реализует список задач React Redux, используя JS библиотеки (react, react-dom, react-router, redux, и react-redux) из npm и Webpack для сборки, минификации и запуска проекта.
Демонстрационное полнофункциональное веб-приложение проведет вас через процесс создания приложения с лентой, содержащей пользовательские публикации и комментарии. Все данные подменяются фейковыми JSON и JSON Placeholder сервисами.

Последнее изменение: 10 января 2023

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