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

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

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

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

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

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

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

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

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

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

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

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

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

Откройте файл welcome.kt в src/main/kotlin.
Каталог src содержит Kotlin-исходные файлы и ресурсы. Файл welcome.kt содержит пример кода, который отображает веб-страницу, которую вы только что увидели.
Измените код styledDiv для отображения вашего имени задом наперед.
- Используйте стандартную функцию reversed() для инвертирования вашего имени.
- Используйте шаблон строки $ для вашего обратного имени, добавив знак доллара ${state.name.reversed()} и заключив его в фигурные скобки – ${state.name.reversed()}.
```
styledDiv {
    css {
        +WelcomeStyles.textContainer
    }
    +"Hello ${state.name}!"
    +" Your name backwards is ${state.name.reversed()}!"
}
```
Сохраните внесенные изменения в файл.
Перейдите в браузер и наслаждайтесь результатом.
Вы увидите изменения только в том случае, если ваше предыдущее приложение все еще запущено. Если вы остановили свое приложение, запустите его снова.

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

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

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

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

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

Убедитесь, что вы импортировали пакет kotlinx.html.js.*.
```
button {
    attrs.onClickFunction = {
        setState(
            WelcomeState(name = "Some name")
        )
    }
    +"Change name"
}   
```
Сохраните внесенные изменения в файл.
Перейдите в браузер и наслаждайтесь результатом.
Вы увидите изменения только в том случае, если ваше предыдущее приложение все еще запущено. Если вы остановили свое приложение, запустите его снова.

Что дальше?

После создания вашего первого приложения вы можете перейти к практическим занятиям по Kotlin и выполнить подробные учебные пособия по 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.

Последнее изменение: 07 апреля 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