{"id":322573,"date":"2021-05-04T21:00:16","date_gmt":"2021-05-04T21:00:16","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=322573"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=322573","title":{"rendered":"\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u043f\u043e \u041a\u043e\u0442\u043b\u0438\u043d\u0443: \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 React \u0438 Kotlin\/JS"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\n<p><em>\u041e\u0442 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430<\/em>.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041f\u0440\u043e <strong>Kotlin<\/strong> \u0435\u0441\u0442\u044c \u0441\u0442\u0435\u0440\u0435\u043e\u0442\u0438\u043f, \u0431\u0443\u0434\u0442\u043e \u0431\u044b \u044d\u0442\u043e \u044f\u0437\u044b\u043a \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434 Android. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044d\u0442\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u0442\u0430\u043a: \u044f\u0437\u044b\u043a \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c (<strong>JVM<\/strong>, <strong>JS<\/strong>, <strong>Native<\/strong>), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u043c\u0435\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438 \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u044f\u0437\u044b\u043a\u0430\u0445. \u0422\u0430\u043a\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 &quot;\u043c\u0443\u043b\u044c\u0442\u0438\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0441\u0442\u0438&quot; \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u0432 \u0435\u0434\u0438\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u0435, \u043d\u043e \u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u0434 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b.<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0436\u0443 <a href=\"https:\/\/play.kotlinlang.org\/hands-on\/Building%20Web%20Applications%20with%20React%20and%20Kotlin%20JS\" rel=\"nofollow noopener noreferrer\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b Kotlin Hands-On<\/a> \u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0432\u0435\u0431 \u0441\u0430\u0439\u0442\u043e\u0432 \u043d\u0430 \u041a\u043e\u0442\u043b\u0438\u043d\u0435. \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043c\u043d\u043e\u0433\u0438\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 Kotlin\/JS \u0438 \u043f\u043e\u0439\u043c\u0435\u043c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0447\u0438\u0441\u0442\u044b\u043c DOM. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0431\u0443\u0434\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e <a href=\"https:\/\/reactjs.org\/\" rel=\"nofollow noopener noreferrer\">React JS<\/a>, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043a\u043e\u0441\u043d\u0435\u043c\u0441\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0441\u0431\u043e\u0440\u043a\u0438 <strong>Gradle<\/strong>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0438\u0437 <strong>NPM<\/strong>, \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a <strong>REST API<\/strong>, \u0434\u0435\u043f\u043b\u043e\u044f \u043d\u0430 <strong>Heroku<\/strong>, \u0438 \u0432 \u0438\u0442\u043e\u0433\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c <em>\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435-\u0432\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440<\/em>.<\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043a\u0441\u0442 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0430 \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0435\u0442 \u041a\u043e\u0442\u043b\u0438\u043d \u0438 \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u0438\u043b\u0438 \u043f\u043e\u0447\u0442\u0438 \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u0420\u0435\u0430\u043a\u0442. \u0415\u0441\u043b\u0438 \u0432\u044b \u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u044b\u0442\u043d\u044b \u043f\u043e \u044d\u0442\u0438\u043c \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u043c, \u0442\u043e \u0447\u0430\u0441\u0442\u0438 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0430 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0432\u0430\u043c \u0447\u0440\u0435\u0437\u043c\u0435\u0440\u043d\u043e \u0440\u0430\u0437\u0436\u0435\u0432\u0430\u043d\u043d\u044b\u043c\u0438.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/e82\/357\/ada\/e82357ada36198277e49b1ad14a830bc.png\" alt=\"kotlin-react\"><\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0441\u0442\u0430\u0442\u044c\u044f \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0438\u0442 <a href=\"https:\/\/habr.com\/ru\/company\/productsense\/blog\/526238\/#comment_22257922\">\u043f\u0443\u0441\u0442\u044c \u0434\u0430\u0436\u0435 \u043d\u0435\u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b<\/a> \u043d\u0430 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u043e \u041a\u043e\u0442\u043b\u0438\u043d\u0435 \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u043a\u0438 \u0432 \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e <a href=\"https:\/\/github.com\/SerVB\/kotlin-hands-on-ru\/edit\/master\/hands-on\/Building%20Web%20Applications%20with%20React%20and%20Kotlin%20JS.md\" rel=\"nofollow noopener noreferrer\">\u043d\u0430 \u0413\u0438\u0442\u0425\u0430\u0431\u0435<\/a>. \u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0430 \u0432\u0435\u0440\u0441\u0438\u0438 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0430, \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u043d\u0430 09.04.2021.<\/p>\n<p>  <\/p>\n<h2 id=\"soderzhanie\">\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<ol>\n<li><a href=\"#a-namestep1shag-1-vvedeniea\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/a><\/li>\n<li><a href=\"#a-namestep2shag-2-nastroykaa\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430<\/a><\/li>\n<li><a href=\"#a-namestep3shag-3-pervaya-stranica-na-reakte--statichnayaa\">\u041f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0430 \u0420\u0435\u0430\u043a\u0442\u0435 \u2013 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u0430\u044f<\/a><\/li>\n<li><a href=\"#a-namestep4shag-4-react--o-reakciyah-nash-pervyy-komponenta\">React \u2013 \u043e \u0440\u0435\u0430\u043a\u0446\u0438\u044f\u0445. \u041d\u0430\u0448 \u043f\u0435\u0440\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/a><\/li>\n<li><a href=\"#a-namestep5shag-5-rabotaem-sovmestno-kompoziciya-komponentova\">\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e. \u041a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/a><\/li>\n<li><a href=\"#a-namestep6shag-6-bolshe-komponentova\">\u0411\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432!<\/a><\/li>\n<li><a href=\"#a-namestep7shag-7-ispolzovanie-npm-paketova\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 NPM \u043f\u0430\u043a\u0435\u0442\u043e\u0432<\/a><\/li>\n<li><a href=\"#a-namestep8shag-8-ispolzuem-vneshnee-rest-apia\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u043d\u0435\u0448\u043d\u0435\u0435 REST API<\/a><\/li>\n<li><a href=\"#a-namestep9shag-9-deploim-v-prodakshen-i-v-oblakoa\">\u0414\u0435\u043f\u043b\u043e\u0438\u043c \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d \u0438 \u0432 \u043e\u0431\u043b\u0430\u043a\u043e<\/a><\/li>\n<li><a href=\"#a-namestep10shag-10-v-dopolnenie-sovremennyy-reakt-s-hukamia\">\u0412 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435: \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0420\u0435\u0430\u043a\u0442 \u0441 \u0445\u0443\u043a\u0430\u043c\u0438<\/a><\/li>\n<li><a href=\"#a-namestep11shag-11-chto-dalshea\">\u0427\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435?<\/a><\/li>\n<\/ol>\n<p>  <\/p>\n<h2 id=\"a-namestep1shag-1-vvedeniea\">\u0428\u0430\u0433 1. \u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Kotlin\/JS \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c <a href=\"https:\/\/reactjs.org\/\" rel=\"nofollow noopener noreferrer\">React<\/a> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0445 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. React \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e, \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u044f\u0441\u044c \u043d\u0430 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043d\u0430 \u043e\u0441\u043e\u0431\u043e\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u043d \u0438\u043c\u0435\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e\u043c.<\/p>\n<p>  <\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u041a\u043e\u0442\u043b\u0438\u043d\u0430 \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 React \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0430\u0448\u0438 \u0437\u043d\u0430\u043d\u0438\u044f \u043e \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u0430\u0445, \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0435 \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 \u044d\u0442\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0444\u0440\u043e\u043d\u0442-\u044d\u043d\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. \u0410 \u0435\u0449\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0442\u043b\u0438\u043d\u043e\u0432\u0441\u043a\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0438 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b JavaScript.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043c\u044b \u043d\u0430\u0443\u0447\u0438\u043c\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 Kotlin\/JS \u0438 React, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f Gradle \u043f\u043b\u0430\u0433\u0438\u043d <code>org.jetbrains.kotlin.js<\/code>. \u041c\u044b \u0440\u0435\u0448\u0438\u043c \u0437\u0430\u0434\u0430\u0447\u0438, \u043e\u0431\u044b\u0447\u043d\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0442\u0438\u043f\u0438\u0447\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e React \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0443\u0437\u043d\u0430\u0435\u043c, \u043a\u0430\u043a <em>\u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u044f\u0437\u044b\u043a\u0438<\/em> (<em>DSL<\/em>) \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0432\u044b\u0440\u0430\u0436\u0430\u0442\u044c \u0438\u0434\u0435\u0438 \u043a\u0440\u0430\u0442\u043a\u0438\u043c \u0438 \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0431\u0435\u0437 \u0436\u0435\u0440\u0442\u0432 \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u0438, \u0434\u0430\u0432\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430 \u041a\u043e\u0442\u043b\u0438\u043d\u0435. \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u043f\u043e\u043a\u0430\u0436\u0435\u043c, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0443\u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0438 \u043a\u0430\u043a \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0435\u0435\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u041a\u043e\u0442\u043b\u0438\u043d\u0430, \u0438 <em>\u0441\u043e\u0432\u0441\u0435\u043c \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e\u0435<\/em> \u0437\u043d\u0430\u043d\u0438\u0435 HTML \u0438 CSS. \u0411\u0430\u0437\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u043d\u0438\u0435 \u0438\u0434\u0435\u0439 \u0420\u0435\u0430\u043a\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043a\u043e\u0434\u0430, \u043d\u043e \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e.<\/p>\n<p>  <\/p>\n<h3 id=\"chto-imenno-my-sozdadim\">\u0427\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c<\/h3>\n<p>  <\/p>\n<p>\u0415\u0436\u0435\u0433\u043e\u0434\u043d\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <a href=\"https:\/\/kotlinconf.com\/\" rel=\"nofollow noopener noreferrer\">KotlinConf<\/a> \u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e \u041a\u043e\u0442\u043b\u0438\u043d\u0435 \u0438 \u043f\u043e\u043e\u0431\u0449\u0430\u0442\u044c\u0441\u044f \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e\u043c. KotlinConf 2018 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u043b \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0432 \u0432\u0438\u0434\u0435 \u043c\u0430\u0441\u0442\u0435\u0440-\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u043b\u0435\u043a\u0446\u0438\u0439 \u0438 \u043d\u0430\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u043b 1300 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432. \u0414\u043e\u043a\u043b\u0430\u0434\u044b \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043d\u0430 YouTube, \u0438 \u043f\u043e\u043a\u043b\u043e\u043d\u043d\u0438\u043a\u0430\u043c \u041a\u043e\u0442\u043b\u0438\u043d\u0430 \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u043e\u043b\u0435\u0437\u043d\u043e <strong>\u0443\u0432\u0438\u0434\u0435\u0442\u044c<\/strong> \u043f\u0435\u0440\u0435\u0447\u0435\u043d\u044c \u0434\u043e\u043a\u043b\u0430\u0434\u043e\u0432 \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438 <strong>\u043f\u043e\u043c\u0435\u0447\u0430\u0442\u044c<\/strong> \u0438\u0445 \u043a\u0430\u043a <em>\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0435<\/em> \u2013 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0432 \u041a\u043e\u0442\u043b\u0438\u043d &quot;\u0437\u0430\u043f\u043e\u0435\u043c&quot;. \u041d\u0430 \u044d\u0442\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043c\u044b \u043a\u0430\u043a \u0440\u0430\u0437 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0442\u0430\u043a\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2013 <em>KotlinConf Explorer<\/em> (\u0441\u043c. \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u043d\u0438\u0436\u0435).<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/e98\/63c\/4b8\/e9863c4b8f99d4ae60691fbf15bfe1a8.png\" alt=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\"><\/p>\n<p>  <\/p>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u0430\u043a \u0438 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b, \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 <a href=\"https:\/\/github.com\/kotlin-hands-on\/web-app-react-kotlin-js-gradle\" rel=\"nofollow noopener noreferrer\">\u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a> \u043d\u0430 GitHub. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0448\u0430\u0433\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0432\u0435\u0442\u043a\u0435, \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u043c \u0432 \u043a\u043e\u043d\u0446\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0430.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0440\u0435\u0434\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u043c \u0432 \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<p>  <\/p>\n<h2 id=\"a-namestep2shag-2-nastroykaa\">\u0428\u0430\u0433 2. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430<\/h2>\n<p>  <\/p>\n<h3 id=\"prerekvizity\">\u041f\u0440\u0435\u0440\u0435\u043a\u0432\u0438\u0437\u0438\u0442\u044b<\/h3>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0431\u0435\u0434\u0438\u043c\u0441\u044f, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0412\u043e\u0442 \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u2013 \u044d\u0442\u043e IntelliJ IDEA (\u0432\u0435\u0440\u0441\u0438\u0438 <code>2020.3<\/code> \u0438\u043b\u0438 \u043d\u043e\u0432\u0435\u0435, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e\u0439 Community Edition) \u0441 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c \u041a\u043e\u0442\u043b\u0438\u043d (<code>1.4.30<\/code> \u0438\u043b\u0438 \u043d\u043e\u0432\u0435\u0435) \u2013 \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/www.jetbrains.com\/idea\/download\/\" rel=\"nofollow noopener noreferrer\">\u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435<\/a>. \u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043e\u0447\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0432\u0430\u0448\u0435\u0439 \u041e\u0421 (\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f Windows, MacOS \u0438 Linux).<\/p>\n<p>  <\/p>\n<h3 id=\"sozdaem-proekt\">\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442<\/h3>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u043c\u044b \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0438 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u0439 \u0432\u0441\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p>  <\/p>\n<p>\u0421\u043a\u043b\u043e\u043d\u0438\u0440\u0443\u0439\u0442\u0435 <a href=\"https:\/\/github.com\/kotlin-hands-on\/web-app-react-kotlin-js-gradle\" rel=\"nofollow noopener noreferrer\">\u044d\u0442\u043e\u0442 GitHub \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/a> \u0438 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0435\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e IntelliJ IDEA (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <strong>File | New | Project from Version Control&#8230;<\/strong> \u0438\u043b\u0438 <strong>Git | Clone&#8230;<\/strong>).<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 Kotlin\/JS Gradle \u043f\u0440\u043e\u0435\u043a\u0442, \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0441\u0432\u043e\u0435. \u0422\u0430\u043a \u043a\u0430\u043a \u0432 Gradle \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0443\u0436\u0435 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, <strong>\u0432\u0430\u043c \u043d\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0435<\/strong>.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u0447\u0442\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u0435\u0435 \u043d\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043e\u0442 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430<\/strong>: \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0434\u043b\u044f \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u043a\u0430\u043a \u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u0430, \u0442\u0430\u043a \u0438 \u0441 \u043f\u0443\u0441\u0442\u043e\u0433\u043e Gradle \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u2013 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u0441 \u043d\u0438\u043c\u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>  <\/p>\n<h4 id=\"zavisimosti-i-zadachi-gradle\">\u0417\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u0437\u0430\u0434\u0430\u0447\u0438 Gradle<\/h4>\n<p>  <\/p>\n<p>\u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c React, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u0430 \u0435\u0449\u0435 \u043a\u043e\u0442\u043b\u0438\u043d\u043e\u0432\u0441\u043a\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 Gradle \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0448\u0430\u0433\u0435, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0431\u0435\u0434\u0438\u043c\u0441\u044f, \u0447\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0430\u0439\u043b\u0430 <code>build.gradle.kts<\/code> \u0435\u0441\u0442\u044c \u0431\u043b\u043e\u043a <code>repositories<\/code>. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>  <\/p>\n<p>\u0411\u043b\u043e\u043a \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 <code>dependencies<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 \u043d\u0443\u0436\u043d\u044b\u0435 \u0434\u043b\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">dependencies {     \/\/ React, React DOM + Wrappers (\u0448\u0430\u0433 3)     implementation(&quot;org.jetbrains:kotlin-react:17.0.1-pre.148-kotlin-1.4.21&quot;)     implementation(&quot;org.jetbrains:kotlin-react-dom:17.0.1-pre.148-kotlin-1.4.21&quot;)     implementation(npm(&quot;react&quot;, &quot;17.0.1&quot;))     implementation(npm(&quot;react-dom&quot;, &quot;17.0.1&quot;))      \/\/ Kotlin Styled (\u0448\u0430\u0433 3)     implementation(&quot;org.jetbrains:kotlin-styled:5.2.1-pre.148-kotlin-1.4.21&quot;)     implementation(npm(&quot;styled-components&quot;, &quot;~5.2.1&quot;))      \/\/ Video Player (\u0448\u0430\u0433 7)     implementation(npm(&quot;react-youtube-lite&quot;, &quot;1.0.1&quot;))      \/\/ Share Buttons (\u0448\u0430\u0433 7)     implementation(npm(&quot;react-share&quot;, &quot;~4.2.1&quot;))      \/\/ Coroutines (\u0448\u0430\u0433 8)     implementation(&quot;org.jetbrains.kotlinx:kotlinx-coroutines-core:1.4.3&quot;) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b, IDEA \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f Gradle \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432. \u0418\u043c\u043f\u043e\u0440\u0442 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u043d\u0430\u0436\u0430\u0432 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 <strong> Reimport All Gradle Projects<\/strong> \u0432 \u0442\u0443\u043b-\u043e\u043a\u043d\u0435 Gradle (\u0441\u0431\u043e\u043a\u0443 \u0441\u043f\u0440\u0430\u0432\u0430).<\/p>\n<p>  <\/p>\n<h4 id=\"html-stranica\">HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430<\/h4>\n<p>  <\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c JavaScript \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0443\u044e \u0441 \u043d\u0430\u0448\u0438\u043c JS \u0444\u0430\u0439\u043b\u043e\u043c HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u0435\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0444\u0430\u0439\u043b <code>src\/main\/resources\/index.html<\/code> \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;!doctype html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt;     &lt;meta charset=&quot;UTF-8&quot;&gt;     &lt;title&gt;Hello, Kotlin\/JS!&lt;\/title&gt; &lt;\/head&gt; &lt;body&gt;     &lt;div id=&quot;root&quot;&gt;&lt;\/div&gt;     &lt;script src=&quot;confexplorer.js&quot;&gt;&lt;\/script&gt; &lt;\/body&gt; &lt;\/html&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f Kotlin\/JS Gradle \u043f\u043b\u0430\u0433\u0438\u043d\u0443, \u0432\u0435\u0441\u044c \u043d\u0430\u0448 \u043a\u043e\u0434 \u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u044b (&quot;\u0437\u0430\u0431\u0430\u043d\u0434\u043b\u0435\u043d\u044b&quot;) \u0432 \u0435\u0434\u0438\u043d\u044b\u0439 JavaScript \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442, \u043d\u043e\u0441\u044f\u0449\u0438\u0439 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u043e\u0434\u043d\u043e \u0438\u043c\u044f. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432 HTML \u0444\u0430\u0439\u043b \u0432\u044b\u0437\u043e\u0432 \u0441\u043a\u0440\u0438\u043f\u0442\u0430 <code>confexplorer.js<\/code> (\u0437\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0431\u044b \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u044b\u043b \u043d\u0430\u0437\u0432\u0430\u043d, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u0430\u043a <code>followingAlong<\/code>, \u0438\u043c\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0431\u044b\u043b\u043e \u0431\u044b <code>followingAlong.js<\/code>).<\/p>\n<p>  <\/p>\n<p>\u0412\u044b\u043f\u043e\u043b\u043d\u044f\u044f \u043e\u0431\u044b\u0434\u0435\u043d\u043d\u0443\u044e <a href=\"https:\/\/faqs.skillcrush.com\/article\/176-where-should-js-script-tags-be-linked-in-html-documents\" rel=\"nofollow noopener noreferrer\">\u043a\u043e\u043d\u0432\u0435\u043d\u0446\u0438\u044e JavaScript<\/a>, \u043c\u044b \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u0432\u043a\u043b\u044e\u0447\u0430\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>#root<\/code>) \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u043e\u043d\u0446\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0441\u043a\u0440\u0438\u043f\u0442. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u0430 \u043a \u043c\u043e\u043c\u0435\u043d\u0442\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0430, \u0438 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043a \u043d\u0435\u0439 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043e\u0442 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430<\/strong>: \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043e\u043f\u044b\u0442 \u0441 HTML, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>onLoad<\/code> \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>body<\/code> \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0436\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u041e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 Kotlin\/JS \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 \u043a\u043e\u043d\u0446\u0435 <code>body<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c &quot;Hello, World&quot; \u0441 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439, \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u0433\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u2013 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0437\u0430\u043b\u0438\u0442\u043e\u0439 \u0441\u043f\u043b\u043e\u0448\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c. \u042d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u044c, \u0442\u043e \u0447\u0442\u043e \u043d\u0430\u0448 \u043a\u043e\u0434 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0431\u0435\u0437 \u043e\u0448\u0438\u0431\u043e\u043a. \u0414\u043b\u044f \u043a\u043e\u0434\u0430 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0444\u0430\u0439\u043b <code>src\/main\/kotlin\/Main.kt<\/code> \u0441 \u0442\u0430\u043a\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">import kotlinx.browser.document  fun main() {     document.bgColor = &quot;red&quot; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u0434.<\/p>\n<p>  <\/p>\n<h3 id=\"zapusk-servera-dlya-razrabotki\">\u0417\u0430\u043f\u0443\u0441\u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/h3>\n<p>  <\/p>\n<p>Kotlin\/JS Gradle \u043f\u043b\u0430\u0433\u0438\u043d \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 <strong>webpack-dev-server<\/strong>, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0445\u043e\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u044f\u043c\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e IDE \u0438 \u043d\u0435 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0432\u0435\u0431 \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440, \u0432\u044b\u0437\u0432\u0430\u0432 \u0437\u0430\u0434\u0430\u0447\u0443 <code>run<\/code> \u0438\u043b\u0438 <code>browserDevelopmentRun<\/code> \u0438\u0437 \u0442\u0443\u043b-\u043e\u043a\u043d\u0430 Gradle. \u041e\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u0438\u0431\u043e \u0432 \u0433\u0440\u0443\u043f\u043f\u0435 <code>other<\/code> (\u043a\u0430\u043a \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435), \u043b\u0438\u0431\u043e \u0432 <code>kotlin browser<\/code>:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/897\/290\/973\/897290973b762d0318e9a62b3971a221.png\" alt=\"\u0417\u0430\u0434\u0430\u0447\u0430 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430\"><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043d\u0435 \u0438\u0437 IDE, \u0430 \u0438\u0437 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c <code>.\/gradlew run<\/code> (<em>\u0432 Windows<\/em> Gradle \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e-\u0434\u0440\u0443\u0433\u043e\u043c\u0443: <code>.\\gradlew.bat run<\/code>).<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438 \u0437\u0430\u0431\u0430\u043d\u0434\u043b\u0438\u0442\u0441\u044f, \u0438 \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u043a\u0443\u043d\u0434 \u0434\u043e\u043b\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c\u0441\u044f \u043e\u043a\u043d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0441 \u043f\u0443\u0441\u0442\u043e\u0439 \u043a\u0440\u0430\u0441\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439, \u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0449\u0435\u0439, \u0447\u0442\u043e \u043d\u0430\u0448 \u043a\u043e\u0434 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0443\u0441\u043f\u0435\u0448\u043d\u043e:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/dc2\/12f\/22f\/dc212f22f7b4bd36e6d18600f87ef77a.png\" alt=\"\u041a\u0440\u0430\u0441\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\"><\/p>\n<p>  <\/p>\n<h4 id=\"vklyuchenie-goryachey-perezagruzki-hot-reload-aka-nepreryvnogo-rezhima\">\u0412\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0433\u043e\u0440\u044f\u0447\u0435\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 (hot reload) a.k.a. \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430<\/h4>\n<p>  <\/p>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u043a\u043e\u0434\u0435, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <em>\u0440\u0435\u0436\u0438\u043c \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438<\/em> \u2013 Kotlin\/JS \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0435\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0437\u043e\u0432 <code>run<\/code> \u0437\u0430\u0434\u0430\u0447\u0438 Gradle.<\/p>\n<p>  <\/p>\n<p>\u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0442\u0430\u043a\u0436\u0435 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u0439 \u0440\u0430\u043d\u0435\u0435 \u0432\u0435\u0431 \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d (\u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u0432 IDE \u043d\u0430 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u043a\u0432\u0430\u0434\u0440\u0430\u0442 \u2013 <strong>Stop<\/strong>; \u0435\u0441\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u2013 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 <code>Ctrl+C<\/code>).<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435 \u0437\u0430\u0434\u0430\u0447\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e IDEA, \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0444\u043b\u0430\u0433 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0437\u0430\u043f\u0443\u0441\u043a\u0430. \u042d\u0442\u0443 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e IDEA \u0441\u043e\u0437\u0434\u0430\u043b\u0430, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0438 Gradle \u0437\u0430\u0434\u0430\u0447\u0443, \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0435\u0435 \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/81c\/a95\/32c\/81ca9532c243740abf29334207164d52.png\" alt=\"\u041e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\"><\/p>\n<p>  <\/p>\n<p>\u0412 \u043e\u0442\u043a\u0440\u044b\u0432\u0448\u0435\u043c\u0441\u044f \u043e\u043a\u043d\u0435 <strong>Run\/Debug Configurations<\/strong> \u043d\u0430\u0434\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0444\u043b\u0430\u0433 <code>--continuous<\/code> \u0432 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/275\/194\/45d\/27519445d08e39e965416a2db3c07892.png\" alt=\"\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\"><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0435\u043b\u0435\u043d\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 <strong>Run<\/strong> (<code>|&gt;<\/code>) \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438\u0437 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430, \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a: <code>.\/gradlew run --continuous<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043a\u043e\u0433\u0434\u0430 Gradle \u0437\u0430\u0434\u0430\u0447\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 \u0441\u0438\u043d\u0438\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">document.bgColor = &quot;blue&quot;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0444\u0430\u0439\u043b, \u0447\u0435\u0440\u0435\u0437 \u043f\u0430\u0440\u0443 \u0441\u0435\u043a\u0443\u043d\u0434 \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u2013 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0438 \u043e\u043a\u0440\u0430\u0441\u0438\u0442\u044c\u0441\u044f \u0432 \u043d\u043e\u0432\u044b\u0439 \u0446\u0432\u0435\u0442.<\/p>\n<p>  <\/p>\n<p>\u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u043c. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u043a\u043e\u0434\u0435 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435, \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u043a\u043e\u0434\u043e\u043c \u043d\u0430 \u044d\u0442\u043e\u0439 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0434\u0438\u0438.<\/p>\n<p>  <\/p>\n<h4 id=\"primechanie-ot-perevodchika-naschet-nepreryvnoy-kompilyacii\">\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043e\u0442 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430 \u043d\u0430\u0441\u0447\u0435\u0442 \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438<\/h4>\n<p>  <\/p>\n<p>\u042f \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u044d\u0442\u043e\u0442 \u0440\u0435\u0436\u0438\u043c, \u0438, \u0435\u0441\u043b\u0438 \u0447\u0435\u0441\u0442\u043d\u043e, \u043e\u043d \u043c\u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u044b\u043c. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u043d\u043e\u0433\u0434\u0430 \u0431\u044b\u0432\u0430\u0435\u0442 \u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u0430, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0442\u0430\u043c \u0431\u044b\u043b\u0438 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043d\u0435\u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u044f \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u043d\u0438\u043c\u0430\u044e, \u0443\u0441\u043f\u0435\u043b\u0438 \u043b\u0438 \u0443\u0436\u0435 \u043f\u0435\u0440\u0435\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043e\u0434 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430. \u0412-\u0442\u0440\u0435\u0442\u044c\u0438\u0445, \u044d\u0442\u043e\u0442 \u0440\u0435\u0436\u0438\u043c \u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u0438\u0434\u0438\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0438 \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c Gradle \u0437\u0430\u0434\u0430\u0447\u0443, \u0442\u043e \u0435\u0441\u0442\u044c \u0441\u0430\u043c\u0430 \u0441\u0443\u0442\u044c \u0440\u0435\u0436\u0438\u043c\u0430 \u043d\u0430\u0440\u0443\u0448\u0430\u0435\u0442\u0441\u044f \u2013 \u0432\u0441\u0435 \u0435\u0449\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0440\u0443\u043a\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u044f \u0443\u0436\u0435 \u0433\u043e\u0434\u0430 \u0434\u0432\u0430, \u0441 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u043e\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Kotlin\/JS, \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e \u043a\u043e\u0434\u0430 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u044f \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0432\u0435\u0431 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435: \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 HTML \u0444\u0430\u0439\u043b. \u0414\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 <code>browserDevelopmentWebpack<\/code>, \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 \u043f\u0430\u043f\u043a\u0435 <code>build\/distributions<\/code> \u0438\u043b\u0438 \u0432 <code>build\/developmentExecutable<\/code>. \u041e\u0442\u0442\u0443\u0434\u0430 \u044f \u043f\u0435\u0440\u0435\u043d\u043e\u0448\u0443 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0444\u0430\u0439\u043b <code>index.html<\/code>, \u0438 \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0431\u0435\u0437\u043e\u0442\u043a\u0430\u0437\u043d\u043e \u0438 \u043f\u0440\u0435\u0434\u0435\u043b\u044c\u043d\u043e \u043b\u043e\u0433\u0438\u0447\u043d\u043e.<\/p>\n<p>  <\/p>\n<h3 id=\"na-start-vnimanie\">\u041d\u0430 \u0441\u0442\u0430\u0440\u0442, \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435&#8230;<\/h3>\n<p>  <\/p>\n<p>\u041c\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u043f\u0443\u0441\u0442\u043e\u0439 Kotlin\/JS \u043f\u0440\u043e\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0437\u0432\u0438\u0442\u044c\u0441\u044f \u0432\u043e \u0432\u0441\u0435 \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e. \u0412\u0440\u0435\u043c\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c!<\/p>\n<p>  <\/p>\n<blockquote><p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0448\u0430\u0433\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432 \u0432\u0435\u0442\u043a\u0435 <code>master<\/code> <a href=\"https:\/\/github.com\/kotlin-hands-on\/web-app-react-kotlin-js-gradle\/tree\/master\" rel=\"nofollow noopener noreferrer\">\u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.<\/p><\/blockquote>\n<p>  <\/p>\n<h2 id=\"a-namestep3shag-3-pervaya-stranica-na-reakte--statichnayaa\">\u0428\u0430\u0433 3. \u041f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0430 \u0420\u0435\u0430\u043a\u0442\u0435 \u2013 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u0430\u044f<\/h2>\n<p>  <\/p>\n<p>\u0412 \u043c\u0438\u0440\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0441 <em>Hello, World<\/em>. \u0422\u0430\u043a \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043d\u0430\u0448\u0443 \u043e\u0434\u043d\u043e\u0446\u0432\u0435\u0442\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u044f\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u043a\u043e\u0434 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>src\/main\/kotlin\/Main.kt<\/code> \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">import react.dom.* import kotlinx.browser.document  fun main() {     render(document.getElementById(&quot;root&quot;)) {         h1 {             +&quot;Hello, React+Kotlin\/JS!&quot;         }     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0432\u0448\u0435\u0433\u043e\u0441\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043c\u0430\u0433\u0438\u044e:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/ada\/0a2\/550\/ada0a25506506187b003da6597154be9.png\" alt=\"hello-world\"><\/p>\n<p>  <\/p>\n<p>\u0423\u0440\u0430, \u0432\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u0441\u0432\u043e\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0435\u0431 \u0441\u0430\u0439\u0442 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c \u041a\u043e\u0442\u043b\u0438\u043d\u0435 \u0441 \u0420\u0435\u0430\u043a\u0442\u043e\u043c! \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434. \u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>render<\/code> \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 <a href=\"https:\/\/github.com\/JetBrains\/kotlin-wrappers\/tree\/master\/kotlin-react-dom\" rel=\"nofollow noopener noreferrer\">kotlin-react-dom<\/a> \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043d\u0430\u0448 <em>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/em> (\u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435) \u0432\u043d\u0443\u0442\u0440\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0415\u0441\u043b\u0438 \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0432 <code>src\/main\/resources\/index.html<\/code> \u0435\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 ID <code>root<\/code>, \u043a\u0430\u043a \u0440\u0430\u0437 \u0442\u0443\u0434\u0430 \u043c\u044b \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c. \u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u0435\u0439\u0447\u0430\u0441 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u2013 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f. \u0414\u043b\u044f \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e, \u0442\u043e \u0435\u0441\u0442\u044c HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0438\u043f\u043e\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 DSL.<\/p>\n<p>  <\/p>\n<h3 id=\"tipobezopasnyy-html\">\u0422\u0438\u043f\u043e\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 HTML<\/h3>\n<p>  <\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <a href=\"https:\/\/github.com\/JetBrains\/kotlin-wrappers\/blob\/master\/kotlin-react\/README.md\" rel=\"nofollow noopener noreferrer\">kotlin-react<\/a> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043a\u043e\u0442\u043b\u0438\u043d\u043e\u0432\u0441\u043a\u0443\u044e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f DSL, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0437\u0430\u043c\u0435\u043d\u044f\u044f \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 HTML \u043d\u0430 \u043d\u0435\u0447\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u043b\u0435\u0433\u043a\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0435. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0442\u0430\u043a\u043e\u0439 DSL \u0432\u0430\u043c \u043f\u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0438 \u043b\u0435\u0433\u0447\u0435 \u0432 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u0434 \u043d\u0430 \u041a\u043e\u0442\u043b\u0438\u043d\u0435 \u0434\u0430\u0435\u0442 \u043d\u0430\u043c \u0432\u0441\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430, \u043e\u0442 <em>\u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0442\u0438\u043f\u043e\u0432<\/em> \u0434\u043e <em>\u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/em>. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0438\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u0432\u044b \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u0442\u0435 <em>\u043c\u0435\u043d\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0432 \u043e\u0442\u043b\u0430\u0434\u043a\u0435<\/em>, \u043e\u0445\u043e\u0442\u044f\u0441\u044c \u0437\u0430 \u043e\u043f\u0435\u0447\u0430\u0442\u043a\u0430\u043c\u0438 \u0432 \u0438\u043c\u0435\u043d\u0430\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u0438 \u0443 \u0432\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f <em>\u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435<\/em> \u043e\u0442\u0442\u043e\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f!<\/p>\n<p>  <\/p>\n<p><strong>\u041e \u0437\u043d\u0430\u043a\u0435 <code>+<\/code><\/strong>:<\/p>\n<p>  <\/p>\n<p>\u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u0430\u044f \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u0432\u0435\u0449\u044c \u0432 \u043a\u043e\u0442\u043b\u0438\u043d\u043e\u0432\u0441\u043a\u043e\u043c \u043b\u0438\u0441\u0442\u0438\u043d\u0433\u0435 \u0432\u044b\u0448\u0435 \u2013 \u0437\u043d\u0430\u043a <code>+<\/code> \u043f\u0435\u0440\u0435\u0434 \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u044b\u043c \u043b\u0438\u0442\u0435\u0440\u0430\u043b\u043e\u043c. \u041f\u043e\u044f\u0441\u043d\u0438\u043c. <code>h1<\/code> \u2013 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0449\u0430\u044f \u043b\u044f\u043c\u0431\u0434\u0443 \u043a\u0430\u043a \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440. \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u0438\u0448\u0435\u043c <code>+<\/code>, \u043c\u044b \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c <a href=\"https:\/\/kotlinlang.org\/docs\/reference\/operator-overloading.html\" rel=\"nofollow noopener noreferrer\">\u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0439 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440<\/a> <code>unaryPlus<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u043e\u043a\u0440\u0443\u0436\u0430\u044e\u0449\u0438\u0439 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0449\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044e <code>+<\/code> \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u0430\u043a \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e &quot;\u0434\u043e\u0431\u0430\u0432\u044c \u043c\u043e\u044e \u0441\u0442\u0440\u043e\u0447\u043a\u0443 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u044c \u044d\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430&quot;.<\/p>\n<p>  <\/p>\n<h4 id=\"perepisyvaem-klassicheskiy-html\">\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 HTML<\/h4>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043c\u044b\u0441\u043b\u0438 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043d\u0430\u0448 \u0441\u0430\u0439\u0442, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0440\u0430\u0437\u0443 \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u043d\u0430\u0448 (\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u044b\u0439) \u043d\u0430\u0431\u0440\u043e\u0441\u043e\u043a \u0432 \u043a\u043e\u0442\u043b\u0438\u043d\u043e\u0432\u0441\u043a\u043e\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 HTML. \u0415\u0441\u043b\u0438 \u0432\u044b \u0443\u0436\u0435 \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0439 HTML, \u0443 \u0432\u0430\u0441 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0438 \u0441 \u043a\u043e\u0442\u043b\u0438\u043d\u043e\u0432\u0441\u043a\u0438\u043c. \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c HTML:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;h1&gt;KotlinConf Explorer&lt;\/h1&gt; &lt;div&gt;     &lt;h3&gt;Videos to watch&lt;\/h3&gt;     &lt;p&gt;John Doe: Building and breaking things&lt;\/p&gt;     &lt;p&gt;Jane Smith: The development process&lt;\/p&gt;     &lt;p&gt;Matt Miller: The Web 7.0&lt;\/p&gt;      &lt;h3&gt;Videos watched&lt;\/h3&gt;     &lt;p&gt;Tom Jerry: Mouseless development&lt;\/p&gt; &lt;\/div&gt; &lt;div&gt;     &lt;h3&gt;John Doe: Building and breaking things&lt;\/h3&gt;     &lt;img src=&quot;https:\/\/via.placeholder.com\/640x360.png?text=Video+Player+Placeholder&quot;&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u0435\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0432 Kotlin DSL. \u041a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u044f\u043c\u043e\u043b\u0438\u043d\u0435\u0439\u043d\u0430. \u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u0443\u043f\u0440\u0430\u0436\u043d\u044f\u0442\u044c\u0441\u044f, \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, <strong>\u043d\u0435 \u043f\u043e\u0434\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u044f<\/strong> \u0432 \u043b\u0438\u0441\u0442\u0438\u043d\u0433 \u043d\u0438\u0436\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">h1 {     +&quot;KotlinConf Explorer&quot; } div {     h3 {         +&quot;Videos to watch&quot;     }     p {         +&quot;John Doe: Building and breaking things&quot;     }     p {         +&quot;Jane Smith: The development process&quot;     }     p {         +&quot;Matt Miller: The Web 7.0&quot;     }      h3 {         +&quot;Videos watched&quot;     }     p {         +&quot;Tom Jerry: Mouseless development&quot;     } } div {     h3 {         +&quot;John Doe: Building and breaking things&quot;     }     img {        attrs {            src = &quot;https:\/\/via.placeholder.com\/640x360.png?text=Video+Player+Placeholder&quot;        }     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u043f\u0438\u0448\u0438\u0442\u0435 \u0438\u043b\u0438 \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u044d\u0442\u043e\u0442 \u043b\u0438\u0441\u0442\u0438\u043d\u0433 \u0432\u043d\u0443\u0442\u0440\u044c \u0432\u044b\u0437\u043e\u0432\u0430 <code>render<\/code>. \u0415\u0441\u043b\u0438 IntelliJ IDEA \u0440\u0443\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b, \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0437\u043e\u0432\u0438\u0442\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0431\u044b\u0441\u0442\u0440\u044b\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f (quick-fixes) \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Alt+Enter<\/code>. \u041a\u043e\u0433\u0434\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u0430, \u0432\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u044d\u043a\u0440\u0430\u043d:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/aff\/20b\/47c\/aff20b47c153c8002fea293f13976a4b.png\" alt=\"kotlinconf-placeholder\"><\/p>\n<p>  <\/p>\n<h3 id=\"ispolzovanie-kotlinovskih-yazykovyh-konstrukciy-v-razmetke\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0442\u043b\u0438\u043d\u043e\u0432\u0441\u043a\u0438\u0445 \u044f\u0437\u044b\u043a\u043e\u0432\u044b\u0445 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435<\/h3>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 HTML \u043d\u0430 DSL \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0438\u043c\u0435\u0435\u0442 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u0447\u0438\u0441\u0442\u044b\u043c HTML. \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u2013 \u044d\u0442\u043e \u0442\u043e \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0436\u043e\u043d\u0433\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <strong>\u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0435 \u043d\u0430\u043c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u044f\u0437\u044b\u043a\u0430<\/strong>. \u0423\u0441\u043b\u043e\u0432\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b, \u0446\u0438\u043a\u043b\u044b, \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438, \u043f\u043e\u0434\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u043e\u043a \u2013 \u0432\u0441\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 HTML DSL \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u043e\u0431\u044b\u0447\u043d\u043e \u0432 \u041a\u043e\u0442\u043b\u0438\u043d\u0435.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u043c\u0435\u0441\u0442\u043e \u0437\u0430\u0445\u0430\u0440\u0434\u043a\u043e\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u0432\u0438\u0434\u0435\u043e \u043e\u0431\u044a\u044f\u0432\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e-\u0441\u043f\u0438\u0441\u043e\u043a \u0438 \u0431\u0443\u0434\u0435\u043c \u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043b\u0430\u0441\u0441 <code>KotlinVideo<\/code>, \u0447\u0442\u043e\u0431\u044b \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432\u0438\u0434\u0435\u043e (\u043a\u043b\u0430\u0441\u0441 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043b\u0438\u0431\u043e \u0432 <code>Main.kt<\/code>, \u043b\u0438\u0431\u043e \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u2013 \u043a\u0430\u043a \u0445\u043e\u0442\u0438\u0442\u0435), \u0430 \u0442\u0430\u043a\u0436\u0435 <code>external<\/code> \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u2013 \u043e \u043d\u0435\u043c \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u043e\u0437\u0436\u0435, \u043a\u043e\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e API:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">external interface Video {     val id: Int     val title: String     val speaker: String     val videoUrl: String }  data class KotlinVideo(     override val id: Int,     override val title: String,     override val speaker: String,     override val videoUrl: String ) : Video<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0442\u043e\u043c \u043e\u0431\u044a\u044f\u0432\u0438\u043c \u0434\u0432\u0430 \u0441\u043f\u0438\u0441\u043a\u0430: \u0434\u043b\u044f \u043d\u0435\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0445 \u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0445 \u0432\u0438\u0434\u0435\u043e. \u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0432 \u0444\u0430\u0439\u043b\u0435 <code>Main.kt<\/code> \u043d\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0440\u043e\u0432\u043d\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">val unwatchedVideos = listOf(     KotlinVideo(1, &quot;Building and breaking things&quot;, &quot;John Doe&quot;, &quot;https:\/\/youtu.be\/PsaFVLr8t4E&quot;),     KotlinVideo(2, &quot;The development process&quot;, &quot;Jane Smith&quot;, &quot;https:\/\/youtu.be\/PsaFVLr8t4E&quot;),     KotlinVideo(3, &quot;The Web 7.0&quot;, &quot;Matt Miller&quot;, &quot;https:\/\/youtu.be\/PsaFVLr8t4E&quot;) )  val watchedVideos = listOf(     KotlinVideo(4, &quot;Mouseless development&quot;, &quot;Tom Jerry&quot;, &quot;https:\/\/youtu.be\/PsaFVLr8t4E&quot;) )<\/code><\/pre>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 HTML, \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e, \u043a\u0440\u043e\u043c\u0435 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u041a\u043e\u0442\u043b\u0438\u043d\u0430! \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0434\u043b\u044f \u043f\u0440\u043e\u0445\u043e\u0434\u0430 \u043f\u043e \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438. \u0422\u043e \u0435\u0441\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u0440\u0435\u0445 \u0442\u0435\u0433\u043e\u0432 <code>p<\/code> \u0434\u043b\u044f \u043d\u0435\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0445 \u0432\u0438\u0434\u0435\u043e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u043e\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">for (video in unwatchedVideos) {     p {         +&quot;${video.speaker}: ${video.title}&quot;     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 <code>watchedVideos<\/code>. \u041f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u044b \u0443\u0431\u0435\u0434\u0438\u043c\u0441\u044f, \u0447\u0442\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c\u0443 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0443. \u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0446\u0438\u043a\u043b\u044b \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0441\u043f\u0438\u0441\u043a\u0438.<\/p>\n<p>  <\/p>\n<h3 id=\"tipobezopasnyy-css\">\u0422\u0438\u043f\u043e\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 CSS<\/h3>\n<p>  <\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u043c\u044b \u0443\u0436\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u043b\u0438\u0441\u044c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u043d\u043e \u043d\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0430\u0443\u0437\u0443: \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 <em>\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u0435\u0437\u0432\u043a\u0443\u0441\u043d\u043e<\/em> \u0438 <em>\u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u043e<\/em>. \u0414\u043b\u044f \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c <code>.css<\/code> \u0444\u0430\u0439\u043b \u0432 \u043d\u0430\u0448 \u0444\u0430\u0439\u043b <code>index.html<\/code>, \u043d\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043b\u0443\u0447\u0448\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0441\u043b\u0443\u0447\u0430\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f \u0441 Kotlin DSL \u043e\u043f\u044f\u0442\u044c \u2013 \u043d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u0441 CSS.<\/p>\n<p>  <\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <a href=\"https:\/\/github.com\/JetBrains\/kotlin-wrappers\/tree\/master\/kotlin-styled\" rel=\"nofollow noopener noreferrer\">kotlin-styled<\/a> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0447\u0443\u0434\u0435\u0441\u043d\u044b\u0435 \u0442\u0438\u043f\u043e\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0435 \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0434\u043b\u044f <a href=\"https:\/\/www.styled-components.com\/\" rel=\"nofollow noopener noreferrer\">styled-components<\/a> \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u043a\u0430\u043a <a href=\"https:\/\/github.com\/JetBrains\/kotlin-wrappers\/blob\/master\/kotlin-styled\/README.md#global-styles\" rel=\"nofollow noopener noreferrer\">\u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e<\/a>, \u0442\u0430\u043a \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u0438 \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430 \u043a\u043e\u043d\u0446\u0435\u043f\u0442 <a href=\"https:\/\/reactjs.org\/docs\/faq-styling.html#what-is-css-in-js\" rel=\"nofollow noopener noreferrer\">CSS-in-JS<\/a>. \u041e\u043f\u0438\u0441\u044b\u0432\u0430\u044f \u0441\u0442\u0438\u043b\u0438 <em>\u043d\u0430 \u041a\u043e\u0442\u043b\u0438\u043d\u0435<\/em>, \u043c\u044b \u043e\u043f\u044f\u0442\u044c \u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0440\u0430\u0442\u043a\u0438\u0435, \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0435 \u0438 \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0435 \u044f\u0437\u044b\u043a\u043e\u0432\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0448\u0430\u0433\u043e\u0432 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e CSS DSL, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e Gradle. \u0412\u043e\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0431\u043b\u043e\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">dependencies {     \/\/...     \/\/ Kotlin Styled (\u0448\u0430\u0433 3)     implementation(&quot;org.jetbrains:kotlin-styled:5.2.1-pre.148-kotlin-1.4.21&quot;)     implementation(npm(&quot;styled-components&quot;, &quot;~5.2.1&quot;))     \/\/... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u043c\u0435\u0441\u0442\u043e \u0431\u043b\u043e\u043a\u043e\u0432 \u0432\u0440\u043e\u0434\u0435 <code>div<\/code> \u0438\u043b\u0438 <code>h3<\/code> \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0430\u043d\u0430\u043b\u043e\u0433\u0438 \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c <code>styled<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>styledDiv<\/code> \u0438\u043b\u0438 <code>styledH3<\/code>. \u0412\u043d\u0443\u0442\u0440\u0438 \u0438\u0445 \u0442\u0435\u043b \u0441\u0442\u0438\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0431\u043b\u043e\u043a\u0430 <code>css<\/code>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0441\u0434\u0432\u0438\u0433\u0430 \u0432\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440\u0430 \u0432 \u043f\u0440\u0430\u0432\u044b\u0439 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0443\u0433\u043e\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">styledDiv {     css {         position = Position.absolute         top = 10.px         right = 10.px     }     h3 {         +&quot;John Doe: Building and breaking things&quot;     }     img {         attrs {             src = &quot;https:\/\/via.placeholder.com\/640x360.png?text=Video+Player+Placeholder&quot;         }     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, IDEA \u043d\u0430\u0447\u043d\u0435\u0442 \u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u044d\u0442\u0438\u0445 \u043e\u0448\u0438\u0431\u043e\u043a, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0438\u043c\u043f\u043e\u0440\u0442\u044b \u0441\u0432\u0435\u0440\u0445\u0443 \u0432 \u0444\u0430\u0439\u043b\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">import kotlinx.css.* import styled.*<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u044b\u0441\u0442\u0440\u044b\u043c\u0438 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Alt+Enter<\/code> \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043f\u0440\u0438\u0432\u0435\u043b\u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440. \u041d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u2013 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u0430\u043a \u0434\u0443\u0448\u0435 \u0443\u0433\u043e\u0434\u043d\u043e. \u041c\u043e\u0436\u0435\u0442\u0435 \u0434\u0430\u0436\u0435 \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f \u0441 CSS Grids, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u043c (\u043d\u043e \u044d\u0442\u0430 \u0442\u0435\u043c\u0430 \u0443\u0436\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0441\u043b\u043e\u0436\u043d\u0430 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0430). \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0448\u0440\u0438\u0444\u0442 (\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>fontFamily<\/code>) \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0431\u0435\u0437 \u0437\u0430\u0441\u0435\u0447\u0435\u043a (\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>sans-serif<\/code>), \u0438\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0433\u0430\u0440\u043c\u043e\u043d\u0438\u0447\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 (\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>color<\/code>).<\/p>\n<p>  <\/p>\n<blockquote><p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0448\u0430\u0433\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432 \u0432\u0435\u0442\u043a\u0435 <code>step-02-first-static-page<\/code> <a href=\"https:\/\/github.com\/kotlin-hands-on\/web-app-react-kotlin-js-gradle\/tree\/step-02-first-static-page\" rel=\"nofollow noopener noreferrer\">\u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.<\/p><\/blockquote>\n<p>  <\/p>\n<h2 id=\"a-namestep4shag-4-react--o-reakciyah-nash-pervyy-komponenta\">\u0428\u0430\u0433 4. React \u2013 \u043e \u0440\u0435\u0430\u043a\u0446\u0438\u044f\u0445. \u041d\u0430\u0448 \u043f\u0435\u0440\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/h2>\n<p>  <\/p>\n<h3 id=\"osnovnaya-ideya\">\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0434\u0435\u044f<\/h3>\n<p>  <\/p>\n<p>\u0411\u0430\u0437\u043e\u0432\u044b\u0435 \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 \u0432 \u0420\u0435\u0430\u043a\u0442\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f <strong>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438<\/strong>. \u041a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u0443\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0447\u0430\u0441\u0442\u044c \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432 \u0441\u0432\u043e\u044e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0435\u0439 \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u043e\u043b\u0435\u0435 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0414\u0435\u043b\u0430\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u043c\u0438 \u0438 \u043e\u0431\u043e\u0431\u0449\u0435\u043d\u043d\u044b\u043c\u0438, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u0438\u0445 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u0442 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, <em>\u043d\u0435 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u044f<\/em> \u043a\u043e\u0434 \u0438\/\u0438\u043b\u0438 \u043b\u043e\u0433\u0438\u043a\u0443.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, <em>\u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/em> \u043d\u0430\u0448\u0435\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0415\u0441\u043b\u0438 \u043c\u044b \u043e\u0442\u043c\u0435\u0442\u0438\u043c \u0435\u0433\u043e \u0440\u0430\u043c\u043a\u043e\u0439, \u0442\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/f70\/411\/691\/f70411691aa04c00591ceefbeda5b3d9.png\" alt=\"root-component\"><\/p>\n<p>  <\/p>\n<p>\u0410 \u0435\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u044e \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/a5f\/b36\/ef7\/a5fb36ef7172f53642a2e5364fb19319.png\" alt=\"split-components\"><\/p>\n<p>  <\/p>\n<h3 id=\"kornevoy-komponent\">\u041a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/h3>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u043e\u0431\u044c\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0435\u0433\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439. \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u044f\u0432\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>App<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043a\u043e\u0440\u043d\u0435\u0432\u044b\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <code>App.kt<\/code> \u043f\u043e \u043f\u0443\u0442\u0438 <code>src\/main\/kotlin<\/code> \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u0412\u043d\u0443\u0442\u0440\u0438 \u0444\u0430\u0439\u043b\u0430 \u043e\u043f\u0438\u0448\u0435\u043c \u043a\u043b\u0430\u0441\u0441 <code>App<\/code>, \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 <code>RComponent<\/code> (\u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043e\u0442 <strong>R<\/strong>eact <strong>Component<\/strong>). \u0414\u0436\u0435\u043d\u0435\u0440\u0438\u043a\u0438 \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 (<code>RProps<\/code> \u0438 <code>RState<\/code>), \u0430 \u043f\u043e\u0442\u043e\u043c \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u0438 \u0441 \u043d\u0438\u043c\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">import react.*  @JsExport class App : RComponent&lt;RProps, RState&gt;() {      override fun RBuilder.render() {         \/\/ \u041f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u0441\u044e\u0434\u0430 \u0442\u0438\u043f\u043e\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 HTML!     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u0435 \u0432\u0435\u0441\u044c \u043d\u0430\u0448 \u0442\u0438\u043f\u043e\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 HTML \u0432\u043d\u0443\u0442\u0440\u044c \u043d\u043e\u0432\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>render<\/code>. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043b\u0438 \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u043d\u044b\u0439 \u044f\u0432\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0422\u0435\u043f\u0435\u0440\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>main<\/code> \u0434\u043e\u043b\u0436\u043d\u0430 \u043a\u0430\u043a-\u0442\u043e \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 <code>App<\/code>. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e: \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0420\u0435\u0430\u043a\u0442\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>App<\/code> \u043a\u0430\u043a \u0440\u0435\u0431\u0435\u043d\u043a\u0430 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>child<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">fun main() {     render(document.getElementById(&quot;root&quot;)) {         child(App::class) {}     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u0445\u043e\u0434\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0442\u0430\u043a \u0447\u0442\u043e \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u044b \u0441\u0442\u0430\u043d\u0435\u0442\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0438\u0445 \u043b\u0443\u0447\u0448\u0435. \u041d\u043e \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u043d\u044b\u0440\u043d\u0443\u0442\u044c \u0432 \u0420\u0435\u0430\u043a\u0442 \u043f\u043e\u0433\u043b\u0443\u0431\u0436\u0435, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c \u0438\u0437\u0443\u0447\u0438\u0442\u044c <a href=\"https:\/\/reactjs.org\/docs\/hello-world.html#how-to-read-this-guide\" rel=\"nofollow noopener noreferrer\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438 \u0433\u0430\u0439\u0434\u044b<\/a>.<\/p>\n<p>  <\/p>\n<h3 id=\"komponent-dlya-spiska\">\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043f\u0438\u0441\u043a\u0430<\/h3>\n<p>  <\/p>\n<p>\u041a\u0430\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u044e\u0442\u0441\u044f? \u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, <em>\u0441\u043f\u0438\u0441\u043a\u0438 \u0432\u0438\u0434\u0435\u043e<\/em> \u2013 \u0438 \u044d\u0442\u043e \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u043e. \u0422\u0430\u043a \u043a\u0430\u043a \u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u043d\u0435\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u043e\u0433\u043e, \u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u043c\u0435\u044e\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0435\u0441\u0442\u044c \u0441\u043c\u044b\u0441\u043b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0435\u0434\u0438\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e.<\/p>\n<p>  <\/p>\n<p>\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0432 \u043d\u043e\u0432\u043e\u043c \u0444\u0430\u0439\u043b\u0435 <code>VideoList.kt<\/code>. \u041f\u043e\u0434\u043e\u0431\u043d\u043e \u043a\u043b\u0430\u0441\u0441\u0443 <code>App<\/code>, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043b\u0430\u0441\u0441 <code>VideoList<\/code>, \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 <code>RComponent<\/code> \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 HTML DSL \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c <code>unwatchedVideos<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">import react.* import react.dom.*  @JsExport class VideoList : RComponent&lt;RProps, RState&gt;() {      override fun RBuilder.render() {         for (video in unwatchedVideos) {             p {                 +&quot;${video.speaker}: ${video.title}&quot;             }         }     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0447\u0430\u0441\u0442\u044c \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u0430\u043c\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 <code>App<\/code> \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u043e\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">div {     h3 {         +&quot;Videos to watch&quot;     }     child(VideoList::class) {}      h3 {         +&quot;Videos watched&quot;     }     child(VideoList::class) {} }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0437\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443: <code>App<\/code> \u043d\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u0441\u043f\u0438\u0441\u043a\u0430. \u0421\u0435\u0439\u0447\u0430\u0441 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0437\u0430\u0445\u0430\u0440\u0434\u043a\u043e\u0436\u0435\u043d\u043e \u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0435. \u0412\u044b\u0445\u043e\u0434\u0438\u0442, \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 <em>\u0432\u043d\u0443\u0442\u0440\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/em>.<\/p>\n<p>  <\/p>\n<h3 id=\"dobavlyaem-atributy\">\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b<\/h3>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c, \u0447\u0442\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430-\u0441\u043f\u0438\u0441\u043a\u0430 \u043c\u044b \u0431\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u0440\u0430\u0437\u043d\u044b\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0432\u043c\u0435\u0441\u0442\u043e \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u043c\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u0431\u044b \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432\u043d\u0435\u0448\u043d\u0435 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u043a\u0430\u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b. \u0412 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0420\u0435\u0430\u043a\u0442\u0430 \u0442\u0430\u043a\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f <code>props<\/code>. \u041a\u043e\u0433\u0434\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f, \u0420\u0435\u0430\u043a\u0442 \u0431\u0435\u0440\u0435\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f \u0437\u0430\u0434\u0430\u0447\u0443 \u043f\u043e \u0438\u0445 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u043f\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u043e\u043a\u043b\u0430\u0434\u043e\u0432. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043d\u0430\u0448 \u043a\u043e\u0434. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>VideoList.kt<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">external interface VideoListProps : RProps {     var videos: List&lt;Video&gt; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 <code>VideoList<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u044d\u0442\u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@JsExport class VideoList : RComponent&lt;VideoListProps, RState&gt;() {      override fun RBuilder.render() {         for (video in props.videos) {             p {                 key = video.id.toString()                 +&quot;${video.speaker}: ${video.title}&quot;             }         }     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u043e (\u0442\u043e \u0435\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0440\u0430\u043d\u0442\u0430\u0439\u043c\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f, \u043c\u044b \u0442\u0430\u043a \u0438 \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0448\u0430\u0433\u0430\u0445), \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>key<\/code> \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430. \u041e\u043d \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0420\u0435\u0430\u043a\u0442\u0443 \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c, \u0430 \u043a\u0430\u043a\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u2013 \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u0438 \u043f\u043e\u0447\u0442\u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0430\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f! \u0411\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043d\u0430\u0441\u0447\u0435\u0442 \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0438 \u043a\u043b\u044e\u0447\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 <a href=\"https:\/\/reactjs.org\/docs\/lists-and-keys.html\" rel=\"nofollow noopener noreferrer\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0433\u0430\u0439\u0434\u0435 \u0420\u0435\u0430\u043a\u0442\u0430<\/a>.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043d\u0430 \u043c\u0435\u0441\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <code>VideoList<\/code> (\u0432\u043d\u0443\u0442\u0440\u0438 <code>App<\/code>) \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b. \u041f\u043e\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 <code>unwatchedVideos<\/code> \u0438 <code>watchedVideos<\/code> \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">child(VideoList::class) {     attrs.videos = unwatchedVideos }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0447\u0442\u043e \u0441\u043f\u0438\u0441\u043a\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f, \u043a\u0430\u043a \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043e. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043e\u0431\u044f\u0437\u0430\u043d\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u043f\u0438\u0441\u043a\u0430 \u0432\u0438\u0434\u0435\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0443\u043a\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u043b\u0435\u0433\u043a\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u044b\u043c \u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c\u044b\u043c \u043a\u0430\u043a \u0434\u043b\u044f \u043d\u0430\u0441, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u043a\u043e\u043b\u043b\u0435\u0433.<\/p>\n<p>  <\/p>\n<h3 id=\"umenshaem-gromozdkost-vyzova\">\u0423\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u043c \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u043e\u0441\u0442\u044c \u0432\u044b\u0437\u043e\u0432\u0430<\/h3>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0442\u043e\u0436\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0435\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u0440\u0443\u0442\u0443\u044e \u043a\u043e\u0442\u043b\u0438\u043d\u043e\u0432\u0441\u043a\u0443\u044e \u0444\u0438\u0447\u0443 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <a href=\"https:\/\/kotlinlang.org\/docs\/reference\/lambdas.html#function-literals-with-receiver\" rel=\"nofollow noopener noreferrer\">\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u0435\u043b\u0435\u043c<\/a>. \u0412\u044b\u0434\u0435\u043b\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u0435\u043b\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u043b\u0435\u0433\u0447\u0435: \u043e\u043d\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f, \u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">fun RBuilder.videoList(handler: VideoListProps.() -&gt; Unit): ReactElement {     return child(VideoList::class) {         attrs.handler()     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u043c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u044d\u0442\u043e\u043c \u043a\u043e\u0434\u0435: \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>videoList<\/code> \u043a\u0430\u043a <a href=\"https:\/\/kotlinlang.org\/docs\/reference\/extensions.html\" rel=\"nofollow noopener noreferrer\">\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435<\/a> \u0434\u043b\u044f \u0442\u0438\u043f\u0430 <code>RBuilder<\/code>. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>handler<\/code> \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044e-\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f <code>VideoListProps<\/code>, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0443\u044e <code>Unit<\/code>. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u044b\u0437\u043e\u0432 <code>child<\/code> (\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0438 <code>VideoList<\/code>), \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 <code>handler<\/code> \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 <code>attrs<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u043c\u044b\u0441\u043b \u0442\u0430\u043a\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u2013 \u043e\u0431\u043b\u0435\u0433\u0447\u0435\u043d\u0438\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430: \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">videoList {     videos = unwatchedVideos }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043e\u0431\u0449\u0435\u043c, \u043c\u044b \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0437 \u0432\u044b\u0437\u043e\u0432\u0430 \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u043b\u043e\u0432\u0430 \u0442\u0438\u043f\u0430 <code>child<\/code>, <code>class<\/code> \u0438 <code>attrs<\/code>, \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0438\u043c\u0432\u043e\u043b\u044b. \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0435. \u0417\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u0442\u0440\u044e\u043a! \u041f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u043f\u043e\u0442\u0440\u0435\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u0442\u044c \u0434\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u0430 <code>App<\/code>.<\/p>\n<p>  <\/p>\n<h3 id=\"dobavlyaem-interaktivnost\">\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/h3>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0446\u0435\u043b\u044c \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430-\u0441\u043f\u0438\u0441\u043a\u0430 \u2013 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0435\u043e \u0434\u043b\u044f \u043f\u043e\u043a\u0430\u0437\u0430 \u0432 \u0432\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440\u0435. \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0441\u043f\u0438\u0441\u043a\u0430. \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e: \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0432\u0438\u0434\u0435\u043e \u0432 \u0434\u0438\u0430\u043b\u043e\u0433\u0435 <code>alert<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u0434 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>VideoList.render<\/code>. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>p<\/code> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u0431\u044b \u0432 \u0434\u0438\u0430\u043b\u043e\u0433\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">p {     key = video.id.toString()     attrs {         onClickFunction = {             window.alert(&quot;Clicked $video!&quot;)         }     }     +&quot;${video.speaker}: ${video.title}&quot; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 IntelliJ IDEA \u043f\u0440\u043e\u0441\u0438\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u043c\u043f\u043e\u0440\u0442\u044b, \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e <code>Alt+Enter<\/code>. \u0418\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u043c\u043f\u043e\u0440\u0442\u044b \u0432\u0440\u0443\u0447\u043d\u0443\u044e:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">import kotlinx.html.js.onClickFunction import kotlinx.browser.window<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/07f\/85e\/867\/07f85e8677b33e952fdc2734aee60e95.png\" alt=\"alert\"><\/p>\n<p>  <\/p>\n<blockquote><p>\u041e\u0444\u043e\u0440\u043c\u043b\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>onClickFunction<\/code> \u043a\u0430\u043a \u043b\u044f\u043c\u0431\u0434\u0443 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043a\u043e\u0440\u043e\u0442\u043a\u043e, \u0438 \u044d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0434\u043b\u044f \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u041e\u0434\u043d\u0430\u043a\u043e \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u043d\u043e\u0441\u0442\u044c \u0441\u0441\u044b\u043b\u043e\u043a \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 Kotlin\/JS \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 <a href=\"https:\/\/youtrack.jetbrains.com\/issue\/KT-15101\" rel=\"nofollow noopener noreferrer\">\u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e<\/a>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u043b\u044f\u043c\u0431\u0434\u044b \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0430 \u0432 \u043f\u043b\u0430\u043d\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u043d\u0435\u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0434\u043b\u044f <code>onClickFunction<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u044d\u0442\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435.<\/p><\/blockquote>\n<p>  <\/p>\n<h3 id=\"dobavlyaem-sostoyanie\">\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/h3>\n<p>  <\/p>\n<p>\u041d\u0435 \u0443\u0441\u0442\u0430\u043b\u0438?<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0432\u0438\u0434\u0435\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u044b\u0432\u043e\u0434\u0430 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f. \u0411\u0443\u0434\u0435\u043c \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u0432\u0438\u0434\u0435\u043e \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u043c (<code>|&gt;<\/code>). \u0420\u0435\u0430\u043a\u0442 \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u2013 \u043e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0432\u0435\u0441\u0442\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 <em>\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/em> \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u2013 \u043d\u0430\u0434\u043e \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">external interface VideoListState : RState {     var selectedVideo: Video? }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u043d\u0430\u0434\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u041f\u043e\u0434\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 <code>VideoList<\/code>, \u0447\u0442\u043e\u0431\u044b \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0438\u043f\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <code>VideoListState<\/code> \u2013 \u043d\u0443\u0436\u043d\u043e \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0442 <code>RComponent&lt;..., VideoListState&gt;<\/code>.<\/li>\n<li>\u041f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u0434\u043b\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0435\u043e \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430.<\/li>\n<li>\u0412\u043d\u0443\u0442\u0440\u0438 <code>onClickFunction<\/code> \u043d\u0430\u0434\u043e \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <code>selectedVideo<\/code> \u0442\u043e \u0432\u0438\u0434\u0435\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443. \u0427\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u043b\u0441\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043a\u043e\u0434 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043b\u044f\u043c\u0431\u0434\u0443 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0435\u0435 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>setState<\/code>. <\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u043a\u043b\u0430\u0441\u0441:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@JsExport class VideoList : RComponent&lt;VideoListProps, VideoListState&gt;() {      override fun RBuilder.render() {         for (video in props.videos) {             p {                 key = video.id.toString()                 attrs {                     onClickFunction = {                         setState {                             selectedVideo = video                         }                     }                 }                 if (video == state.selectedVideo) {                     +&quot;|&gt; &quot;                 }                 +&quot;${video.speaker}: ${video.title}&quot;             }         }     } }<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p><strong>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0442\u043e\u0438\u0442 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0443\u0442\u0440\u0438 <code>setState<\/code><\/strong>. \u0422\u0430\u043a \u0420\u0435\u0430\u043a\u0442 \u0441\u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 UI \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e.<\/p><\/blockquote>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u0448\u0430\u0433\u0435 \u0443 \u043d\u0430\u0441 \u0432\u0441\u0435, \u043d\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c <a href=\"https:\/\/reactjs.org\/docs\/faq-state.html\" rel=\"nofollow noopener noreferrer\">React FAQ<\/a>.<\/p>\n<p>  <\/p>\n<blockquote><p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0448\u0430\u0433\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432 \u0432\u0435\u0442\u043a\u0435 <code>step-03-first-component<\/code> <a href=\"https:\/\/github.com\/kotlin-hands-on\/web-app-react-kotlin-js-gradle\/tree\/step-03-first-component\" rel=\"nofollow noopener noreferrer\">\u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.<\/p><\/blockquote>\n<p>  <\/p>\n<h2 id=\"a-namestep5shag-5-rabotaem-sovmestno-kompoziciya-komponentova\">\u0428\u0430\u0433 5. \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e. \u041a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h2>\n<p>  <\/p>\n<p>\u0421\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u043c\u0438 \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0448\u0430\u0433\u0435 \u043f\u0430\u0440\u0430 \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0441\u0430\u043c\u0438 \u043f\u043e \u0441\u0435\u0431\u0435 \u0432\u043f\u043e\u043b\u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442. \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u043c\u044b \u043a\u043b\u0438\u043a\u043d\u0435\u043c \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u0432\u0438\u0434\u0435\u043e \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u043e\u0432, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u0442\u044c <em>\u0434\u0432\u0430 \u0432\u0438\u0434\u0435\u043e<\/em> \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e. \u042d\u0442\u043e \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u0432\u0435\u0434\u044c \u0443 \u043d\u0430\u0441 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u043f\u043b\u0435\u0435\u0440 \ud83d\ude42<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/188\/255\/3e3\/1882553e39a1d6e05dc7f3b637e2bb9d.png\" alt=\"pair\"><\/p>\n<p>  <\/p>\n<p>\u041f\u043e-\u0445\u043e\u0440\u043e\u0448\u0435\u043c\u0443, \u0443 \u043e\u0431\u043e\u0438\u0445 \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0435\u0434\u0438\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u2013 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u0432\u0438\u0434\u0435\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0434\u043d\u0438\u043c \u043d\u0430 \u0432\u0441\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041d\u043e \u0435\u0434\u0438\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 (\u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e) \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u041f\u0440\u0438\u043d\u044f\u0442\u043e \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430\u0432\u0435\u0440\u0445 (\u043a\u0430\u043a \u0435\u0449\u0435 \u0433\u043e\u0432\u043e\u0440\u044f\u0442, &quot;\u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0442\u044c&quot; \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435).<\/p>\n<p>  <\/p>\n<h3 id=\"vynos-sostoyaniya-naverh\">\u0412\u044b\u043d\u043e\u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0430\u0432\u0435\u0440\u0445<\/h3>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0440\u0438\u0431\u0438\u0432\u0430\u0442\u044c \u0433\u0432\u043e\u0437\u0434\u044f\u043c\u0438 \u0440\u0430\u0437\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u0440\u0443\u0433 \u043a \u0434\u0440\u0443\u0433\u0443 \u0438 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043f\u0430\u0433\u0435\u0442\u0442\u0438-\u043a\u043e\u0434, \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0420\u0435\u0430\u043a\u0442\u0430: \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0438\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0445\u043e\u0447\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u043e\u0441\u0435\u0434\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u044d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043e\u0431\u0449\u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f. \u0417\u043d\u0430\u0447\u0438\u0442, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043d\u0435 \u0432 \u0441\u043e\u0441\u0435\u0434\u043d\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435. \u041c\u0438\u0433\u0440\u0430\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <strong>\u0432\u044b\u043d\u043e\u0441\u043e\u043c<\/strong> \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435! \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, <code>App<\/code>. \u0411\u0443\u0434\u0435\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0434\u043b\u044f <code>VideoList<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u044a\u044f\u0432\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">external interface AppState : RState {     var currentVideo: Video? }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u0441\u043e\u0448\u043b\u0435\u043c\u0441\u044f \u043d\u0430 \u043d\u0435\u0433\u043e \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 <code>App<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@JsExport class App : RComponent&lt;RProps, AppState&gt;()<\/code><\/pre>\n<p>  <\/p>\n<p>\u0423\u0434\u0430\u043b\u0438\u043c <code>VideoListState<\/code>, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u044d\u0442\u0443 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432\u044b\u0448\u0435. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u043c\u044b \u0432\u043e\u043e\u0431\u0449\u0435 \u0443\u0431\u0440\u0430\u043b\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0443 \u0441\u043f\u0438\u0441\u043a\u0430, \u0442\u0430\u043a \u0447\u0442\u043e \u0432\u0435\u0440\u043d\u0435\u043c \u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u043c\u0443 \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043a\u043b\u0430\u0441\u0441\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@JsExport class VideoList : RComponent&lt;VideoListProps, RState&gt;()<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u0432\u043d\u0438\u0437 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0435\u043e \u0438\u0437 <code>App<\/code> \u0432 <code>VideoList<\/code> \u043a\u0430\u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <code>VideoListProps<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u0432\u0438\u0434\u0435\u043e:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">external interface VideoListProps : RProps {     var videos: List&lt;Video&gt;     var selectedVideo: Video? }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u043f\u0440\u0430\u0432\u0438\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u0434\u043b\u044f \u043f\u043e\u043a\u0430\u0437\u0430 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0435\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">if (video == props.selectedVideo) {     +&quot;|&gt; &quot; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u043e \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0441\u043e\u0437\u0434\u0430\u043b \u043d\u0430\u0448 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433: \u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e, \u0442\u0430\u043a \u0447\u0442\u043e \u0432\u044b\u0437\u043e\u0432 <code>setState<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 <code>onClickFunction<\/code> \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0433\u043e. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u0431\u043e\u0440\u043e\u0442\u044c \u044d\u0442\u043e \u0438 \u0432 \u0438\u0442\u043e\u0433\u0435 \u043e\u043f\u044f\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u043d\u0438\u043c\u0435\u043c \u043a\u043e\u0435-\u0447\u0442\u043e \u0435\u0449\u0435.<\/p>\n<p>  <\/p>\n<h3 id=\"peredacha-obrabotchikov\">\u041f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432<\/h3>\n<p>  <\/p>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0420\u0435\u0430\u043a\u0442 \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u043a\u0430\u043a \u0431\u044b \u043c\u044b \u044d\u0442\u043e\u0433\u043e \u043d\u0438 \u0445\u043e\u0442\u0435\u043b\u0438. \u041d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043f\u043e-\u0434\u0440\u0443\u0433\u043e\u043c\u0443: \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u043b\u043e\u0433\u0438\u043a\u0443 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0438\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f. \u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u0432 \u041a\u043e\u0442\u043b\u0438\u043d\u0435 \u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c <a href=\"https:\/\/kotlinlang.org\/docs\/reference\/lambdas.html#function-types\" rel=\"nofollow noopener noreferrer\">\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0442\u0438\u043f<\/a>? \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0435 \u0432 \u043e\u0434\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0449\u0443\u044e <code>Video<\/code> \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0443\u044e <code>Unit<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">external interface VideoListProps : RProps {     var videos: List&lt;Video&gt;     var selectedVideo: Video?     var onSelectVideo: (Video) -&gt; Unit }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u043c <code>onClickFunction<\/code> \u043d\u0430 \u0432\u044b\u0437\u043e\u0432 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">onClickFunction = {     props.onSelectVideo(video) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u0432\u0438\u0434\u0435\u043e \u043a\u0430\u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0438 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u043b\u043e\u0433\u0438\u043a\u0443 <em>\u0432\u044b\u0431\u043e\u0440\u0430<\/em> \u0432\u0438\u0434\u0435\u043e \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0433\u0434\u0435 \u0438 \u0431\u0443\u0434\u0435\u043c \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0418\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u0434\u043d\u044f\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043b\u0438\u043a\u043e\u0432 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f. \u041e\u0431\u043d\u043e\u0432\u0438\u043c \u043e\u0431\u0430 \u043c\u0435\u0441\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <code>videoList<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">videoList {     videos = unwatchedVideos     selectedVideo = state.currentVideo     onSelectVideo = { video -&gt;         setState {             currentVideo = video         }     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u0442\u043e\u0440\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u043d\u0438\u0435\u043c <code>watchedVideos<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0439\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u043e\u0433\u0438\u0447\u043d\u043e: \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0432\u0438\u0434\u0435\u043e \u0432 \u0434\u0432\u0443\u0445 \u0441\u043f\u0438\u0441\u043a\u0430\u0445, \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043f\u0435\u0440\u0435\u043f\u0440\u044b\u0433\u0438\u0432\u0430\u0435\u0442 \u043c\u0435\u0436\u0434\u0443 \u0441\u043f\u0438\u0441\u043a\u0430\u043c\u0438, \u0430 \u043d\u0435 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u0434\u0430\u0436\u0435 \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u0441\u044c, \u043a\u0430\u043a \u0432\u0441\u0435 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043f\u0440\u043e\u0441\u0442\u043e.<\/p>\n<p>  <\/p>\n<blockquote><p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0448\u0430\u0433\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432 \u0432\u0435\u0442\u043a\u0435 <code>step-04-composing-components<\/code> <a href=\"https:\/\/github.com\/kotlin-hands-on\/web-app-react-kotlin-js-gradle\/tree\/step-04-composing-components\" rel=\"nofollow noopener noreferrer\">\u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.<\/p><\/blockquote>\n<p>  <\/p>\n<h2 id=\"a-namestep6shag-6-bolshe-komponentova\">\u0428\u0430\u0433 6. \u0411\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432!<\/h2>\n<p>  <\/p>\n<p>\u041c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043e\u0434\u0438\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u0438 \u0441\u0430\u043c\u043e\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u043c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0443 \u043d\u0435\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0434\u043b\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<h3 id=\"vynosim-komponent-videopleera\">\u0412\u044b\u043d\u043e\u0441\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440\u0430<\/h3>\n<p>  <\/p>\n<p>\u0415\u0449\u0435 \u043e\u0434\u043d\u0430 \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0441\u0442\u043e\u0438\u0442 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u043a\u0430\u043a \u043e\u0431\u043e\u0441\u043e\u0431\u043b\u0435\u043d\u043d\u0443\u044e \u0435\u0434\u0438\u043d\u0438\u0446\u0443 \u2013 \u044d\u0442\u043e \u0432\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440 (\u0435\u0433\u043e \u043c\u044b \u0432\u0441\u0435 \u0435\u0449\u0435 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u043e\u0439-\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u043e\u0439). \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0443\u043c\u0430\u0435\u043c, \u043a\u0430\u043a\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440\u0430: \u044d\u0442\u043e \u0430\u0432\u0442\u043e\u0440 \u0432\u0438\u0434\u0435\u043e, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438 \u0441\u0441\u044b\u043b\u043a\u0430. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0432\u0441\u0435 \u044d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0443\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0442\u0438\u043f\u0430 <code>Video<\/code>, \u0442\u0430\u043a \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043a\u0430\u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>VideoPlayer<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>VideoPlayer.kt<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">import kotlinx.css.* import kotlinx.html.js.onClickFunction import react.* import react.dom.* import styled.*  external interface VideoPlayerProps : RProps {     var video: Video }  @JsExport class VideoPlayer : RComponent&lt;VideoPlayerProps, RState&gt;() {     override fun RBuilder.render() {         styledDiv {             css {                 position = Position.absolute                 top = 10.px                 right = 10.px             }             h3 {                 +&quot;${props.video.speaker}: ${props.video.title}&quot;             }             img {                 attrs {                     src = &quot;https:\/\/via.placeholder.com\/640x360.png?text=Video+Player+Placeholder&quot;                 }             }         }     } }  fun RBuilder.videoPlayer(handler: VideoPlayerProps.() -&gt; Unit): ReactElement {     return child(VideoPlayer::class) {         this.attrs(handler)     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 <code>styledDiv<\/code> \u0441 \u0432\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440\u043e\u043c (\u0432 \u0444\u0430\u0439\u043b\u0435 <code>App.kt<\/code>) \u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0411\u0443\u0434\u0435\u043c \u0435\u0433\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c, \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043e \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0438\u0434\u0435\u043e \u2013 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0435\u0439 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>let<\/code>, \u0442\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0439 \u0432 <code>let<\/code> \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f, \u0435\u0441\u043b\u0438 <code>currentVideo<\/code> \u043d\u0435 \u0440\u0430\u0432\u043d\u043e <code>null<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">state.currentVideo?.let { currentVideo -&gt;     videoPlayer {         video = currentVideo     } }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"dobavlyaem-i-prisoedinyaem-knopku\">\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0438 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443<\/h3>\n<p>  <\/p>\n<p>\u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0435\u0442 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0434\u0432\u0438\u0433\u0430\u0442\u044c \u0432\u0438\u0434\u0435\u043e \u043c\u0435\u0436\u0434\u0443 \u0441\u043f\u0438\u0441\u043a\u0430\u043c\u0438 \u043d\u0435\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0445 \u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0445. \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0432 <code>VideoPlayer<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u0432\u0438\u0433\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043f\u0438\u0441\u043a\u0430\u043c\u0438, \u0430 \u043e\u043d\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>VideoPlayer<\/code>. \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c, \u0447\u0442\u043e \u0432 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0432 \u043e\u0431\u0449\u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u043b\u043e\u0433\u0438\u043a\u0443 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443-\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044c. \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0435\u043a\u0441\u0442, \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e \u0432\u0438\u0434\u0435\u043e \u0438\u043b\u0438 \u043d\u0435\u0442. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0435\u0449\u0435 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <code>VideoPlayerProps<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">external interface VideoPlayerProps : RProps {     var video: Video     var onWatchedButtonPressed: (Video) -&gt; Unit     var unwatchedVideo: Boolean }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u0443\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a \u0447\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432: \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0441\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u0438\u0434\u0435\u043e. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 HTML DSL \u0432 \u043c\u0435\u0442\u043e\u0434 <code>render<\/code> \u0432\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440\u0430, \u043c\u0435\u0436\u0434\u0443 \u0442\u0435\u0433\u0430\u043c\u0438 <code>h3<\/code> \u0438 <code>img<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">styledButton {     css {         display = Display.block         backgroundColor = if (props.unwatchedVideo) Color.lightGreen else Color.red     }     attrs {         onClickFunction = {             props.onWatchedButtonPressed(props.video)         }     }     if (props.unwatchedVideo) {         +&quot;Mark as watched&quot;     } else {         +&quot;Mark as unwatched&quot;     } }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"peremeschaem-spiski-video-v-sostoyanie-prilozheniya\">\u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u043c \u0441\u043f\u0438\u0441\u043a\u0438 \u0432\u0438\u0434\u0435\u043e \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u044b\u0437\u043e\u0432 <code>VideoPlayer<\/code>, \u043f\u043e\u0434\u0443\u043c\u0430\u0435\u043c \u043e \u043b\u043e\u0433\u0438\u043a\u0435 \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u044b.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0432\u0438\u0434\u0435\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043b\u0438\u0431\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043d\u043e \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 <code>unwatched<\/code> \u0432 <code>watched<\/code>, \u043b\u0438\u0431\u043e \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442.<\/p>\n<p>  <\/p>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c \u0441\u043f\u0438\u0441\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c \u0438\u0445 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f! \u041e\u043f\u044f\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">external interface AppState : RState {     var currentVideo: Video?     var unwatchedVideos: List&lt;Video&gt;     var watchedVideos: List&lt;Video&gt; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>init<\/code>. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e, \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0432 \u043c\u0435\u0442\u043e\u0434 \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 <code>App<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">override fun AppState.init() {     unwatchedVideos = listOf(         KotlinVideo(1, &quot;Building and breaking things&quot;, &quot;John Doe&quot;, &quot;https:\/\/youtu.be\/PsaFVLr8t4E&quot;),         KotlinVideo(2, &quot;The development process&quot;, &quot;Jane Smith&quot;, &quot;https:\/\/youtu.be\/PsaFVLr8t4E&quot;),         KotlinVideo(3, &quot;The Web 7.0&quot;, &quot;Matt Miller&quot;, &quot;https:\/\/youtu.be\/PsaFVLr8t4E&quot;)     )     watchedVideos = listOf(         KotlinVideo(4, &quot;Mouseless development&quot;, &quot;Tom Jerry&quot;, &quot;https:\/\/youtu.be\/PsaFVLr8t4E&quot;)     ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c <code>unwatchedVideos<\/code> \u0438 <code>watchedVideos<\/code> \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <code>Main.kt<\/code>, \u0430 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>Main.kt<\/code> \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u0432\u044b\u0437\u043e\u0432\u044b (<code>un<\/code>)<code>watchedVideos<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 IDE \u0443\u0436\u0435 \u0443\u0441\u043f\u0435\u043b\u0430 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u0438\u0442\u044c \u043a\u0430\u043a \u043e\u0448\u0438\u0431\u043e\u0447\u043d\u044b\u0435, \u043d\u0430 <code>state.<\/code>(<code>un<\/code>)<code>watchedVideos<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043f\u043e\u0434\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u044b\u0437\u043e\u0432 \u0432\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440\u0430. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">videoPlayer {     video = currentVideo     unwatchedVideo = currentVideo in state.unwatchedVideos     onWatchedButtonPressed = {         if (video in state.unwatchedVideos) {             setState {                 unwatchedVideos -= video                 watchedVideos += video             }         } else {             setState {                 watchedVideos -= video                 unwatchedVideos += video             }         }     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u0435\u0440\u043d\u0438\u0442\u0435\u0441\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043e, \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u043f\u0430\u0440\u0443 \u0440\u0430\u0437 \u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432\u0438\u0434\u0435\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u0438\u0441\u043a\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0411\u0443\u0434\u0435\u0442 \u0437\u0434\u043e\u0440\u043e\u0432\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u0438\u0433\u0440\u0430\u0435\u0442\u0435\u0441\u044c \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u043a\u043d\u043e\u043f\u043a\u0438, \u0438 \u0432\u044b\u0431\u0435\u0440\u0435\u0442\u0435 \u0442\u043e\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u043e \u0434\u0443\u0448\u0435. \u041c\u043e\u0436\u0435\u0442\u0435 \u0434\u0430\u0436\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u043a\u043d\u043e\u043f\u043a\u0443 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442!<\/p>\n<p>  <\/p>\n<p>\u0412\u0440\u0435\u043c\u044f \u043e\u0442\u043a\u0438\u043d\u0443\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u043f\u0438\u043d\u043a\u0443 \u043a\u0440\u0435\u0441\u043b\u0430 \u0438 \u043f\u0435\u0440\u0435\u043b\u043e\u0436\u0438\u0442\u044c \u0442\u044f\u0436\u0435\u043b\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0448\u0430\u0433\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e\u0431 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0438 \u043e\u0431\u0449\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0420\u0435\u0430\u043a\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u0437 \u041a\u043e\u0442\u043b\u0438\u043d\u0430.<\/p>\n<p>  <\/p>\n<blockquote><p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0448\u0430\u0433\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432 \u0432\u0435\u0442\u043a\u0435 <code>step-05-more-components<\/code> <a href=\"https:\/\/github.com\/kotlin-hands-on\/web-app-react-kotlin-js-gradle\/tree\/step-05-more-components\" rel=\"nofollow noopener noreferrer\">\u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.<\/p><\/blockquote>\n<p>  <\/p>\n<h2 id=\"a-namestep7shag-7-ispolzovanie-npm-paketova\">\u0428\u0430\u0433 7. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 NPM \u043f\u0430\u043a\u0435\u0442\u043e\u0432<\/h2>\n<p>  <\/p>\n<p>\u0425\u043e\u0442\u044f \u043c\u044b \u0443\u0436\u0435 \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u043b\u0438\u0441\u044c, \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0432\u0441\u0435 \u0435\u0449\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e \u0432\u0430\u0436\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438. \u0412\u043c\u0435\u0441\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0432\u0441\u0435\u0433\u043e \u0441 \u043d\u0443\u043b\u044f, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u0433\u0430\u0442\u0443\u044e \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u0432\u043e\u043a\u0440\u0443\u0433 \u0420\u0435\u0430\u043a\u0442\u0430. \u0412 \u043d\u0435\u0439 \u0435\u0441\u0442\u044c \u0442\u043e\u043d\u043d\u0430 \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a \u0447\u0442\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u044c \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434, \u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445.<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u0438 \u0441\u0430\u043c\u0430\u044f \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u0430\u044f \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u2013 \u044d\u0442\u043e \u0432\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440.<\/p>\n<p>  <\/p>\n<h3 id=\"dobavlyaem-komponent-videopleera\">\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440\u0430<\/h3>\n<p>  <\/p>\n<p>\u041d\u0443\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430\u0448\u0443 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0443 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0435\u043e \u0441 \u042e\u0442\u0443\u0431\u0430. \u0412\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <code>react-youtube-lite<\/code>. \u0415\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438 API \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 <a href=\"https:\/\/www.npmjs.com\/package\/react-youtube-lite\" rel=\"nofollow noopener noreferrer\">README<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c \u0441\u0430\u043c\u043e\u0435 \u043d\u0430\u0447\u0430\u043b\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438. \u0422\u0430\u043c \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043d\u0430 <code>react-youtube-lite<\/code>, \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043d\u0443\u044e \u0432 \u0444\u0430\u0439\u043b\u0435 Gradle. \u0412\u043e\u0442 \u0442\u043e \u043c\u0435\u0441\u0442\u043e:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">dependencies {     \/\/ ...     \/\/ Video Player (\u0448\u0430\u0433 7)     implementation(npm(&quot;react-youtube-lite&quot;, &quot;1.0.1&quot;))     \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u2013 NPM \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0432 Gradle \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>npm<\/code>. <code>yarn<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f Kotlin\/JS Gradle \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c, \u043f\u043e\u0437\u0430\u0431\u043e\u0442\u0438\u0442\u0441\u044f \u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u044d\u0442\u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c NPM \u043c\u043e\u0434\u0443\u043b\u0438 \u0438\u0437 \u041a\u043e\u0442\u043b\u0438\u043d\u0430, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0443 \u043e \u0441\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430\u0445: \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c, \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u0447\u0438\u0442\u0430\u0442\u044c. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e, \u0438 IDE \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u043e\u0433\u0430\u0442\u044c \u043d\u0430\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 \u041a\u043e\u0442\u043b\u0438\u043d\u0435. \u041e\u0431\u044a\u044f\u0432\u043b\u044f\u0442\u044c \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f \u043d\u0430\u0434\u043e \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <code>ReactYouTube.kt<\/code> \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@file:JsModule(&quot;react-youtube-lite&quot;) @file:JsNonModule  import react.*  @JsName(&quot;ReactYouTubeLite&quot;) external val reactPlayer: RClass&lt;dynamic&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u044b \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u044b \u0432 JavaScript \u2013 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0442\u0435\u043c\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u043d\u043e\u0433\u0434\u0430 \u0431\u044b\u0432\u0430\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0443\u044e \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044e \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0439, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u041a\u043e\u0442\u043b\u0438\u043d\u0430 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b \u0432\u0441\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u2013 \u044d\u0442\u043e \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442 <code>require(&quot;react-youtube-lite&quot;).default<\/code> \u0432 JS. \u041e\u043d\u0438 \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0443: &quot;\u043c\u044b \u0443\u0432\u0435\u0440\u0435\u043d\u044b, \u0447\u0442\u043e \u0432 \u0440\u0430\u043d\u0442\u0430\u0439\u043c\u0435 \u0442\u0443\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 <code>RClass&lt;dynamic&gt;<\/code>&quot;.<\/p>\n<p>  <\/p>\n<h4 id=\"tipizirovannye-obertki-dlya-komponenta\">\u0422\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/h4>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u043e\u0441\u0442\u0430\u0432\u0438\u0432 \u0432\u0441\u0435 \u0432 \u0442\u0430\u043a\u043e\u043c \u0432\u0438\u0434\u0435, \u043c\u044b \u043e\u0442\u043a\u0430\u0436\u0435\u043c\u0441\u044f \u043e\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u041a\u043e\u0442\u043b\u0438\u043d\u0430. \u041e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 <code>dynamic<\/code> \u0442\u0438\u043f\u0430 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0443, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u044b\u043c. \u041a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0435\u0441\u0442\u044c \u0432\u044b\u0441\u043e\u043a\u0438\u0439 \u0440\u0438\u0441\u043a, \u0447\u0442\u043e \u0447\u0442\u043e-\u0442\u043e \u0441\u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043f\u0440\u043e\u0434\u0435).<\/p>\n<p>  <\/p>\n<p>\u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u043c\u044b \u0443\u0436\u0435 \u0432\u0438\u0434\u0435\u043b\u0438, \u043a\u0430\u043a \u0432 \u041a\u043e\u0442\u043b\u0438\u043d\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0440\u0435\u0430\u043a\u0442\u043e\u0432\u0441\u043a\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b (\u043a\u0430\u043a <code>external<\/code> \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441), \u0430 \u0438\u0445 \u0438\u043c\u0435\u043d\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0439\u0442\u0438 \u043e\u043f\u044f\u0442\u044c \u0436\u0435 \u0432 README \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0422\u0430\u043a \u0447\u0442\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0442\u0438\u043f\u043e\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0445 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u0439 \u2013 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u2013 \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043d\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0432\u0438\u0434\u0435\u043e. \u041f\u043e\u043c\u0435\u043d\u044f\u0435\u043c \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u044e \u0432\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440\u0430 \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@file:JsModule(&quot;react-youtube-lite&quot;) @file:JsNonModule  import react.*  @JsName(&quot;ReactYouTubeLite&quot;) external val reactPlayer: RClass&lt;ReactYouTubeProps&gt;  external interface ReactYouTubeProps : RProps {     var url: String }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043a\u0443\u0447\u043d\u044b\u0439 \u0441\u0435\u0440\u044b\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>VideoPlayer<\/code> \u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0437\u0430\u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u043f\u043b\u0435\u0435\u0440! \u0423\u0434\u0430\u043b\u0438\u043c \u0442\u0435\u0433 <code>img<\/code> \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u0435\u0433\u043e \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">reactPlayer {     attrs.url = props.video.videoUrl }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"dobavlyaem-knopki-shera\">\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u0448\u0435\u0440\u0430<\/h3>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435 \u043e\u0442 \u0434\u043e\u043a\u043b\u0430\u0434\u043e\u0432 \u0441 KotlinConf \u043b\u0443\u0447\u0448\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 (\u0447\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0430\u0432\u0434\u043e\u0439 \u0438 \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u0438\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0437\u0430\u043d\u044f\u0442\u0438\u0439). \u041a\u043d\u043e\u043f\u043a\u0438 \u0448\u0435\u0440\u0430 \u2013 \u043e\u0431\u0449\u0435\u043f\u0440\u0438\u0437\u043d\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0434\u0440\u0443\u0437\u044c\u044f\u043c\u0438 \u0438 \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c. \u0422\u0430\u043a\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u044b \u0438 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0443\u044e \u043f\u043e\u0447\u0442\u0443. \u0414\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0435\u0441\u0442\u044c \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0420\u0435\u0430\u043a\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 <a href=\"https:\/\/github.com\/nygardk\/react-share\/blob\/master\/README.md\" rel=\"nofollow noopener noreferrer\">react-share<\/a>. \u042d\u0442\u043e\u0442 \u043f\u0430\u043a\u0435\u0442 \u0442\u043e\u0436\u0435 \u0443\u0436\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 Gradle:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">dependencies {     \/\/ ...     \/\/ Share Buttons (\u0448\u0430\u0433 7)     implementation(npm(&quot;react-share&quot;, &quot;~4.2.1&quot;))     \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u044f\u0442\u044c \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u0438. \u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 <a href=\"https:\/\/github.com\/nygardk\/react-share\/blob\/master\/demo\/Demo.tsx\" rel=\"nofollow noopener noreferrer\">\u043f\u0440\u0438\u043c\u0435\u0440\u044b<\/a> \u0441 \u0413\u0438\u0442\u0425\u0430\u0431\u0430, \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>EmailShareButton<\/code> \u0438 <code>EmailIcon<\/code>. \u0418 \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u0438\u0437 \u043d\u0438\u0445 \u0438\u043c\u0435\u044e\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b. \u0424\u0430\u0439\u043b \u0441 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u044f\u043c\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439; \u043d\u0430\u0437\u043e\u0432\u0435\u043c \u0435\u0433\u043e <code>ReactShare.kt<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@file:JsModule(&quot;react-share&quot;) @file:JsNonModule  import react.RClass import react.RProps  @JsName(&quot;EmailIcon&quot;) external val emailIcon: RClass&lt;IconProps&gt;  @JsName(&quot;EmailShareButton&quot;) external val emailShareButton: RClass&lt;ShareButtonProps&gt;  @JsName(&quot;TelegramIcon&quot;) external val telegramIcon: RClass&lt;IconProps&gt;  @JsName(&quot;TelegramShareButton&quot;) external val telegramShareButton: RClass&lt;ShareButtonProps&gt;  external interface ShareButtonProps : RProps {     var url: String }  external interface IconProps : RProps {     var size: Int     var round: Boolean }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u0432\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u043d\u0430\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0432\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440\u0430. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u0437\u043e\u0432\u043e\u043c <code>reactPlayer<\/code> (\u043e\u0431\u0435\u0440\u043d\u0435\u043c \u0432 <code>styledDiv<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c):<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">styledDiv {     css {         display = Display.flex         marginBottom = 10.px     }     emailShareButton {         attrs.url = props.video.videoUrl         emailIcon {             attrs.size = 32             attrs.round = true         }     }     telegramShareButton {         attrs.url = props.video.videoUrl         telegramIcon {             attrs.size = 32             attrs.round = true         }     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442. \u0415\u0441\u043b\u0438 \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u043e \u043d\u0438\u043c, \u0434\u043e\u043b\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c\u0441\u044f \u043e\u043a\u043d\u043e. \u0415\u0441\u043b\u0438 \u0436\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0443 \u0432\u0430\u0441 \u0432\u043a\u043b\u044e\u0447\u0435\u043d \u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0442\u0430\u043a\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0449\u0438\u043a \u0440\u0435\u043a\u043b\u0430\u043c\u044b.<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/1b8\/38d\/927\/1b838d92717d355eb47cdc830848afad.png\" alt=\"pair\"><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435, \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043d\u043e\u043f\u043e\u043a \u0432 \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u0438 \u0442\u043e\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u0445 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d.<\/p>\n<p>  <\/p>\n<blockquote><p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0448\u0430\u0433\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432 \u0432\u0435\u0442\u043a\u0435 <code>step-06-packages-from-npm<\/code> <a href=\"https:\/\/github.com\/kotlin-hands-on\/web-app-react-kotlin-js-gradle\/tree\/step-06-packages-from-npm\" rel=\"nofollow noopener noreferrer\">\u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.<\/p><\/blockquote>\n<p>  <\/p>\n<h2 id=\"a-namestep8shag-8-ispolzuem-vneshnee-rest-apia\">\u0428\u0430\u0433 8. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u043d\u0435\u0448\u043d\u0435\u0435 REST API<\/h2>\n<p>  <\/p>\n<p>\u0412\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0441\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u043c\u044b \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0447\u0435\u043d\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0439 \u0437\u0430\u0445\u0430\u0440\u0434\u043a\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0438\u0434\u0435\u043e. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c\u0438, \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0437 REST API.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 API, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 <a href=\"https:\/\/my-json-server.typicode.com\/kotlin-hands-on\/kotlinconf-json\/videos\/1\" rel=\"nofollow noopener noreferrer\">https:\/\/my-json-server.typicode.com\/kotlin-hands-on\/kotlinconf-json\/videos\/1<\/a>. \u0423 \u044d\u0442\u043e\u0433\u043e API \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0430 \u0440\u0443\u0447\u043a\u0430 \u2013 <code>videos<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432\u0438\u0434\u0435\u043e \u043f\u043e \u0435\u0433\u043e \u043d\u043e\u043c\u0435\u0440\u0443. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043f\u043e\u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a \u044d\u0442\u043e\u043c\u0443 API \u0438\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0412\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0442\u0443 \u0436\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0447\u0442\u043e \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u044b <code>Video<\/code> \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u0434\u0435 (\u043a\u0430\u043a\u043e\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0435 <code>;)<\/code>). \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0435\u043a\u0446\u0438\u0438 \u043c\u044b \u043e\u0431\u0441\u0443\u0434\u0438\u043c, \u043a\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043d\u0430\u0448\u0438 \u043a\u043e\u0442\u043b\u0438\u043d\u043e\u0432\u0441\u043a\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b.<\/p>\n<p>  <\/p>\n<h3 id=\"ispolzovanie-funkcionalnosti-js-iz-kotlina\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 JS \u0438\u0437 \u041a\u043e\u0442\u043b\u0438\u043d\u0430<\/h3>\n<p>  <\/p>\n<p>\u0414\u0430\u0436\u0435 \u0431\u0435\u0437 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0434\u0430\u044e\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439. \u0412 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 Kotlin\/JS \u0435\u0441\u0442\u044c \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u043a\u0430\u043a \u0440\u0430\u0437 \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u0438 \u0432\u044b\u0437\u043e\u0432\u044b \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u043e \u0438 \u0442\u0438\u043f\u043e\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e \u043f\u0440\u044f\u043c\u043e \u0438\u0437 \u043a\u043e\u0434\u0430 \u043d\u0430 \u041a\u043e\u0442\u043b\u0438\u043d\u0435. \u041c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u043e\u0431\u0435\u0440\u0442\u043a\u0430\u043c\u0438 \u0434\u043b\u044f <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API\" rel=\"nofollow noopener noreferrer\">Fetch API<\/a>, \u0447\u0442\u043e\u0431\u044b \u0434\u0435\u043b\u0430\u0442\u044c HTTP \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a REST API.<\/p>\n<p>  <\/p>\n<p>\u0422\u0438\u043f\u0438\u0447\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0432 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0435 JavaScript \u2013 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043b\u0431\u0435\u043a\u0438. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0440\u0430\u0437 \u0437\u0430 \u0440\u0430\u0437\u043e\u043c \u0434\u043e\u0436\u0438\u0434\u0430\u0442\u044c\u0441\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043c\u0438\u0441\u043e\u0432, \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u043d\u0443\u0442\u0440\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0442\u043e\u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445. \u0427\u0435\u043c \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u043a\u043e\u0434, \u0442\u0435\u043c \u0442\u044f\u0436\u0435\u043b\u0435\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0438\u0437-\u0437\u0430 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0438 \u0441\u043a\u043e\u0431\u043e\u043a. \u041a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0441\u044a\u0435\u0437\u0436\u0430\u0442\u044c \u0432\u043f\u0440\u0430\u0432\u043e, \u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u043f\u043e\u0442\u043e\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u043a\u0430\u043a \u043d\u0430\u043c, \u0442\u0430\u043a \u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u044d\u0442\u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438, \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043a\u043e\u0434 \u0441 \u043a\u043e\u043b\u0431\u0435\u043a\u0430\u043c\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">window.fetch(&quot;https:\/\/url...&quot;).then {     it.json().then {         it.unsafeCast&lt;Video&gt;()         \/\/...     } }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041d\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434<\/strong>. \u041e\u0431\u0440\u0430\u0442\u0438\u043c\u0441\u044f \u043a \u043a\u043e\u0442\u043b\u0438\u043d\u043e\u0432\u0441\u043a\u0438\u043c \u043a\u043e\u0440\u0443\u0442\u0438\u043d\u0430\u043c, \u0431\u043e\u043b\u0435\u0435 \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u043c\u0443 \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443 \u0441\u043f\u043e\u0441\u043e\u0431\u0443 \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0442\u043e\u0439 \u0436\u0435 \u0446\u0435\u043b\u0438.<\/p>\n<p>  <\/p>\n<h3 id=\"korutiny-vmesto-kolbekov\">\u041a\u043e\u0440\u0443\u0442\u0438\u043d\u044b \u0432\u043c\u0435\u0441\u0442\u043e \u043a\u043e\u043b\u0431\u0435\u043a\u043e\u0432<\/h3>\n<p>  <\/p>\n<p>\u041a\u043e\u0440\u0443\u0442\u0438\u043d\u044b \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043d\u043e\u0441\u0442\u044c (structured concurrency) \u2013 \u0433\u0438\u0433\u0430\u043d\u0442\u0441\u043a\u0430\u044f \u0442\u0435\u043c\u0430 \u0432 \u041a\u043e\u0442\u043b\u0438\u043d\u0435. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u0432 \u043d\u0438\u0445 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043f\u0440\u043e\u0439\u0442\u0438 <a href=\"https:\/\/play.kotlinlang.org\/hands-on\/Introduction%20to%20Coroutines%20and%20Channels\/\" rel=\"nofollow noopener noreferrer\">\u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0443 \u043f\u043e \u043a\u043e\u0440\u0443\u0442\u0438\u043d\u0430\u043c<\/a>. \u0421\u0435\u0439\u0447\u0430\u0441 \u0436\u0435 \u043c\u044b \u043e\u0431\u0441\u0443\u0434\u0438\u043c \u0438\u0445 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e. \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043e\u0440\u0443\u0442\u0438\u043d \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u043d\u0430\u0448\u0435\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 Gradle \u043a\u043e\u0434 \u0443\u0436\u0435 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0435\u0449\u0435 \u0441 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">dependencies {     \/\/...     \/\/ Coroutines (\u0448\u0430\u0433 8)     implementation(&quot;org.jetbrains.kotlinx:kotlinx-coroutines-core:1.3.9&quot;) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0432\u0438\u0434\u0435\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043e\u0440\u0443\u0442\u0438\u043d\u044b!<\/p>\n<p>  <\/p>\n<h3 id=\"zaprashivaem-pervoe-video\">\u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0432\u043e\u0435 \u0432\u0438\u0434\u0435\u043e<\/h3>\n<p>  <\/p>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 <code>App.kt<\/code> \u0438\u043b\u0438 \u0432 \u043d\u043e\u0432\u043e\u043c \u0444\u0430\u0439\u043b\u0435, \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0432\u0438\u0434\u0435\u043e \u0438\u0437 REST API:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">suspend fun fetchVideo(id: Int): Video {     val response = window         .fetch(&quot;https:\/\/my-json-server.typicode.com\/kotlin-hands-on\/kotlinconf-json\/videos\/$id&quot;)         .await()         .json()         .await()     return response as Video }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0431\u044b\u0441\u0442\u0440\u044b\u0445 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0443\u0436\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0418\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u044b \u043d\u0430\u0432\u0435\u0440\u0445\u0443 \u0444\u0430\u0439\u043b\u0430 \u0432\u0440\u0443\u0447\u043d\u0443\u044e:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">import kotlinx.browser.window import kotlinx.coroutines.*<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u044d\u0442\u043e\u0439 <em>suspend \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/em>. \u041c\u044b \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0432\u0438\u0434\u0435\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>fetch<\/code>, \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044f <code>id<\/code> \u0432\u0438\u0434\u0435\u043e \u0432 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 API. \u0416\u0434\u0435\u043c \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438 \u043e\u0442\u0432\u0435\u0442\u0430 (<code>await<\/code>), \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u043e\u0442\u0432\u0435\u0442 \u043a JSON, \u043e\u043f\u044f\u0442\u044c \u0436\u0434\u0435\u043c \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043a\u0430\u0441\u0442\u0443\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u0432 \u0445\u043e\u0434\u0435 \u043d\u0430\u0448\u0435\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 <code>external interface Video<\/code> \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0435\u0433\u043e \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, IDE \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u0438\u0442 \u043a\u0430\u0441\u0442 \u043a\u0430\u043a \u043d\u0435\u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0439 \u2013 \u043d\u043e \u044d\u0442\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 JavaScript \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u0442\u0438\u043f\u0430 <code>fetch<\/code>: \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 <em>\u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0440\u0435\u043d \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430<\/em>, \u0447\u0442\u043e \u043d\u0430 \u044d\u0442\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 <code>Video<\/code>. \u041a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d \u0432\u0435\u0440\u0438\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443. <strong>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430<\/strong>: \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0438\u0440\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u044f, \u043c\u043e\u0436\u043d\u043e \u043b\u0438\u0431\u043e \u0437\u0430\u0433\u043b\u0443\u0448\u0430\u0442\u044c \u0438\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0438 <code>@Suppress<\/code>, \u043b\u0438\u0431\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>unsafeCast<\/code> (<code>response.unsafeCast&lt;Video&gt;()<\/code>).<\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u0441\u0443\u0434\u0438\u043c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u0447\u0443\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. \u0412\u044b\u0437\u043e\u0432\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0439 <code>window.fetch<\/code> \u0438 <code>json<\/code> \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u043f\u0440\u043e\u043c\u0438\u0441. \u041c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043a\u043e\u043b\u0431\u0435\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u043f\u0440\u0438 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043f\u0440\u043e\u043c\u0438\u0441\u0430. \u041e\u0434\u043d\u0430\u043a\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043a\u043e\u0440\u0443\u0442\u0438\u043d\u044b, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u043e\u0437\u043d\u0438 \u0441 \u043a\u043e\u043b\u0431\u0435\u043a\u0430\u043c\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0434\u043e\u0436\u0434\u0430\u0442\u044c (<code>await<\/code>) \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c, \u043d\u043e \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u043c. \u041a\u043e\u0433\u0434\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <code>await<\/code>, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f (\u043e\u0442\u0441\u044e\u0434\u0430 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u043c\u0435\u0447\u0430\u0442\u044c \u0442\u0430\u043a\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043a\u0430\u043a <code>suspend<\/code>). \u041a\u043e\u0433\u0434\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u0440\u043e\u043c\u0438\u0441\u0430 \u0433\u043e\u0442\u043e\u0432, \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<h3 id=\"ispolzuem-suspend-funkciyu\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c suspend \u0444\u0443\u043d\u043a\u0446\u0438\u044e<\/h3>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0438\u0434\u0435\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0437\u044f\u0432 \u043f\u0435\u0440\u0432\u044b\u0435 25. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u044f\u0432\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>fetchVideos<\/code>, \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0449\u0443\u044e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e 25 \u0440\u0430\u0437. \u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043a\u043e\u0440\u0443\u0442\u0438\u043d \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 suspend \u043a\u043e\u0434\u0430 \u2013 <code>async<\/code>. \u0422\u043e\u0433\u0434\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">suspend fun fetchVideos(): List&lt;Video&gt; = coroutineScope {     (1..25).map { id -&gt;         async {             fetchVideo(id)         }     }.awaitAll() }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u0438 <a href=\"https:\/\/kotlinlang.org\/docs\/reference\/coroutines\/basics.html#structured-concurrency\" rel=\"nofollow noopener noreferrer\">\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043d\u043e\u0441\u0442\u0438<\/a> \u043c\u044b \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 <code>coroutineScope<\/code>. \u0412\u043d\u0443\u0442\u0440\u0438 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c 25 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447, \u043f\u043e \u043e\u0434\u043d\u043e\u0439 \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441, \u0438 \u0436\u0434\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0438\u0445 \u0432\u0441\u0435\u0445.<\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0435\u0449\u0435 \u0440\u0430\u0437 \u043d\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043e <a href=\"https:\/\/play.kotlinlang.org\/hands-on\/Introduction%20to%20Coroutines%20and%20Channels\/\" rel=\"nofollow noopener noreferrer\">\u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043f\u043e \u043a\u043e\u0440\u0443\u0442\u0438\u043d\u0430\u043c<\/a>, \u0433\u0434\u0435 \u043e\u0431\u043e \u0432\u0441\u0435\u043c \u044d\u0442\u043e\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043b\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0430\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0427\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e, \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>init<\/code> \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 <code>App<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">override fun AppState.init() {     unwatchedVideos = listOf()     watchedVideos = listOf()      val mainScope = MainScope()     mainScope.launch {         val videos = fetchVideos()         setState {             unwatchedVideos = videos         }     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0447\u0442\u043e \u0445\u043e\u0442\u044f \u043c\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>init<\/code>, \u043c\u044b \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c <code>setState<\/code> \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f <code>unwatchedVideos<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0440\u0443\u0442\u0438\u043d\u044b. \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043d\u0430\u0448 \u043a\u043e\u0434 \u043d\u0435\u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u0439, \u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0443\u0436\u0435 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b\u043e \u043f\u0443\u0441\u0442\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a, \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0432 <code>unwatchedVideos<\/code> \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e. \u0412\u044b\u0437\u044b\u0432\u0430\u044f <code>setState<\/code>, \u043c\u044b \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0435\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0443 \u0420\u0435\u0430\u043a\u0442\u0430, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0430.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043c\u044b \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0438\u0434\u0435\u043e:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/e98\/63c\/4b8\/e9863c4b8f99d4ae60691fbf15bfe1a8.png\" alt=\"real data\"><\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u0447\u0430\u0441\u0442\u044c \u043f\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0432 \u044d\u0442\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043f\u043e\u0434\u043e\u0448\u043b\u0430 \u043a \u043a\u043e\u043d\u0446\u0443. \u041c\u044b \u043f\u0440\u043e\u0448\u043b\u0438 \u0434\u043e\u043b\u0433\u0438\u0439 \u043f\u0443\u0442\u044c, \u043e\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u043e\u0439 &quot;Hello, World&quot; \u0434\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0440\u0433\u0430\u043d\u0430\u0439\u0437\u0435\u0440\u0430 \u0432\u0438\u0434\u0435\u043e.<\/p>\n<p>  <\/p>\n<p>\u041d\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0439\u0442\u0435\u0441\u044c, \u0435\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a \u0431\u0430\u043d\u0434\u043b\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0435, \u0438 \u043a\u0430\u043a \u0434\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0440\u0443\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c, \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0432 \u0435\u0433\u043e \u0432 \u043e\u0431\u043b\u0430\u043a\u0435.<\/p>\n<p>  <\/p>\n<blockquote><p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0448\u0430\u0433\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432 \u0432\u0435\u0442\u043a\u0435 <code>step-07-using-external-rest-api<\/code> <a href=\"https:\/\/github.com\/kotlin-hands-on\/web-app-react-kotlin-js-gradle\/tree\/step-07-using-external-rest-api\" rel=\"nofollow noopener noreferrer\">\u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.<\/p><\/blockquote>\n<p>  <\/p>\n<h2 id=\"a-namestep9shag-9-deploim-v-prodakshen-i-v-oblakoa\">\u0428\u0430\u0433 9. \u0414\u0435\u043f\u043b\u043e\u0438\u043c \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d \u0438 \u0432 \u043e\u0431\u043b\u0430\u043a\u043e<\/h2>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0445\u043e\u0440\u043e\u0448\u043e \u0431\u044b \u0435\u0433\u043e \u0432\u044b\u043b\u043e\u0436\u0438\u0442\u044c \u0434\u043b\u044f \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  <\/p>\n<h3 id=\"upakovka-sobrannogo-prilozheniya\">\u0423\u043f\u0430\u043a\u043e\u0432\u043a\u0430 \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0443\u043f\u0430\u043a\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0430, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c Gradle \u0437\u0430\u0434\u0430\u0447\u0443 <code>build<\/code> \u0432 \u0442\u0443\u043b-\u043e\u043a\u043d\u0435 IntelliJ IDEA \u0438\u043b\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>.\/gradlew build<\/code>. \u041e\u043d\u0430 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0443\u043f\u0430\u043a\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, DCE (dead code elimination \u2013 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u0434\u0430).<\/p>\n<p>  <\/p>\n<p>\u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u0434\u043e\u0436\u0434\u0430\u0442\u044c, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0432\u0441\u0435 \u043d\u0443\u0436\u043d\u044b\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0430\u0439\u043b\u044b \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0432 \u043f\u0430\u043f\u043a\u0435 <code>build\/distributions<\/code>. \u0422\u0430\u043c \u0431\u0443\u0434\u0443\u0442 JS \u0444\u0430\u0439\u043b\u044b, HTML \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e. \u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u044d\u0442\u043e\u0439 \u043f\u0430\u043f\u043a\u0438 \u0433\u043e\u0442\u043e\u0432\u043e \u043a \u0434\u0435\u043f\u043b\u043e\u044e, \u0442\u043e \u0435\u0441\u0442\u044c \u043c\u043e\u0436\u043d\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u044d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b \u0432 \u043b\u044e\u0431\u043e\u0439 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 HTTP \u0441\u0435\u0440\u0432\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u0445 \u043d\u0430 GitHub Pages \u0438\u043b\u0438 \u0437\u0430\u0445\u043e\u0441\u0442\u0438\u0442\u044c \u043d\u0430 \u043b\u044e\u0431\u043e\u043c \u043e\u0431\u043b\u0430\u043a\u0435.<\/p>\n<p>  <\/p>\n<h3 id=\"deploim-na-heroku\">\u0414\u0435\u043f\u043b\u043e\u0438\u043c \u043d\u0430 Heroku<\/h3>\n<p>  <\/p>\n<p>Heroku \u0434\u0430\u0435\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u0434\u043e\u043c\u0435\u043d\u0435. \u0418\u0445 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0442\u0430\u0440\u0438\u0444 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u0435\u043d \u043f\u0440\u0438 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0438; \u0435\u0433\u043e \u0442\u043e\u0447\u043d\u043e \u0445\u0432\u0430\u0442\u0438\u0442, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u043b\u043e\u0436\u0438\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u0445\u0432\u0430\u0441\u0442\u0430\u0442\u044c\u0441\u044f \u043f\u0435\u0440\u0435\u0434 \u0434\u0440\u0443\u0437\u044c\u044f\u043c\u0438 \u0438 \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 <a href=\"https:\/\/signup.heroku.com\/\" rel=\"nofollow noopener noreferrer\">\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0430<\/a> \u0438 <a href=\"https:\/\/devcenter.heroku.com\/articles\/heroku-cli\" rel=\"nofollow noopener noreferrer\">\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0438 \u0432\u0445\u043e\u0434\u0430 \u0432 \u043d\u0435\u0433\u043e<\/a> \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c git \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0438 Heroku \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u043c\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438 \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">git init heroku create git add . git commit -m &quot;initial commit&quot;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e JVM \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0430 Heroku (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0435 \u043d\u0430 Ktor \u0438\u043b\u0438 Spring Boot), \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0434\u043e \u0440\u0430\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c Heroku:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">heroku buildpacks:set heroku\/gradle heroku buildpacks:add https:\/\/github.com\/heroku\/heroku-buildpack-static.git<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f <code>heroku\/gradle<\/code> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u043c\u0435\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443 <code>stage<\/code> \u0432 Gradle \u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u044d\u0442\u043e \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442 \u0437\u0430\u0434\u0430\u0447\u0438 <code>build<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 \u0437\u0430\u0434\u0430\u0447\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">\/\/ Heroku Deployment (\u0448\u0430\u0433 9) tasks.register(&quot;stage&quot;) {     dependsOn(&quot;build&quot;) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0449\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>buildpack-static<\/code>, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0444\u0430\u0439\u043b <code>static.json<\/code>. \u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>root<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"json\">{     &quot;root&quot;: &quot;build\/distributions&quot; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0434\u0435\u043f\u043b\u043e\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">git add -A git commit -m &quot;add stage task and static content root configuration&quot; git push heroku master<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0443\u0448\u0438\u0442\u0435 \u043d\u0435 master \u0432\u0435\u0442\u043a\u0443 (\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0435\u0442\u043a\u0443 <code>step*<\/code> \u0438\u0437 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0430), \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u043b\u0430 \u043f\u0443\u0448\u0438\u0442\u044c \u0432 master \u043d\u0430 Heroku (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a: <code>git push heroku step-08-deploying-to-production:master<\/code>).<\/p><\/blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u043f\u0440\u043e\u0448\u043b\u043e \u043f\u043e \u043f\u043b\u0430\u043d\u0443, \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0441\u0441\u044b\u043b\u043a\u0443, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0441\u0442\u0443\u0447\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u043e \u0432\u0441\u0435\u043c\u0438\u0440\u043d\u043e\u0439 \u043f\u0430\u0443\u0442\u0438\u043d\u0435!<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/29c\/72a\/caa\/29c72acaab8d818c7251d70c01313088.png\" alt=\"heroku\"><\/p>\n<p>  <\/p>\n<blockquote><p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0448\u0430\u0433\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432 \u0432\u0435\u0442\u043a\u0435 <code>final<\/code> <a href=\"https:\/\/github.com\/kotlin-hands-on\/web-app-react-kotlin-js-gradle\/tree\/final\" rel=\"nofollow noopener noreferrer\">\u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.<\/p><\/blockquote>\n<p>  <\/p>\n<h2 id=\"a-namestep10shag-10-v-dopolnenie-sovremennyy-reakt-s-hukamia\">\u0428\u0430\u0433 10. \u0412 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435: \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0420\u0435\u0430\u043a\u0442 \u0441 \u0445\u0443\u043a\u0430\u043c\u0438<\/h2>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u043e\u0448\u043b\u0438 \u0432\u0441\u044e \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0443 \u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0435\u0449\u0435 \u0447\u0435\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043a\u0440\u0443\u0442\u043e\u0433\u043e, \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u043c \u043e \u0431\u043e\u043b\u0435\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0444\u0438\u0447\u0430\u0445 \u0420\u0435\u0430\u043a\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u0412 React 16.8 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c <a href=\"https:\/\/reactjs.org\/docs\/hooks-intro.html\" rel=\"nofollow noopener noreferrer\">\u0445\u0443\u043a\u0438<\/a>. \u041e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0420\u0435\u0430\u043a\u0442\u0430 \u0431\u0435\u0437 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0425\u043e\u0440\u043e\u0448\u0430\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u044c: \u043a\u043e\u0442\u043b\u0438\u043d\u043e\u0432\u0441\u043a\u0438\u0435 \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0420\u0435\u0430\u043a\u0442\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0438 \u0445\u0443\u043a\u0438!<\/p>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d \u044d\u0442\u043e\u0442 \u043d\u043e\u0432\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0420\u0435\u0430\u043a\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043a\u0430\u043a \u044d\u0442\u0430 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0432 \u041a\u043e\u0442\u043b\u0438\u043d\u0435, \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c\u043e\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043e \u0434\u0432\u0443\u0445 \u0441\u0430\u043c\u044b\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0432 \u0420\u0435\u0430\u043a\u0442 \u0445\u0443\u043a\u0430\u0445 \u2013 state \u0438 effect. <strong>\u041a\u0430\u043a \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0445\u0443\u043a\u0438, \u044d\u0442\u0438 \u0434\u0432\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/strong>.<\/p>\n<p>  <\/p>\n<h3 id=\"funkcionalnye-komponenty\">\u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h3>\n<p>  <\/p>\n<p>\u0418\u0434\u0435\u0439\u043d\u043e, \u0440\u0435\u0430\u043a\u0442\u043e\u0432\u0441\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u0430\u043c\u0438 \u043f\u043e \u0441\u0435\u0431\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u044b. \u041e\u043d\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u0432\u0438\u0434\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u0430\u043c\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u2013 \u043e\u043d\u0438 \u043d\u0435 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 <code>this<\/code>. \u041f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u0438\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 \u041a\u043e\u0442\u043b\u0438\u043d\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">external interface WelcomeProps : RProps {     var name: String }  val welcome = functionalComponent&lt;WelcomeProps&gt; { props -&gt;      h1 {         +&quot;Hello, ${props.name}&quot;     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0438 \u0434\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 <code>external interface<\/code>. \u0422\u0438\u043f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u044b \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0432 \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a\u0435. \u041f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u0430\u044f \u0432 \u0431\u0438\u043b\u0434\u0435\u0440 <code>functionalComponent<\/code> \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>render<\/code> \u0434\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e: \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0435\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u044c <code>child<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">child(welcome) {     attrs.name = &quot;Kotlin&quot; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u043c \u0432\u0430\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u0443\u044e \u043e\u0431\u0435\u0440\u0442\u043a\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">fun RBuilder.welcome(handler: WelcomeProps.() -&gt; Unit) = child(welcome) {     attrs.handler() }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u043f\u0440\u043e\u0434\u0435\u043b\u044b\u0432\u0430\u043b\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043d\u0430 \u0448\u0430\u0433\u0435 4. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0434\u043b\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c <code>welcome { name = &quot;Kotlin&quot; }<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0435 \u0434\u0430\u044e\u0442 \u043d\u0430\u043c \u0447\u0435\u0433\u043e-\u0442\u043e \u043d\u043e\u0432\u043e\u0433\u043e. \u041d\u043e \u0438\u0445 \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0445\u0443\u043a\u043e\u0432.<\/p>\n<p>  <\/p>\n<h3 id=\"huk-state\">\u0425\u0443\u043a State<\/h3>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0445\u0443\u043a. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">val counter = functionalComponent&lt;RProps&gt; {     val (count, setCount) = useState(0)     button {         attrs.onClickFunction = { setCount(count + 1) }         +&quot;$count&quot;     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u0442\u044c \u0442\u0440\u043e\u0439\u043a\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>useState<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c <code>0<\/code> \u2013 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0438\u043f \u044d\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u0430\u043a <code>Int<\/code>. \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0442\u0438\u043f \u044f\u0432\u043d\u043e, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u0435\u0441\u043b\u0438 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0437\u0430\u043d\u0443\u043b\u044f\u0435\u043c\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c (<code>useState&lt;String?&gt;(null)<\/code>).<\/li>\n<li>\u0412\u044b\u0437\u043e\u0432 <code>useState<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u0430\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0434\u0435\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f:<br \/> \n<ol>\n<li>\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (\u0437\u0434\u0435\u0441\u044c \u044d\u0442\u043e <code>count<\/code> \u0442\u0438\u043f\u0430 <code>Int<\/code>);<\/li>\n<li>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f (\u0437\u0434\u0435\u0441\u044c \u044d\u0442\u043e <code>setCount<\/code> \u0442\u0438\u043f\u0430 <code>RSetState&lt;Int&gt; \/* = (Int) -&gt; Unit *\/<\/code>).<\/li>\n<\/ol>\n<\/li>\n<li>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 <code>setState<\/code>.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0420\u0435\u0430\u043a\u0442 \u0437\u0430\u0431\u043e\u0442\u0438\u0442\u0441\u044f \u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u043c \u0446\u0438\u043a\u043b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f <code>count<\/code> \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0438 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0449\u0435, \u0447\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0439, \u043d\u043e \u043a\u043e\u0434 \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u0439.<\/p>\n<p>  <\/p>\n<p>\u0411\u043e\u043b\u044c\u0448\u0435 \u043e \u0445\u0443\u043a\u0435 State \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u0432 <a href=\"https:\/\/reactjs.org\/docs\/hooks-state.html\" rel=\"nofollow noopener noreferrer\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043e\u0442 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430<\/strong>: \u0432 \u041a\u043e\u0442\u043b\u0438\u043d\u0435 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 <code>useState<\/code> \u2013 \u043a\u0430\u043a \u0441 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439-\u0434\u0435\u043b\u0435\u0433\u0430\u0442\u043e\u043c. \u0422\u043e\u0433\u0434\u0430 \u043a\u043e\u0434 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442\u0441\u044f, \u043e\u0434\u043d\u0430\u043a\u043e, \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043c\u0435\u043d\u0435\u0435 \u043f\u043e\u0445\u043e\u0436\u0438\u043c \u043d\u0430 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0420\u0435\u0430\u043a\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">val counter = functionalComponent&lt;RProps&gt; {     var count by useState(0)     button {         attrs.onClickFunction = { ++count }         +&quot;$count&quot;     } }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"huk-effect\">\u0425\u0443\u043a Effect<\/h3>\n<p>  <\/p>\n<p>\u0425\u0443\u043a \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0432\u0435\u0440\u0448\u0438\u0442\u044c \u043a\u0430\u043a\u043e\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u043e\u0431\u043e\u0447\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2013 \u0442\u0430\u043a\u043e\u0435 \u043a\u0430\u043a \u0432\u044b\u0437\u043e\u0432 API \u0438\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 WebSocket \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f. \u0414\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439 \u0444\u0430\u043a\u0442 \u0438 \u043f\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0435 \u043e\u0442\u0432\u0435\u0442\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0435\u0433\u043e \u0432 \u0442\u0435\u0433\u0435 <code>h3<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">val randomFact = functionalComponent&lt;RProps&gt; {     val (randomFact, setRandomFact) = useState&lt;String?&gt;(null)     useEffect(emptyList()) {         GlobalScope.launch {             val fortyTwoFact = window.fetch(&quot;http:\/\/numbersapi.com\/42&quot;).await().text().await()             setRandomFact(fortyTwoFact)         }     }     h3 { +(randomFact ?: &quot;Fetching...&quot;) } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0445\u0443\u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043f\u043e\u0447\u0442\u0438 \u0442\u0430\u043a\u043e\u0439 \u0436\u0435, \u043a\u0430\u043a \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0435. \u0421\u0430\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u043c\u044b \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u0438 <code>useEffect<\/code>, \u0433\u0434\u0435 \u043f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c <code>setRandomFact<\/code> \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0447\u0442\u043e <code>useEffect<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u0434\u0432\u0443\u043c\u044f \u043f\u0430\u0440\u0430\u043c\u0430\u0442\u0440\u0430\u043c\u0438. \u0412\u0442\u043e\u0440\u043e\u0439 \u2013 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u2013 <em>\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438<\/em> \u044d\u0444\u0444\u0435\u043a\u0442\u0430. \u0417\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442, \u043a\u0430\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u0443\u044e \u0432 <code>useEffect<\/code> \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432\u043d\u043e\u0432\u044c. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0437\u0430\u043f\u0440\u043e\u0441 \u043a API \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0436\u0435 \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a, \u0442\u043e \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0445\u0443\u043a \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 <code>setRandomFact<\/code>, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0446\u0438\u043a\u043b.<\/p>\n<p>  <\/p>\n<p>\u0411\u043e\u043b\u044c\u0448\u0435 \u043e\u0431 \u044d\u0442\u0438\u0445 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u044f\u0445 \u0445\u0443\u043a\u0430 Effect, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e \u0435\u0433\u043e \u0441\u043e\u043e\u0442\u043d\u0435\u0441\u0435\u043d\u0438\u0438 \u0441 &quot;\u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u043c&quot; \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u043c \u0446\u0438\u043a\u043b\u043e\u043c \u0432 \u0420\u0435\u0430\u043a\u0442\u0435, \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u044f\u0442\u044c \u0436\u0435 \u0443\u0437\u043d\u0430\u0442\u044c \u0432 <a href=\"https:\/\/reactjs.org\/docs\/hooks-effect.html\" rel=\"nofollow noopener noreferrer\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>.<\/p>\n<p>  <\/p>\n<h3 id=\"domashnee-zadanie\">\u0414\u043e\u043c\u0430\u0448\u043d\u0435\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435<\/h3>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435, \u043c\u043e\u0436\u0435\u0442\u0435 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>videoList<\/code>, \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441 \u0445\u0443\u043a\u0430\u043c\u0438. \u0425\u0443\u043a <code>useState<\/code> \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0430 \u0432\u043e\u0442 <code>useEffect<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u0430\u0436\u0435\u043d \u043f\u0440\u0438 \u043e\u0431\u0449\u0435\u043d\u0438\u0438 \u0441 \u0432\u043d\u0435\u0448\u043d\u0438\u043c API, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043d\u0430 \u0448\u0430\u0433\u0435 8.<\/p>\n<p>  <\/p>\n<p>\u041a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0435 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0436\u0438\u0442\u044c \u043f\u0440\u0438\u043f\u0435\u0432\u0430\u044e\u0447\u0438 \u0432 \u043e\u0434\u043d\u043e\u043c \u0420\u0435\u0430\u043a\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <em>\u043d\u043e\u0432\u044b\u0439<\/em> \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<h2 id=\"a-namestep11shag-11-chto-dalshea\">\u0428\u0430\u0433 11. \u0427\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435?<\/h2>\n<p>  <\/p>\n<h3 id=\"dopolnitelnye-fichi-prilozheniya\">\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0438\u0447\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>  <\/p>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u043e\u0435 \u043d\u0430\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e. \u041e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u0434\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0445 \u0442\u0435\u043c \u0432 \u0441\u0444\u0435\u0440\u0435 \u0420\u0435\u0430\u043a\u0442\u0430, Kotlin\/JS \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u043b\u0438\u0437\u043a\u0438\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439.<\/p>\n<p>  <\/p>\n<h4 id=\"poisk\">\u041f\u043e\u0438\u0441\u043a<\/h4>\n<p>  <\/p>\n<p>\u0411\u044b\u043b\u043e \u0431\u044b \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0438\u0434\u0435\u043e \u043f\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0443 \u0438\u043b\u0438 \u0434\u043e\u043a\u043b\u0430\u0434\u0447\u0438\u043a\u0443. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0437\u0443\u0447\u0438\u0442\u044c, \u043a\u0430\u043a <a href=\"https:\/\/reactjs.org\/docs\/forms.html\" rel=\"nofollow noopener noreferrer\">\u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 HTML \u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u0432 \u0420\u0435\u0430\u043a\u0442\u0435<\/a>, \u0438 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435.<\/p>\n<p>  <\/p>\n<h4 id=\"persistentnost\">\u041f\u0435\u0440\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043d\u043e\u0441\u0442\u044c<\/h4>\n<p>  <\/p>\n<p>\u041d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0442\u0435\u0440\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043d\u0430\u0441\u0442\u0430\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u044d\u043a-\u044d\u043d\u0434. \u041f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u044c\u0442\u0435\u0441\u044c \u0441 \u043a\u0430\u043a\u0438\u043c-\u043d\u0438\u0431\u0443\u0434\u044c \u0432\u0435\u0431 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u043c \u041a\u043e\u0442\u043b\u0438\u043d\u043e\u043c (\u0442\u0430\u043a\u0438\u043c \u043a\u0430\u043a <a href=\"https:\/\/ktor.io\/\" rel=\"nofollow noopener noreferrer\">Ktor<\/a>), \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0445 \u0438 \u043d\u0435\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0445 \u0432\u0438\u0434\u0435\u043e. \u0418\u043b\u0438 \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437 \u0431\u044d\u043a-\u044d\u043d\u0434\u0430 \u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/localStorage\" rel=\"nofollow noopener noreferrer\">\u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043f\u0440\u044f\u043c\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435<\/a>.<\/p>\n<p>  <\/p>\n<h4 id=\"slozhnye-apis\">\u0421\u043b\u043e\u0436\u043d\u044b\u0435 APIs<\/h4>\n<p>  <\/p>\n<p>\u0412 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e\u043c \u043c\u0438\u0440\u0435 \u0432\u0435\u0431\u0430 \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0430\u0442\u0430\u0441\u0435\u0442\u043e\u0432 \u0438 APIs, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f. \u041f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u043e\u0442\u043e\u0433\u0430\u043b\u0435\u0440\u0435\u044e \u0434\u043b\u044f <a href=\"https:\/\/thecatapi.com\/\" rel=\"nofollow noopener noreferrer\">\u0444\u043e\u0442\u043e\u043a \u043a\u043e\u0442\u0435\u0435\u043a<\/a>? \u0418\u043b\u0438 \u0440\u0430\u0437\u0443\u043a\u0440\u0430\u0441\u0438\u0442\u044c \u0441\u0432\u043e\u044e \u0436\u0438\u0437\u043d\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/unsplash.com\/developers\" rel=\"nofollow noopener noreferrer\">\u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0441 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f\u043c\u0438<\/a> (<strong>\u043f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430<\/strong>: \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 <a href=\"https:\/\/unsplash.com\/license\" rel=\"nofollow noopener noreferrer\">\u043b\u0438\u0446\u0435\u043d\u0437\u0438\u044e<\/a>)? \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0442\u0430\u0449\u0438\u0442\u044c \u0432 \u0441\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u0438\u0441\u0447\u0438\u0441\u043b\u0438\u043c\u043e!<\/p>\n<p>  <\/p>\n<h3 id=\"stili-poluchshe-otzyvchivost-i-setki\">\u0421\u0442\u0438\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0448\u0435: \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u043e\u0441\u0442\u044c \u0438 \u0441\u0435\u0442\u043a\u0438<\/h3>\n<p>  <\/p>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u044d\u043a\u0441\u0442\u0440\u0435\u043c\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0440\u0438\u0432\u043e\u0432\u0430\u0442\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0443\u0437\u043a\u0438\u0445 \u043e\u043a\u043d\u0430\u0445 \u0438 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u043e\u0432. \u041a\u0430\u043a \u0440\u0430\u0437 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0443\u0447\u0438\u0442\u044c CSS \u0441\u0435\u0442\u043a\u0438 (grids) \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u043c \u043a \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u0431\u043e\u043d\u0443\u0441\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u043a\u0430: \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0434\u0438\u0430\u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f).<\/p>\n<p>  <\/p>\n<h3 id=\"drugie-biblioteki\">\u0414\u0440\u0443\u0433\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/h3>\n<p>  <\/p>\n<p>\u0412 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 <a href=\"https:\/\/github.com\/JetBrains\/kotlin-wrappers\" rel=\"nofollow noopener noreferrer\">kotlin-wrappers<\/a> \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u0442\u043b\u0438\u043d\u043e\u0432\u0441\u043a\u0438\u0445 \u043e\u0431\u0435\u0440\u0442\u043e\u043a \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 JS \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043f\u043e \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 (\u043d\u043e \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044f\u0441\u044c):<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/JetBrains\/kotlin-wrappers\/tree\/master\/kotlin-react-redux\" rel=\"nofollow noopener noreferrer\">React-Redux<\/a>.<\/li>\n<li><a href=\"https:\/\/github.com\/JetBrains\/kotlin-wrappers\/tree\/master\/kotlin-react-router-dom\" rel=\"nofollow noopener noreferrer\">React-Router-DOM<\/a>.<\/li>\n<\/ul>\n<p>  <\/p>\n<h3 id=\"soobschestvo-pomosch-i-reshenie-problem\">\u0421\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e, \u043f\u043e\u043c\u043e\u0449\u044c \u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c<\/h3>\n<p>  <\/p>\n<p>\u041b\u0443\u0447\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0420\u0435\u0430\u043a\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 \u041a\u043e\u0442\u043b\u0438\u043d\u0435 \u2013 \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u044c <a href=\"https:\/\/youtrack.jetbrains.com\/issues\/CRKA\" rel=\"nofollow noopener noreferrer\">YouTrack<\/a>. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0432\u0430\u0448\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u043d\u0435 \u0431\u043e\u0439\u0442\u0435\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0442\u0438\u043a\u0435\u0442. \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c\u0441\u044f \u043a <a href=\"https:\/\/surveys.jetbrains.com\/s3\/kotlin-slack-sign-up\" rel=\"nofollow noopener noreferrer\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043a\u043e\u0442\u043b\u0438\u043d\u043e\u0432\u0441\u043a\u043e\u043c\u0443 Slack<\/a>. \u0422\u0430\u043c \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u043a\u0430\u043d\u0430\u043b\u043e\u0432, \u0432\u043a\u043b\u044e\u0447\u0430\u044f <code>#javascript<\/code> \u0438 <code>#react<\/code>.<\/p>\n<p>  <\/p>\n<h3 id=\"dalneyshee-izuchenie-korutin\">\u0414\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0435 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u0440\u0443\u0442\u0438\u043d<\/h3>\n<p>  <\/p>\n<p>\u041c\u044b \u0441\u043e\u0432\u0441\u0435\u043c \u0447\u0443\u0442\u044c-\u0447\u0443\u0442\u044c \u043f\u043e\u0442\u0440\u043e\u0433\u0430\u043b\u0438 \u043c\u043e\u0449\u043d\u044b\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u043a\u043e\u0440\u0443\u0442\u0438\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u043e\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u043c \u043d\u0430\u0447\u0430\u0442\u044c \u0441 <a href=\"https:\/\/play.kotlinlang.org\/hands-on\/Introduction%20to%20Coroutines%20and%20Channels\/01_Introduction\" rel=\"nofollow noopener noreferrer\">\u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u043f\u043e \u043a\u043e\u0440\u0443\u0442\u0438\u043d\u0430\u043c<\/a>.<\/p>\n<p>  <\/p>\n<h3 id=\"dalneyshee-izuchenie-reakta\">\u0414\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0435 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u0420\u0435\u0430\u043a\u0442\u0430<\/h3>\n<p>  <\/p>\n<p><a href=\"https:\/\/reactjs.org\/docs\/\" rel=\"nofollow noopener noreferrer\">\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u043e \u0420\u0435\u0430\u043a\u0442\u0443<\/a> \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0438\u0441\u0447\u0435\u0440\u043f\u044b\u0432\u0430\u044e\u0449\u0435 \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0445\u043e\u0440\u043e\u0448\u043e. \u0412\u044b \u0442\u0435\u043f\u0435\u0440\u044c \u0437\u043d\u0430\u0435\u0442\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0438\u0434\u0435\u0438 \u0420\u0435\u0430\u043a\u0442\u0430 \u0438 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437 \u041a\u043e\u0442\u043b\u0438\u043d\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0434\u0435\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f\u043c\u0438 \u0438\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0438 \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0438\u0445 \u043d\u0430 \u041a\u043e\u0442\u043b\u0438\u043d.<\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u0432\u044b \u0434\u0430\u0436\u0435 \u0441\u0442\u0430\u043d\u0435\u0442\u0435 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u043e\u043c \u043a\u043e\u0442\u043b\u0438\u043d\u043e\u0432\u0441\u043a\u043e\u0433\u043e \u0420\u0435\u0430\u043a\u0442\u0430!<\/p>\n<p>  <\/p>\n<h2 id=\"posleslovie-ot-perevodchika\">\u041f\u043e\u0441\u043b\u0435\u0441\u043b\u043e\u0432\u0438\u0435 \u043e\u0442 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430<\/h2>\n<p>  <\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e, \u0447\u0442\u043e \u0434\u043e\u0448\u043b\u0438 \u0434\u043e \u043a\u043e\u043d\u0446\u0430! \u0415\u0441\u043b\u0438 \u0432\u044b \u043e\u0446\u0435\u043d\u0438\u043b\u0438 Kotlin\/JS \u0438 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c \u0435\u0433\u043e \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u044f \u0431\u044b \u043f\u043e\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0447\u0438\u0442\u0430\u0442\u044c JS, \u0430 \u0432 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 JSX \u2013 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043f\u043e \u0420\u0435\u0430\u043a\u0442\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u043d\u0430 \u041a\u043e\u0442\u043b\u0438\u043d.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u0440\u0435\u043a\u0430\u044f \u0432\u043e\u043f\u0440\u043e\u0441\u044b, \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u0441\u0430\u043c \u0441\u0434\u0435\u043b\u0430\u043b \u0432\u044b\u0431\u043e\u0440 \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 Kotlin DSL. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 JSX \u0441\u043e \u0441\u0432\u043e\u0438\u043c\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u043c\u0438, Kotlin DSL \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0432\u044b\u0447\u0435\u043d \u0438 \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u0435\u043d \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441 \u041a\u043e\u0442\u043b\u0438\u043d\u043e\u043c. \u0417\u0434\u0435\u0441\u044c, \u043a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u043e\u0441\u044c, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u043a\u043e\u0442\u043b\u0438\u043d\u043e\u0432\u0441\u043a\u0438\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0432\u0440\u043e\u0434\u0435 \u0446\u0438\u043a\u043b\u043e\u0432, \u0430 \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0420\u0435\u0430\u043a\u0442\u0430 \u043a \u0441\u0432\u043e\u0435\u043c\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0443 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u2013 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e \u043d\u0435 \u043d\u0430\u0434\u043e. \u0412 \u043e\u0431\u0449\u0435\u043c, \u043d\u0430 \u041a\u043e\u0442\u043b\u0438\u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u043e, \u0445\u043e\u0442\u044f \u0438 \u0432\u0441\u0435 \u0435\u0449\u0435 \u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e. \u0421 \u043d\u0435\u0442\u0435\u0440\u043f\u0435\u043d\u0438\u0435\u043c \u0436\u0434\u0443 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f Kotlin\/JS \u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430 \u0432\u043e\u043a\u0440\u0443\u0433 \u043d\u0435\u0433\u043e!<\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/555744\/\"> https:\/\/habr.com\/ru\/post\/555744\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\n<p><em>\u041e\u0442 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430<\/em>.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041f\u0440\u043e <strong>Kotlin<\/strong> \u0435\u0441\u0442\u044c \u0441\u0442\u0435\u0440\u0435\u043e\u0442\u0438\u043f, \u0431\u0443\u0434\u0442\u043e \u0431\u044b \u044d\u0442\u043e \u044f\u0437\u044b\u043a \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434 Android. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044d\u0442\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u0442\u0430\u043a: \u044f\u0437\u044b\u043a \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c (<strong>JVM<\/strong>, <strong>JS<\/strong>, <strong>Native<\/strong>), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u043c\u0435\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438 \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u044f\u0437\u044b\u043a\u0430\u0445. \u0422\u0430\u043a\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 &quot;\u043c\u0443\u043b\u044c\u0442\u0438\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0441\u0442\u0438&quot; \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u0432 \u0435\u0434\u0438\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u0435, \u043d\u043e \u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u0434 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b.<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0436\u0443 <a href=\"https:\/\/play.kotlinlang.org\/hands-on\/Building%20Web%20Applications%20with%20React%20and%20Kotlin%20JS\" rel=\"nofollow noopener noreferrer\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b Kotlin Hands-On<\/a> \u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0432\u0435\u0431 \u0441\u0430\u0439\u0442\u043e\u0432 \u043d\u0430 \u041a\u043e\u0442\u043b\u0438\u043d\u0435. \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043c\u043d\u043e\u0433\u0438\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 Kotlin\/JS \u0438 \u043f\u043e\u0439\u043c\u0435\u043c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0447\u0438\u0441\u0442\u044b\u043c DOM. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0431\u0443\u0434\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e <a href=\"https:\/\/reactjs.org\/\" rel=\"nofollow noopener noreferrer\">React JS<\/a>, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043a\u043e\u0441\u043d\u0435\u043c\u0441\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0441\u0431\u043e\u0440\u043a\u0438 <strong>Gradle<\/strong>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0438\u0437 <strong>NPM<\/strong>, \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a <strong>REST API<\/strong>, \u0434\u0435\u043f\u043b\u043e\u044f \u043d\u0430 <strong>Heroku<\/strong>, \u0438 \u0432 \u0438\u0442\u043e\u0433\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c <em>\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435-\u0432\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440<\/em>.<\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043a\u0441\u0442 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0430 \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0435\u0442 \u041a\u043e\u0442\u043b\u0438\u043d \u0438 \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u0438\u043b\u0438 \u043f\u043e\u0447\u0442\u0438 \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u0420\u0435\u0430\u043a\u0442. \u0415\u0441\u043b\u0438 \u0432\u044b \u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u044b\u0442\u043d\u044b \u043f\u043e \u044d\u0442\u0438\u043c \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u043c, \u0442\u043e \u0447\u0430\u0441\u0442\u0438 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0430 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0432\u0430\u043c \u0447\u0440\u0435\u0437\u043c\u0435\u0440\u043d\u043e \u0440\u0430\u0437\u0436\u0435\u0432\u0430\u043d\u043d\u044b\u043c\u0438.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/e82\/357\/ada\/e82357ada36198277e49b1ad14a830bc.png\" alt=\"kotlin-react\"><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-322573","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/322573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=322573"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/322573\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=322573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=322573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=322573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}