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

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

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

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

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

1. В IntelliJ IDEA выберите Файл | Новый | Проект.
2. В левой панели выберите Kotlin.

3. Введите имя проекта, выберите шаблон проекта Frontend Application и нажмите Далее.

   

   По умолчанию ваш проект будет использовать Gradle с Kotlin DSL в качестве системы сборки.

4. Примите настройки по умолчанию на следующем экране и нажмите Готово.

   

Ваш проект откроется. По умолчанию вы увидите файл build.gradle.kts, который является скриптом сборки, созданным мастером проекта на основе вашей конфигурации. Он включает в себя kotlin("js") плагин и зависимости, необходимые для вашего веб-приложения.

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

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

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

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

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

Отображение вашего имени задом наперед

1. Откройте файл welcome.kt в src/main/kotlin.
   Каталог src содержит Kotlin-файлы исходного кода и ресурсы. Файл welcome.kt содержит пример кода, который отображает веб-страницу, которую вы только что увидели.

   

2. Измените код в styledDiv для отображения вашего имени задом наперед.

   • Используйте стандартную функцию библиотеки reversed() для реверсирования вашего имени.
   • Используйте шаблон строки $ для своего перевернутого имени, добавив знак доллара ${state.name.reversed()} и заключив его в фигурные скобки – ${state.name.reversed()}.

   styledDiv {
       css {
           +WelcomeStyles.textContainer
       }
       +"Hello ${state.name}!"
       +" Your name backwards is ${state.name.reversed()}!"
   }
   

3. Сохраните внесенные изменения в файл.

4. Перейдите в браузер и насладитесь результатом.
   Вы увидите изменения только в том случае, если ваше предыдущее приложение все еще запущено. Если вы остановили свое приложение, запустите его снова.

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

1. Откройте файл welcome.kt в src/main/kotlin.

2. Добавьте контейнер div с дочерним элементом изображения img после блока styledInput.

   Убедитесь, что вы импортировали пакеты react.dom.* и styled.*.

   div {
       img(src = "https://placekitten.com/408/287") {}
   }
   

3. Сохраните внесенные изменения в файл.

4. Перейдите в браузер и насладитесь результатом.
   Вы увидите изменения только в том случае, если ваше предыдущее приложение все еще запущено. Если вы остановили свое приложение, запустите его снова.

Добавление кнопки, которая изменяет текст

1. Откройте файл welcome.kt в src/main/kotlin.

2. Добавьте элемент button с обработчиком события onClickFunction.

   Убедитесь, что вы импортировали пакет kotlinx.html.js.*.

   button {
       attrs.onClickFunction = {
           setState(
               WelcomeState(name = "Some name")
           )
       }
       +"Change name"
   }   
   

3. Сохраните внесенные изменения в файл.

4. Перейдите в браузер и насладитесь результатом.
   Вы увидите изменения только в том случае, если ваше предыдущее приложение все еще запущено. Если вы остановили свое приложение, запустите его снова.

Что дальше?

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

Для Kotlin/JS в настоящее время доступны следующие практические занятия:

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

• Разработка полнофункционального веб-приложения с Kotlin Multiplatform ознакомит вас с концепциями создания приложения, которое нацелено как на Kotlin/JVM, так и на Kotlin/JS, создавая клиентско-серверное приложение, использующее общий код, сериализацию и другие многоплатформенные парадигмы. Также предоставляется краткое введение в работу с Ktor как с серверной, так и с клиентской стороной.