{"id":334337,"date":"2022-06-10T21:00:06","date_gmt":"2022-06-10T21:00:06","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=334337"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=334337","title":{"rendered":"<span>\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430 \u0434\u043b\u044f 40+ \u044f\u0437\u044b\u043a\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/587\/3be\/6c9\/5873be6c9ff480eb86ab6d9494d208de.png\" width=\"2880\" height=\"1644\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/587\/3be\/6c9\/5873be6c9ff480eb86ab6d9494d208de.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u043d\u043b\u0430\u0439\u043d-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043a\u043e\u0434\u0430 \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c \u043d\u0430 40 \u044f\u0437\u044b\u043a\u0430\u0445 \u0434\u0435\u043b\u0438\u043c\u0441\u044f \u043a \u0441\u0442\u0430\u0440\u0442\u0443 <a href=\"https:\/\/skillfactory.ru\/frontend-razrabotchik?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_fr_100622&amp;utm_term=lead\"><u>\u043a\u0443\u0440\u0441\u0430 \u043f\u043e Frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435<\/u><\/a>. \u0410\u0432\u0442\u043e\u0440 \u044d\u0442\u043e\u0433\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430 \u2014 \u043e\u0441\u043d\u043e\u0432\u0430\u0442\u0435\u043b\u044c TailwindMasterKit.<\/p>\n<hr\/>\n<p>\u041e\u043d\u043b\u0430\u0439\u043d-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0438 \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043a\u043e\u0434 \u043d\u0430 \u043b\u044e\u0431\u0438\u043c\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0412 \u0438\u0434\u0435\u0430\u043b\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432\u044b\u0432\u043e\u0434 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u0432\u043e\u0438\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 \u043d\u0430 JavaScript.<\/p>\n<h3>\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438<\/h3>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9eb\/526\/173\/9eb5261734517a650b094fdd600865dd.png\" width=\"1600\" height=\"914\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9eb\/526\/173\/9eb5261734517a650b094fdd600865dd.png\"\/><figcaption><\/figcaption><\/figure>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/manuarora700\/react-code-editor\">\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/coderush.vercel.app\/\">\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0434\u0435\u043c\u043e\u0432\u0435\u0440\u0441\u0438\u044f<\/a>.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430 <a href=\"https:\/\/www.npmjs.com\/package\/monaco-editor\">Monaco Editor<\/a>. \u0412\u043e\u0442 \u0435\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438:<\/p>\n<ul>\n<li>\n<p>\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 VS Code;<\/p>\n<\/li>\n<li>\n<p>\u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044f \u0432 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0441\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u0432\u0432\u043e\u0434\u043e\u043c \u0438 \u0432\u044b\u0432\u043e\u0434\u043e\u043c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c 40 \u044f\u0437\u044b\u043a\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u0432\u044b\u0431\u043e\u0440 \u0442\u0435\u043c\u044b \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0442\u0435\u043c;<\/p>\n<\/li>\n<li>\n<p>\u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043a\u043e\u0434\u0435 (\u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0430\u044f \u043f\u0430\u043c\u044f\u0442\u044c, \u0441\u0442\u0430\u0442\u0443\u0441 \u0438 \u0442. \u0434.).<\/p>\n<\/li>\n<\/ul>\n<h3>\u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0442\u0435\u043a<\/h3>\n<ul>\n<li>\n<p><a href=\"https:\/\/reactjs.org\/\">React.js<\/a> \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/tailwindcss.com\/\">TailwindCSS<\/a> \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0435\u0439;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/judge0.com\/\">Judge0<\/a> \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/rapidapi.com\/\">RapidAPI<\/a> \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0440\u0430\u0437\u0432\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 Judge0;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/monaco-editor\">Monaco Editor<\/a> \u2014 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u0440\u043e\u0441\u0442\u0430:<\/p>\n<ul>\n<li>\n<p>\u0441omponents: \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \/ \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u044b \u043a\u043e\u0434\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, CodeEditorWindow \u0438 Landing);<\/p>\n<\/li>\n<li>\n<p>hooks: \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0445\u0443\u043a\u0438 (\u0438 \u0445\u0443\u043a\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448 \u2014 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b);<\/p>\n<\/li>\n<li>\n<p>lib: \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 (\u0437\u0434\u0435\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0442\u0435\u043c\u044b);<\/p>\n<\/li>\n<li>\n<p>constants: \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a languageOptions \u0438 customStyles, \u0434\u043b\u044f \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0445 \u0441\u043f\u0438\u0441\u043a\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>utils: \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041b\u043e\u0433\u0438\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c<\/h3>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u043a\u043e\u0434\u0443, \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c\u0441\u044f \u0432 \u043b\u043e\u0433\u0438\u043a\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0438 \u0432 \u0442\u043e\u043c, \u043a\u0430\u043a \u043f\u0438\u0441\u0430\u0442\u044c \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043a\u043e\u0434 \u0441 \u043d\u0443\u043b\u044f.<\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u044f\u0437\u044b\u043a (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u2014 JavaScript).<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0435\u0433\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442, \u0430 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u0432 \u043e\u043a\u043d\u0435 \u0432\u044b\u0432\u043e\u0434\u0430.<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043e\u043a\u043d\u0435 \u0432\u044b\u0432\u043e\u0434\u0430 \u043a\u043e\u0434\u0430 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0432\u044b\u0432\u043e\u0434 \u0438 \u0441\u0442\u0430\u0442\u0443\u0441 \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u043c \u043a\u043e\u0434\u0430 \u0441\u0432\u043e\u0438 \u0432\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 judge (\u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0435).<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u043c \u043a\u043e\u0434\u0435 (\u043f\u0440\u0438\u043c\u0435\u0440: \u043d\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0443\u0448\u043b\u043e 5 \u043c\u0441, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e 2024 \u041a\u0431 \u043f\u0430\u043c\u044f\u0442\u0438, \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u043e).<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0432\u0448\u0438\u0441\u044c \u0441\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u043a\u043e\u0434\u0443 \u0438 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c\u0441\u044f, \u043a\u0430\u043a \u0442\u0443\u0442 \u0432\u0441\u0451 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u043d\u043e.<\/p>\n<h3>\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u043e\u0434\u0430<\/h3>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5d0\/c16\/5af\/5d0c165af33081f618e27fa1b8b29a00.png\" width=\"1600\" height=\"1157\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5d0\/c16\/5af\/5d0c165af33081f618e27fa1b8b29a00.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u043e\u0434\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 Monaco Editor, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u043e\u0433\u043e NPM-\u043f\u0430\u043a\u0435\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">\/\/ CodeEditorWindow.js  import React, { useState } from \"react\";  import Editor from \"@monaco-editor\/react\";  const CodeEditorWindow = ({ onChange, language, code, theme }) => {   const [value, setValue] = useState(code || \"\");    const handleEditorChange = (value) => {     setValue(value);     onChange(\"code\", value);   };    return (     &lt;div className=\"overlay rounded-md overflow-hidden w-full h-full shadow-4xl\">       &lt;Editor         height=\"85vh\"         width={`100%`}         language={language || \"javascript\"}         value={value}         theme={theme}         defaultValue=\"\/\/ some comment\"         onChange={handleEditorChange}       \/>     &lt;\/div>   ); }; export default CodeEditorWindow;<\/code><\/pre>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Editor \u0431\u0435\u0440\u0443\u0442\u0441\u044f \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 @monaco-editor\/react, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430 \u0441 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0432\u044b\u0441\u043e\u0442\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 85vh.<\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Editor \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432:<\/p>\n<ul>\n<li>\n<p>language: \u044f\u0437\u044b\u043a, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u044b \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0438 \u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0432\u0432\u043e\u0434\u0430.<\/p>\n<\/li>\n<li>\n<p>theme: \u0446\u0432\u0435\u0442\u0430 \u0438 \u0444\u043e\u043d \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 \u043a\u043e\u0434\u0430 (\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u043f\u043e\u0437\u0436\u0435).<\/p>\n<\/li>\n<li>\n<p>value: \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440.<\/p>\n<\/li>\n<li>\n<p>onChange: \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 value \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435. \u0418\u0437\u043c\u0435\u043d\u0438\u0432\u0448\u0435\u0435\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0437\u0436\u0435 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0432\u044b\u0437\u0432\u0430\u0442\u044c API Judge0.<\/p>\n<\/li>\n<\/ul>\n<p>\u0420\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 onChange, language, code \u0438 theme \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Landing.js. \u041a\u043e\u0433\u0434\u0430 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e value, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a onChange \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 Landing.<\/p>\n<h3>\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Landing<\/h3>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 landing \u0432 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0442\u0440\u0451\u0445 \u0447\u0430\u0441\u0442\u0435\u0439:<\/p>\n<ul>\n<li>\n<p>Actions Bar \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0445 \u0441\u043f\u0438\u0441\u043a\u043e\u0432 Languages \u0438 Themes.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Code Editor Window.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Output \u0438 Custom Input.<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"javascript\">\/\/ Landing.js  import React, { useEffect, useState } from \"react\"; import CodeEditorWindow from \".\/CodeEditorWindow\"; import axios from \"axios\"; import { classnames } from \"..\/utils\/general\"; import { languageOptions } from \"..\/constants\/languageOptions\";  import { ToastContainer, toast } from \"react-toastify\"; import \"react-toastify\/dist\/ReactToastify.css\";  import { defineTheme } from \"..\/lib\/defineTheme\"; import useKeyPress from \"..\/hooks\/useKeyPress\"; import Footer from \".\/Footer\"; import OutputWindow from \".\/OutputWindow\"; import CustomInput from \".\/CustomInput\"; import OutputDetails from \".\/OutputDetails\"; import ThemeDropdown from \".\/ThemeDropdown\"; import LanguagesDropdown from \".\/LanguagesDropdown\";  const javascriptDefault = `\/\/ some comment`;  const Landing = () => {   const [code, setCode] = useState(javascriptDefault);   const [customInput, setCustomInput] = useState(\"\");   const [outputDetails, setOutputDetails] = useState(null);   const [processing, setProcessing] = useState(null);   const [theme, setTheme] = useState(\"cobalt\");   const [language, setLanguage] = useState(languageOptions[0]);    const enterPress = useKeyPress(\"Enter\");   const ctrlPress = useKeyPress(\"Control\");    const onSelectChange = (sl) => {     console.log(\"selected Option...\", sl);     setLanguage(sl);   };    useEffect(() => {     if (enterPress &amp;&amp; ctrlPress) {       console.log(\"enterPress\", enterPress);       console.log(\"ctrlPress\", ctrlPress);       handleCompile();     }   }, [ctrlPress, enterPress]);   const onChange = (action, data) => {     switch (action) {       case \"code\": {         setCode(data);         break;       }       default: {         console.warn(\"case not handled!\", action, data);       }     }   };   const handleCompile = () => {     \/\/ We will come to the implementation later in the code   };    const checkStatus = async (token) => {     \/\/ We will come to the implementation later in the code   };    function handleThemeChange(th) {     \/\/ We will come to the implementation later in the code   }   useEffect(() => {     defineTheme(\"oceanic-next\").then((_) =>       setTheme({ value: \"oceanic-next\", label: \"Oceanic Next\" })     );   }, []);    const showSuccessToast = (msg) => {     toast.success(msg || `Compiled Successfully!`, {       position: \"top-right\",       autoClose: 1000,       hideProgressBar: false,       closeOnClick: true,       pauseOnHover: true,       draggable: true,       progress: undefined,     });   };   const showErrorToast = (msg) => {     toast.error(msg || `Something went wrong! Please try again.`, {       position: \"top-right\",       autoClose: 1000,       hideProgressBar: false,       closeOnClick: true,       pauseOnHover: true,       draggable: true,       progress: undefined,     });   };    return (     &lt;>       &lt;ToastContainer         position=\"top-right\"         autoClose={2000}         hideProgressBar={false}         newestOnTop={false}         closeOnClick         rtl={false}         pauseOnFocusLoss         draggable         pauseOnHover       \/>       &lt;div className=\"h-4 w-full bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500\">&lt;\/div>       &lt;div className=\"flex flex-row\">         &lt;div className=\"px-4 py-2\">           &lt;LanguagesDropdown onSelectChange={onSelectChange} \/>         &lt;\/div>         &lt;div className=\"px-4 py-2\">           &lt;ThemeDropdown handleThemeChange={handleThemeChange} theme={theme} \/>         &lt;\/div>       &lt;\/div>       &lt;div className=\"flex flex-row space-x-4 items-start px-4 py-4\">         &lt;div className=\"flex flex-col w-full h-full justify-start items-end\">           &lt;CodeEditorWindow             code={code}             onChange={onChange}             language={language?.value}             theme={theme.value}           \/>         &lt;\/div>          &lt;div className=\"right-container flex flex-shrink-0 w-[30%] flex-col\">           &lt;OutputWindow outputDetails={outputDetails} \/>           &lt;div className=\"flex flex-col items-end\">             &lt;CustomInput               customInput={customInput}               setCustomInput={setCustomInput}             \/>             &lt;button               onClick={handleCompile}               disabled={!code}               className={classnames(                 \"mt-4 border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] px-4 py-2 hover:shadow transition duration-200 bg-white flex-shrink-0\",                 !code ? \"opacity-50\" : \"\"               )}             >               {processing ? \"Processing...\" : \"Compile and Execute\"}             &lt;\/button>           &lt;\/div>           {outputDetails &amp;&amp; &lt;OutputDetails outputDetails={outputDetails} \/>}         &lt;\/div>       &lt;\/div>       &lt;Footer \/>     &lt;\/>   ); }; export default Landing;<\/code><\/pre>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 Landing \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435.<\/p>\n<h3>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 CodeEditorWindow<\/h3>\n<p>\u041a\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u0432\u0438\u0434\u0435\u043b\u0438, \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 CodeEditorWindow \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u043a\u043e\u0434 \u0438 \u043c\u0435\u0442\u043e\u0434 onChange, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u0434:.<\/p>\n<pre><code class=\"javascript\">\/\/ onChange method implementation   const onChange = (action, data) => {     switch (action) {       case \"code\": {         setCode(data);         break;       }       default: {         console.warn(\"case not handled!\", action, data);       }     }   };<\/code><\/pre>\n<p>\u0417\u0430\u0434\u0430\u0451\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 code \u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 CodeEditorWindow \u0442\u0430\u043a\u0436\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e language \u2014 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u044f\u0437\u044b\u043a, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u044b \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0438 \u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0432\u0432\u043e\u0434\u0430.<\/p>\n<p>\u041c\u0430\u0441\u0441\u0438\u0432 languageOptions \u044f \u0441\u043e\u0437\u0434\u0430\u043b \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043d\u044f\u0442\u044b\u0445 \u0432 Monaco Editor \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u044f\u0437\u044b\u043a\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0435\u0439 (\u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c languageId, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c\u044b\u0439 \u0432 \u044d\u0442\u0438\u0445 API judge0):<\/p>\n<pre><code class=\"javascript\">\/\/ constants\/languageOptions.js  export const languageOptions = [   {     id: 63,     name: \"JavaScript (Node.js 12.14.0)\",     label: \"JavaScript (Node.js 12.14.0)\",     value: \"javascript\",   },   {     id: 45,     name: \"Assembly (NASM 2.14.02)\",     label: \"Assembly (NASM 2.14.02)\",     value: \"assembly\",   },     ...     ...     ...     ...     ...     ...        {     id: 84,     name: \"Visual Basic.Net (vbnc 0.0.0.5943)\",     label: \"Visual Basic.Net (vbnc 0.0.0.5943)\",     value: \"vbnet\",   }, ];<\/code><\/pre>\n<p>\u0412 \u043a\u0430\u0436\u0434\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0435 languageOptions \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 id, name, label \u0438 value. \u041c\u0430\u0441\u0441\u0438\u0432 languageOptions \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u0435\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 onSelectChange \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 id \u0441 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<h3>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 LanguageDropdown<\/h3>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/24c\/9c4\/0ca\/24c9c40ca264d229aa495d8f7957a014.png\" width=\"992\" height=\"176\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/24c\/9c4\/0ca\/24c9c40ca264d229aa495d8f7957a014.png\"\/><figcaption><\/figcaption><\/figure>\n<pre><code class=\"javascript\">\/\/ LanguageDropdown.js  import React from \"react\"; import Select from \"react-select\"; import { customStyles } from \"..\/constants\/customStyles\"; import { languageOptions } from \"..\/constants\/languageOptions\";  const LanguagesDropdown = ({ onSelectChange }) => {   return (     &lt;Select       placeholder={`Filter By Category`}       options={languageOptions}       styles={customStyles}       defaultValue={languageOptions[0]}       onChange={(selectedOption) => onSelectChange(selectedOption)}     \/>   ); };  export default LanguagesDropdown;<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0445 \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0438 \u0438\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/react-select.com\/\">react-select<\/a>.<\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b react-select \u2014 defaultValue \u0438 \u043c\u0430\u0441\u0441\u0438\u0432 options (\u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c languageOptions), \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u044d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430.<\/p>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e defaultValue \u2014 \u044d\u0442\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u042f\u0437\u044b\u043a\u043e\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u044f\u0437\u044b\u043a \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u044f\u0437\u044b\u043a\u043e\u0432 \u2014 JavaScript.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u0435\u043d\u044f\u0435\u0442 \u044f\u0437\u044b\u043a, \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e onSelectChange:<\/p>\n<pre><code class=\"javascript\">const onSelectChange = (sl) => {     setLanguage(sl); };<\/code><\/pre>\n<h3>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ThemeDropdown<\/h3>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e65\/11a\/ee5\/e6511aee591b890be6a398999c685525.png\" width=\"992\" height=\"176\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e65\/11a\/ee5\/e6511aee591b890be6a398999c685525.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ThemeDropdown \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 LanguageDropdown (\u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u0438 \u043f\u0430\u043a\u0435\u0442\u043e\u043c react-select):<\/p>\n<pre><code class=\"javascript\">\/\/ ThemeDropdown.js  import React from \"react\"; import Select from \"react-select\"; import monacoThemes from \"monaco-themes\/themes\/themelist\"; import { customStyles } from \"..\/constants\/customStyles\";  const ThemeDropdown = ({ handleThemeChange, theme }) => {   return (     &lt;Select       placeholder={`Select Theme`}       \/\/ options={languageOptions}       options={Object.entries(monacoThemes).map(([themeId, themeName]) => ({         label: themeName,         value: themeId,         key: themeId,       }))}       value={theme}       styles={customStyles}       onChange={handleThemeChange}     \/>   ); };  export default ThemeDropdown;<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0445 \u0442\u0435\u043c \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 \u043d\u0438\u0436\u0435, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 Monaco Editor, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u0430\u043a\u0435\u0442 monacoThemes:<\/p>\n<pre><code class=\"javascript\">\/\/ lib\/defineTheme.js  import { loader } from \"@monaco-editor\/react\";  const monacoThemes = {   active4d: \"Active4D\",   \"all-hallows-eve\": \"All Hallows Eve\",   amy: \"Amy\",   \"birds-of-paradise\": \"Birds of Paradise\",   blackboard: \"Blackboard\",   \"brilliance-black\": \"Brilliance Black\",   \"brilliance-dull\": \"Brilliance Dull\",   \"chrome-devtools\": \"Chrome DevTools\",   \"clouds-midnight\": \"Clouds Midnight\",   clouds: \"Clouds\",   cobalt: \"Cobalt\",   dawn: \"Dawn\",   dreamweaver: \"Dreamweaver\",   eiffel: \"Eiffel\",   \"espresso-libre\": \"Espresso Libre\",   github: \"GitHub\",   idle: \"IDLE\",   katzenmilch: \"Katzenmilch\",   \"kuroir-theme\": \"Kuroir Theme\",   lazy: \"LAZY\",   \"magicwb--amiga-\": \"MagicWB (Amiga)\",   \"merbivore-soft\": \"Merbivore Soft\",   merbivore: \"Merbivore\",   \"monokai-bright\": \"Monokai Bright\",   monokai: \"Monokai\",   \"night-owl\": \"Night Owl\",   \"oceanic-next\": \"Oceanic Next\",   \"pastels-on-dark\": \"Pastels on Dark\",   \"slush-and-poppies\": \"Slush and Poppies\",   \"solarized-dark\": \"Solarized-dark\",   \"solarized-light\": \"Solarized-light\",   spacecadet: \"SpaceCadet\",   sunburst: \"Sunburst\",   \"textmate--mac-classic-\": \"Textmate (Mac Classic)\",   \"tomorrow-night-blue\": \"Tomorrow-Night-Blue\",   \"tomorrow-night-bright\": \"Tomorrow-Night-Bright\",   \"tomorrow-night-eighties\": \"Tomorrow-Night-Eighties\",   \"tomorrow-night\": \"Tomorrow-Night\",   tomorrow: \"Tomorrow\",   twilight: \"Twilight\",   \"upstream-sunburst\": \"Upstream Sunburst\",   \"vibrant-ink\": \"Vibrant Ink\",   \"xcode-default\": \"Xcode_default\",   zenburnesque: \"Zenburnesque\",   iplastic: \"iPlastic\",   idlefingers: \"idleFingers\",   krtheme: \"krTheme\",   monoindustrial: \"monoindustrial\", };  const defineTheme = (theme) => {   return new Promise((res) => {     Promise.all([       loader.init(),       import(`monaco-themes\/themes\/${monacoThemes[theme]}.json`),     ]).then(([monaco, themeData]) => {       monaco.editor.defineTheme(theme, themeData);       res();     });   }); };  export { defineTheme };<\/code><\/pre>\n<p>\u0412 monaco-themes \u0442\u0435\u043c \u043c\u043d\u043e\u0433\u043e, \u0442\u0430\u043a \u0447\u0442\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u2014 \u043d\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. <\/p>\n<p>\u0422\u0435\u043c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044f defineTheme, \u0432 \u043d\u0435\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u043c\u0438\u0441, \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u043a\u0448\u0435\u043d\u0430 monaco.editor.defineTheme(theme, themeData) \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0442\u0435\u043c\u0430 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430. \u0421\u0430\u043c\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0442\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u043a\u043d\u0430 \u043a\u043e\u0434\u0430 Monaco Editor \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u043a\u043e\u0434\u0430.<\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f defineTheme \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 onChange, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0443\u0436\u0435 \u0432\u0438\u0434\u0435\u043b\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 ThemeDropdown.js:<\/p>\n<pre><code class=\"javascript\">\/\/ Landing.js - handleThemeChange() function  function handleThemeChange(th) {     const theme = th;     console.log(\"theme...\", theme);      if ([\"light\", \"vs-dark\"].includes(theme.value)) {       setTheme(theme);     } else {       defineTheme(theme.value).then((_) => setTheme(theme));     }   }   <\/code><\/pre>\n<p>\u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 handleThemeChange() \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043c\u0430: light (\u0441\u0432\u0435\u0442\u043b\u0430\u044f) \u0438\u043b\u0438 dark (\u0442\u0451\u043c\u043d\u0430\u044f). \u042d\u0442\u0438 \u0442\u0435\u043c\u044b \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 MonacoEditor \u2014 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 defineTheme() \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0442\u0435\u043c \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u043d\u0435\u0442, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 defineTheme() \u0438 \u0437\u0430\u0434\u0430\u0451\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u044b.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fcb\/e84\/70d\/fcbe8470de5dfea34659824ae55f2396.png\" width=\"1600\" height=\"1282\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fcb\/e84\/70d\/fcbe8470de5dfea34659824ae55f2396.png\"\/><figcaption><\/figcaption><\/figure>\n<h3>\u041a\u0430\u043a \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Judge0<\/h3>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0441\u0430\u043c\u043e\u0439 \u00ab\u0432\u043a\u0443\u0441\u043d\u043e\u0439\u00bb \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043a\u043e\u0434\u0430 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u0430\u0445, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Judge0 \u2014 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430.<\/p>\n<p>\u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0432\u044b\u0437\u043e\u0432 API \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 (\u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434, \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u044f\u0437\u044b\u043a\u0430) \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432 \u043e\u0442\u0432\u0435\u0442 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c Judge0:<\/p>\n<ul>\n<li>\n<p>\u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a <a href=\"https:\/\/judge0.com\/\">Judge0<\/a> \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u043b\u0430\u043d;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 Judge0 \u0440\u0430\u0437\u043c\u0435\u0449\u0451\u043d \u043d\u0430 <a href=\"https:\/\/rapidapi.com\/\">RapidAPI<\/a> (\u0438\u0434\u0451\u043c \u0434\u0430\u043b\u044c\u0448\u0435 \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u043b\u0430\u043d);<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c RAPIDAPI_HOST \u0438 RAPIDAPI_KEY (\u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u0437\u043e\u0432\u043e\u0432 API \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430).<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u0448\u0431\u043e\u0440\u0434 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b99\/2c6\/8de\/b992c68de3a228b522b305a969741e3d.png\" width=\"1600\" height=\"778\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b99\/2c6\/8de\/b992c68de3a228b522b305a969741e3d.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0414\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u043e\u0432 API \u043d\u0443\u0436\u043d\u044b \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b X-RapidAPI-Host \u0438 X-RapidAPI-Key. \u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0438\u0445 \u0432 \u0444\u0430\u0439\u043b\u0430\u0445 .env:<\/p>\n<pre><code class=\"javascript\">REACT_APP_RAPID_API_HOST = YOUR_HOST_URL REACT_APP_RAPID_API_KEY = YOUR_SECRET_KEY REACT_APP_RAPID_API_URL = YOUR_SUBMISSIONS_URL<\/code><\/pre>\n<p>\u0412 React \u0432\u0430\u0436\u043d\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c REACT_APP.<\/p>\n<p>\u0411\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c URL-\u0430\u0434\u0440\u0435\u0441 SUBMISSIONS_URL \u0438\u0437 \u0445\u043e\u0441\u0442\u0430 \u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \/submission.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, https:\/\/judge0-ce.p.rapidapi.com\/submissions \u0431\u0443\u0434\u0435\u0442 URL-\u0430\u0434\u0440\u0435\u0441\u043e\u043c submissions \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u043b\u043e\u0433\u0438\u043a\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438.<\/p>\n<h3>\u041b\u043e\u0433\u0438\u043a\u0430 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438<\/h3>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f:<\/p>\n<ul>\n<li>\n<p>\u041d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 <code>Compile and Execute<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 handleCompile().<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 handleCompile() \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0431\u044d\u043a\u0435\u043d\u0434 Judge0 RapidAPI \u043f\u043e URL-\u0430\u0434\u0440\u0435\u0441\u0443 submissions \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u2014 languageId, source_code \u0438 stdin \u2014 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 customInput.<\/p>\n<\/li>\n<li>\n<p>\u0412 options \u043a\u0430\u043a \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f host \u0438 secret.<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0433\u0443\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b base64_encoded \u0438 fields.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 POST-\u0437\u0430\u043f\u0440\u043e\u0441\u0430 submission \u043d\u0430\u0448 \u0437\u0430\u043f\u0440\u043e\u0441 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441. \u041e\u0442\u0432\u0435\u0442 \u043d\u0430 POST-\u0437\u0430\u043f\u0440\u043e\u0441 \u2014 token, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f (Processing, Accepted, Time Limit Exceeded, Runtime Exceptions \u0438 \u0434\u0440.).<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0443\u0441\u043b\u043e\u0432\u0438\u0439, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432 \u043e\u043a\u043d\u0435 \u0432\u044b\u0432\u043e\u0434\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043c\u0435\u0442\u043e\u0434 handleCompile():<\/p>\n<pre><code class=\"javascript\">const handleCompile = () => {     setProcessing(true);     const formData = {       language_id: language.id,       \/\/ encode source code in base64       source_code: btoa(code),       stdin: btoa(customInput),     };     const options = {       method: \"POST\",       url: process.env.REACT_APP_RAPID_API_URL,       params: { base64_encoded: \"true\", fields: \"*\" },       headers: {         \"content-type\": \"application\/json\",         \"Content-Type\": \"application\/json\",         \"X-RapidAPI-Host\": process.env.REACT_APP_RAPID_API_HOST,         \"X-RapidAPI-Key\": process.env.REACT_APP_RAPID_API_KEY,       },       data: formData,     };      axios       .request(options)       .then(function (response) {         console.log(\"res.data\", response.data);         const token = response.data.token;         checkStatus(token);       })       .catch((err) => {         let error = err.response ? err.response.data : err;         setProcessing(false);         console.log(error);       });   };<\/code><\/pre>\n<p>\u041e\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 languageId, source_code \u0438 stdin. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 btoa \u043f\u0435\u0440\u0435\u0434 source_code \u0438 stdin. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u043e\u043a \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 base64, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043a API \u0435\u0441\u0442\u044c base64_encoded: true.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442 \u0438 \u0435\u0441\u0442\u044c token, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 checkStatus() \u0434\u043b\u044f \u043e\u043f\u0440\u043e\u0441\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \/submissions\/${token}:<\/p>\n<pre><code class=\"javascript\">const checkStatus = async (token) => {     const options = {       method: \"GET\",       url: process.env.REACT_APP_RAPID_API_URL + \"\/\" + token,       params: { base64_encoded: \"true\", fields: \"*\" },       headers: {         \"X-RapidAPI-Host\": process.env.REACT_APP_RAPID_API_HOST,         \"X-RapidAPI-Key\": process.env.REACT_APP_RAPID_API_KEY,       },     };     try {       let response = await axios.request(options);       let statusId = response.data.status?.id;        \/\/ Processed - we have a result       if (statusId === 1 || statusId === 2) {         \/\/ still processing         setTimeout(() => {           checkStatus(token)         }, 2000)         return       } else {         setProcessing(false)         setOutputDetails(response.data)         showSuccessToast(`Compiled Successfully!`)         console.log('response.data', response.data)         return       }     } catch (err) {       console.log(\"err\", err);       setProcessing(false);       showErrorToast();     }   };<\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u043d\u0435\u0435 \u043a\u043e\u0434\u0430, \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u043e\u0441\u0438\u0442\u044c submissions \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e token \u0438\u0437 \u043e\u0442\u0432\u0435\u0442\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c GET-\u0437\u0430\u043f\u0440\u043e\u0441 \u043a \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435. \u041f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043e\u0442\u0432\u0435\u0442\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c statusId === 1 || statusId === 2. \u041d\u043e \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442? \u0423 \u043d\u0430\u0441 14 \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u0432, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u043b\u044e\u0431\u043e\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u043e\u0439 \u0432 API \u0447\u0430\u0441\u0442\u044c\u044e \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">export const statuses = [   {     id: 1,     description: \"In Queue\",   },   {     id: 2,     description: \"Processing\",   },   {     id: 3,     description: \"Accepted\",   },   {     id: 4,     description: \"Wrong Answer\",   },   {     id: 5,     description: \"Time Limit Exceeded\",   },   {     id: 6,     description: \"Compilation Error\",   },   {     id: 7,     description: \"Runtime Error (SIGSEGV)\",   },   {     id: 8,     description: \"Runtime Error (SIGXFSZ)\",   },   {     id: 9,     description: \"Runtime Error (SIGFPE)\",   },   {     id: 10,     description: \"Runtime Error (SIGABRT)\",   },   {     id: 11,     description: \"Runtime Error (NZEC)\",   },   {     id: 12,     description: \"Runtime Error (Other)\",   },   {     id: 13,     description: \"Internal Error\",   },   {     id: 14,     description: \"Exec Format Error\",   }, ];<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 statusId === 1 \u0438\u043b\u0438 statusId === 2, \u043a\u043e\u0434 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0438 \u043d\u0443\u0436\u043d\u043e \u0441\u043d\u043e\u0432\u0430 \u0432\u044b\u0437\u0432\u0430\u0442\u044c API \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043f\u043e\u043b\u0443\u0447\u0435\u043d \u043b\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u0432 if \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d setTimeout(), \u0433\u0434\u0435 \u0441\u043d\u043e\u0432\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f checkStatus(), \u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0451 \u0441\u043d\u043e\u0432\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f API \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u0442\u0443\u0441.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0441\u0442\u0430\u0442\u0443\u0441 \u043d\u0435 2 \u0438\u043b\u0438 3, \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043e \u0438 \u0435\u0441\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u2014 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0438\u043b\u0438 \u043a\u043e\u0434 \u0441 \u043f\u0440\u0435\u0432\u044b\u0448\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u0435\u0434\u0435\u043b\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438. \u0410 \u043c\u043e\u0436\u0435\u0442, \u043a\u043e\u0434 \u0441 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f; statusId \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0441\u0435 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 while(true) \u0432\u044b\u0434\u0430\u0451\u0442\u0441\u044f \u043e\u0448\u0438\u0431\u043a\u0430 \u043f\u0440\u0435\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0435\u043b\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5bc\/57a\/3bf\/5bc57a3bfa70cf310d594c6a7a8f17b9.png\" width=\"1600\" height=\"715\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5bc\/57a\/3bf\/5bc57a3bfa70cf310d594c6a7a8f17b9.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0418\u043b\u0438, \u0435\u0441\u043b\u0438 \u0434\u043e\u043f\u0443\u0449\u0435\u043d\u0430 \u043e\u0448\u0438\u0431\u043a\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430, \u0432\u0435\u0440\u043d\u0451\u0442\u0441\u044f \u043e\u0448\u0438\u0431\u043a\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/84e\/2cc\/42c\/84e2cc42c9310d86b4f53cd515d019de.png\" width=\"1600\" height=\"722\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/84e\/2cc\/42c\/84e2cc42c9310d86b4f53cd515d019de.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0422\u0430\u043a \u0438\u043b\u0438 \u0438\u043d\u0430\u0447\u0435, \u0435\u0441\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 outputDetails, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u0447\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0432 \u043e\u043a\u043d\u0435 \u0432\u044b\u0432\u043e\u0434\u0430, \u0432 \u043f\u0440\u0430\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<h3>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u043a\u043d\u0430 \u0432\u044b\u0432\u043e\u0434\u0430<\/h3>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/615\/7b8\/e83\/6157b8e8380757530de7f55b316cd822.png\" width=\"896\" height=\"936\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/615\/7b8\/e83\/6157b8e8380757530de7f55b316cd822.png\"\/><figcaption><\/figcaption><\/figure>\n<pre><code class=\"javascript\">import React from \"react\";  const OutputWindow = ({ outputDetails }) => {   const getOutput = () => {     let statusId = outputDetails?.status?.id;      if (statusId === 6) {       \/\/ compilation error       return (         &lt;pre className=\"px-2 py-1 font-normal text-xs text-red-500\">           {atob(outputDetails?.compile_output)}         &lt;\/pre>       );     } else if (statusId === 3) {       return (         &lt;pre className=\"px-2 py-1 font-normal text-xs text-green-500\">           {atob(outputDetails.stdout) !== null             ? `${atob(outputDetails.stdout)}`             : null}         &lt;\/pre>       );     } else if (statusId === 5) {       return (         &lt;pre className=\"px-2 py-1 font-normal text-xs text-red-500\">           {`Time Limit Exceeded`}         &lt;\/pre>       );     } else {       return (         &lt;pre className=\"px-2 py-1 font-normal text-xs text-red-500\">           {atob(outputDetails?.stderr)}         &lt;\/pre>       );     }   };   return (     &lt;>       &lt;h1 className=\"font-bold text-xl bg-clip-text text-transparent bg-gradient-to-r from-slate-900 to-slate-700 mb-2\">         Output       &lt;\/h1>       &lt;div className=\"w-full h-56 bg-[#1e293b] rounded-md text-white font-normal text-sm overflow-y-auto\">         {outputDetails ? &lt;>{getOutput()}&lt;\/> : null}       &lt;\/div>     &lt;\/>   ); };  export default OutputWindow;<\/code><\/pre>\n<p>\u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0443\u0441\u043f\u0435\u0445\u0430 \u0438\u043b\u0438 \u043d\u0435\u0443\u0441\u043f\u0435\u0445\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438. \u0412 \u043c\u0435\u0442\u043e\u0434\u0435 getOutput() \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u044b\u0432\u043e\u0434 \u0438 \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 statusId \u0440\u0430\u0432\u0435\u043d 3, \u0438\u043c\u0435\u0435\u043c \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u0441\u043e \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u043c Accepted. \u041e\u0442 API \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f stdout \u2014 Standard Output (\u00ab\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0432\u044b\u0432\u043e\u0434\u00bb). \u041e\u043d \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0445 \u0438\u0437 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0432 API \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 statusId \u0440\u0430\u0432\u0435\u043d 5, \u0438\u043c\u0435\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u043f\u0440\u0435\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0435\u043b\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u041f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u0432 \u043a\u043e\u0434\u0435 \u0435\u0441\u0442\u044c \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0438\u043b\u0438 \u043f\u0440\u0435\u0432\u044b\u0448\u0435\u043d\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 5 \u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 statusId \u0440\u0430\u0432\u0435\u043d 6, \u0438\u043c\u0435\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 API \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 compile_output \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u043b\u044e\u0431\u043e\u043c \u0434\u0440\u0443\u0433\u043e\u043c \u0441\u0442\u0430\u0442\u0443\u0441\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 stderr \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 atob(), \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u2014 \u044d\u0442\u043e \u0441\u0442\u0440\u043e\u043a\u0430 \u0432 base64. \u0422\u043e\u0442 \u0436\u0435 \u043c\u0435\u0442\u043e\u0434 \u043d\u0443\u0436\u0435\u043d, \u0447\u0442\u043e\u0431\u044b \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0451.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u043e\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0434\u0432\u043e\u0438\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 \u043d\u0430 JavaScript:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ae1\/daf\/1e5\/ae1daf1e58992942f892ea33ae419436.png\" width=\"892\" height=\"974\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ae1\/daf\/1e5\/ae1daf1e58992942f892ea33ae419436.png\"\/><figcaption><\/figcaption><\/figure>\n<h3>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0432\u043e\u0434\u0430 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0435\u0439<\/h3>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2b3\/07e\/f95\/2b307ef954a3f7f27f604ceca225221d.png\" width=\"900\" height=\"428\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2b3\/07e\/f95\/2b307ef954a3f7f27f604ceca225221d.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 OutputDetails \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u043c \u043a\u043e\u0434\u0430. \u0414\u0430\u043d\u043d\u044b\u0435 \u0443\u0436\u0435 \u0437\u0430\u0434\u0430\u043d\u044b \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f outputDetails:<\/p>\n<pre><code class=\"javascript\">import React from \"react\";  const OutputDetails = ({ outputDetails }) => {   return (     &lt;div className=\"metrics-container mt-4 flex flex-col space-y-3\">       &lt;p className=\"text-sm\">         Status:{\" \"}         &lt;span className=\"font-semibold px-2 py-1 rounded-md bg-gray-100\">           {outputDetails?.status?.description}         &lt;\/span>       &lt;\/p>       &lt;p className=\"text-sm\">         Memory:{\" \"}         &lt;span className=\"font-semibold px-2 py-1 rounded-md bg-gray-100\">           {outputDetails?.memory}         &lt;\/span>       &lt;\/p>       &lt;p className=\"text-sm\">         Time:{\" \"}         &lt;span className=\"font-semibold px-2 py-1 rounded-md bg-gray-100\">           {outputDetails?.time}         &lt;\/span>       &lt;\/p>     &lt;\/div>   ); };  export default OutputDetails;<\/code><\/pre>\n<p>time, memory \u0438 status.description \u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u0438\u0437 \u043e\u0442\u0432\u0435\u0442\u0430 \u043e\u0442 API, \u0430 \u0437\u0430\u0442\u0435\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0432 outputDetails \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f.<\/p>\n<h3>\u0421\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b<\/h3>\n<p>\u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u2014 ctrl+enter \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438. \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0442\u044c \u0432 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b, \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0445\u0443\u043a, \u043a\u0440\u0443\u0442\u043e\u0439 \u0438 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0447\u0438\u0449\u0435:<\/p>\n<pre><code class=\"javascript\">\/\/ useKeyPress.js  import React, { useState } from \"react\";  const useKeyPress = function (targetKey) {   const [keyPressed, setKeyPressed] = useState(false);    function downHandler({ key }) {     if (key === targetKey) {       setKeyPressed(true);     }   }    const upHandler = ({ key }) => {     if (key === targetKey) {       setKeyPressed(false);     }   };    React.useEffect(() => {     document.addEventListener(\"keydown\", downHandler);     document.addEventListener(\"keyup\", upHandler);      return () => {       document.removeEventListener(\"keydown\", downHandler);       document.removeEventListener(\"keyup\", upHandler);     };   });    return keyPressed; };  export default useKeyPress;<\/code><\/pre>\n<pre><code class=\"javascript\">\/\/ Landing.js  ... ... ... const Landing = () => {     ...     ...       const enterPress = useKeyPress(\"Enter\");       const ctrlPress = useKeyPress(\"Control\");    ...    ... }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \u043d\u0443\u0436\u043d\u044b \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0442\u0435\u043b\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 JavaScript. \u0421\u043e\u0431\u044b\u0442\u0438\u044f keydown \u0438 keyup \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0445\u0443\u043a\u0430. \u0425\u0443\u043a \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u043a\u043b\u0430\u0432\u0438\u0448\u0435\u0439 Enter \u0438 Control. \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f targetKey === key \u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f keyPressed, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0435 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 keyPressed \u2014 true \u0438\u043b\u0438 false.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0430\u0442\u044c \u044d\u0442\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 \u0445\u0443\u043a\u0435 useEffect \u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043e\u0431\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \u043d\u0430\u0436\u0430\u0442\u044b \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e:<\/p>\n<pre><code class=\"javascript\">useEffect(() => {     if (enterPress &amp;&amp; ctrlPress) {       console.log(\"enterPress\", enterPress);       console.log(\"ctrlPress\", ctrlPress);       handleCompile();     }   }, [ctrlPress, enterPress]);<\/code><\/pre>\n<p>\u041c\u0435\u0442\u043e\u0434 handleCompile() \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 Ctrl \u0438 Enter \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043b\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e.<\/p>\n<h3>\u0427\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c<\/h3>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u044b\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043d\u043e \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u043b\u0430\u043d Judge0 \u043e.\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043e\u0442\u043d\u0435\u0439 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432 \u0434\u0435\u043d\u044c. \u0427\u0442\u043e\u0431\u044b \u043e\u0431\u043e\u0439\u0442\u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043d\u044f\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\/\u0434\u0440\u043e\u043f\u043b\u0435\u0442 (\u043d\u0430 Digital Ocean) \u0438 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u043d\u0430 \u0441\u0432\u043e\u0451\u043c \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0435, \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u0430\u044f.<\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f:<\/p>\n<ul>\n<li>\n<p>\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430, \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 40 \u044f\u0437\u044b\u043a\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044c \u0442\u0435\u043c;<\/p>\n<\/li>\n<li>\n<p>API \u2014 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c\u044b\u0435 \u043d\u0430 RapidAPI;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0447\u0435\u0440\u0435\u0437 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0445\u0443\u043a\u0438 React;<\/p>\n<\/li>\n<li>\n<p>\u0438 \u043c\u043d\u043e\u0433\u043e \u0432\u0441\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e!<\/p>\n<\/li>\n<\/ul>\n<p>\u0425\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u043f\u043b\u043e\u0442\u043d\u0435\u0435? \u041f\u043e\u0434\u0443\u043c\u0430\u0439\u0442\u0435 \u043d\u0430\u0434 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0442\u0430\u043a\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430:<\/p>\n<ul>\n<li>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u2014 \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0432 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0447\u0435\u0440\u0435\u0437 \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0444\u0438\u043b\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430 \u0432\u0434\u0432\u043e\u0451\u043c \u043d\u0430\u0434 \u043e\u0434\u043d\u0438\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u043c \u043a\u043e\u0434\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u043a\u0435\u0442\u043e\u0432 \u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0439.<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u043a\u043b\u0430\u0434\u043a\u0438 \u0434\u043b\u044f \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0434\u0430\u0448\u0431\u043e\u0440\u0434 \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c, \u043a\u0430\u043a CodePen.<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043d\u0443\u043b\u044f. TailwindCSS \u2014 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0439 \u0444\u0430\u0432\u043e\u0440\u0438\u0442 \u0438 \u043b\u044e\u0431\u0438\u043c\u044b\u0439 \u0440\u0435\u0441\u0443\u0440\u0441 \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0415\u0441\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u044f \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439, \u043e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0437\u0432\u0435\u0437\u0434\u0443 \u0432 <a href=\"https:\/\/github.com\/manuarora700\/react-code-editor\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 GitHub<\/a>. \u0415\u0441\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b? \u0421\u0432\u044f\u0436\u0438\u0442\u0435\u0441\u044c \u0441\u043e \u043c\u043d\u043e\u0439 \u0432 <a href=\"https:\/\/twitter.com\/mannupaaji\">Twitter<\/a> \u0438\/\u0438\u043b\u0438 \u043d\u0430 <a href=\"https:\/\/manuarora.in\/\">\u0441\u0430\u0439\u0442\u0435<\/a>, \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u043f\u043e\u043c\u043e\u0447\u044c.<\/p>\n<p>\u0410 \u043c\u044b \u043f\u043e\u043c\u043e\u0436\u0435\u043c \u0432\u0430\u043c \u043f\u0440\u043e\u043a\u0430\u0447\u0430\u0442\u044c \u043d\u0430\u0432\u044b\u043a\u0438 \u0438\u043b\u0438 \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0441\u0432\u043e\u0438\u0442\u044c \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044e, \u0432\u043e\u0441\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0432 \u043b\u044e\u0431\u043e\u0435 \u0432\u0440\u0435\u043c\u044f:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/frontend-razrabotchik?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_fr_100622&amp;utm_term=conc\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/python-fullstack-web-developer?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_fpw_100622&amp;utm_term=conc\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Fullstack-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 Python<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u044b\u0431\u0440\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0443\u044e <a href=\"https:\/\/skillfactory.ru\/concalogue?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=sf_allcourses_100622&amp;utm_term=conc\">\u0432\u043e\u0441\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044e<\/a>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/47e\/6f2\/48e\/47e6f248e95c31cc4f8e9acd8a3c7070.png\" width=\"1000\" height=\"200\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/47e\/6f2\/48e\/47e6f248e95c31cc4f8e9acd8a3c7070.png\"\/><figcaption><\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \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\/company\/skillfactory\/blog\/670380\/\"> https:\/\/habr.com\/ru\/company\/skillfactory\/blog\/670380\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u043d\u043b\u0430\u0439\u043d-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043a\u043e\u0434\u0430 \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c \u043d\u0430 40 \u044f\u0437\u044b\u043a\u0430\u0445 \u0434\u0435\u043b\u0438\u043c\u0441\u044f \u043a \u0441\u0442\u0430\u0440\u0442\u0443 <a href=\"https:\/\/skillfactory.ru\/frontend-razrabotchik?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_fr_100622&amp;utm_term=lead\"><u>\u043a\u0443\u0440\u0441\u0430 \u043f\u043e Frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435<\/u><\/a>. \u0410\u0432\u0442\u043e\u0440 \u044d\u0442\u043e\u0433\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430 \u2014 \u043e\u0441\u043d\u043e\u0432\u0430\u0442\u0435\u043b\u044c TailwindMasterKit.<\/p>\n<hr\/>\n<p>\u041e\u043d\u043b\u0430\u0439\u043d-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0438 \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043a\u043e\u0434 \u043d\u0430 \u043b\u044e\u0431\u0438\u043c\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0412 \u0438\u0434\u0435\u0430\u043b\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432\u044b\u0432\u043e\u0434 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u0432\u043e\u0438\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 \u043d\u0430 JavaScript.<\/p>\n<h3>\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438<\/h3>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/manuarora700\/react-code-editor\">\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/coderush.vercel.app\/\">\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0434\u0435\u043c\u043e\u0432\u0435\u0440\u0441\u0438\u044f<\/a>.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430 <a href=\"https:\/\/www.npmjs.com\/package\/monaco-editor\">Monaco Editor<\/a>. \u0412\u043e\u0442 \u0435\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438:<\/p>\n<ul>\n<li>\n<p>\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 VS Code;<\/p>\n<\/li>\n<li>\n<p>\u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044f \u0432 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0441\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u0432\u0432\u043e\u0434\u043e\u043c \u0438 \u0432\u044b\u0432\u043e\u0434\u043e\u043c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c 40 \u044f\u0437\u044b\u043a\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u0432\u044b\u0431\u043e\u0440 \u0442\u0435\u043c\u044b \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0442\u0435\u043c;<\/p>\n<\/li>\n<li>\n<p>\u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043a\u043e\u0434\u0435 (\u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0430\u044f \u043f\u0430\u043c\u044f\u0442\u044c, \u0441\u0442\u0430\u0442\u0443\u0441 \u0438 \u0442. \u0434.).<\/p>\n<\/li>\n<\/ul>\n<h3>\u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0442\u0435\u043a<\/h3>\n<ul>\n<li>\n<p><a href=\"https:\/\/reactjs.org\/\">React.js<\/a> \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/tailwindcss.com\/\">TailwindCSS<\/a> \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0435\u0439;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/judge0.com\/\">Judge0<\/a> \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/rapidapi.com\/\">RapidAPI<\/a> \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0440\u0430\u0437\u0432\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 Judge0;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/monaco-editor\">Monaco Editor<\/a> \u2014 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u0440\u043e\u0441\u0442\u0430:<\/p>\n<ul>\n<li>\n<p>\u0441omponents: \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \/ \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u044b \u043a\u043e\u0434\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, CodeEditorWindow \u0438 Landing);<\/p>\n<\/li>\n<li>\n<p>hooks: \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0445\u0443\u043a\u0438 (\u0438 \u0445\u0443\u043a\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448 \u2014 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b);<\/p>\n<\/li>\n<li>\n<p>lib: \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 (\u0437\u0434\u0435\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0442\u0435\u043c\u044b);<\/p>\n<\/li>\n<li>\n<p>constants: \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a languageOptions \u0438 customStyles, \u0434\u043b\u044f \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0445 \u0441\u043f\u0438\u0441\u043a\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>utils: \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041b\u043e\u0433\u0438\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c<\/h3>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u043a\u043e\u0434\u0443, \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c\u0441\u044f \u0432 \u043b\u043e\u0433\u0438\u043a\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0438 \u0432 \u0442\u043e\u043c, \u043a\u0430\u043a \u043f\u0438\u0441\u0430\u0442\u044c \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043a\u043e\u0434 \u0441 \u043d\u0443\u043b\u044f.<\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u044f\u0437\u044b\u043a (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u2014 JavaScript).<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0435\u0433\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442, \u0430 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u0432 \u043e\u043a\u043d\u0435 \u0432\u044b\u0432\u043e\u0434\u0430.<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043e\u043a\u043d\u0435 \u0432\u044b\u0432\u043e\u0434\u0430 \u043a\u043e\u0434\u0430 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0432\u044b\u0432\u043e\u0434 \u0438 \u0441\u0442\u0430\u0442\u0443\u0441 \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u043c \u043a\u043e\u0434\u0430 \u0441\u0432\u043e\u0438 \u0432\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 judge (\u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0435).<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u043c \u043a\u043e\u0434\u0435 (\u043f\u0440\u0438\u043c\u0435\u0440: \u043d\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0443\u0448\u043b\u043e 5 \u043c\u0441, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e 2024 \u041a\u0431 \u043f\u0430\u043c\u044f\u0442\u0438, \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u043e).<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0432\u0448\u0438\u0441\u044c \u0441\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u043a\u043e\u0434\u0443 \u0438 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c\u0441\u044f, \u043a\u0430\u043a \u0442\u0443\u0442 \u0432\u0441\u0451 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u043d\u043e.<\/p>\n<h3>\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u043e\u0434\u0430<\/h3>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u043e\u0434\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 Monaco Editor, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u043e\u0433\u043e NPM-\u043f\u0430\u043a\u0435\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">\/\/ CodeEditorWindow.js  import React, { useState } from \"react\";  import Editor from \"@monaco-editor\/react\";  const CodeEditorWindow = ({ onChange, language, code, theme }) => {   const [value, setValue] = useState(code || \"\");    const handleEditorChange = (value) => {     setValue(value);     onChange(\"code\", value);   };    return (     &lt;div className=\"overlay rounded-md overflow-hidden w-full h-full shadow-4xl\">       &lt;Editor         height=\"85vh\"         width={`100%`}         language={language || \"javascript\"}         value={value}         theme={theme}         defaultValue=\"\/\/ some comment\"         onChange={handleEditorChange}       \/>     &lt;\/div>   ); }; export default CodeEditorWindow;<\/code><\/pre>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Editor \u0431\u0435\u0440\u0443\u0442\u0441\u044f \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 @monaco-editor\/react, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430 \u0441 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0432\u044b\u0441\u043e\u0442\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 85vh.<\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Editor \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432:<\/p>\n<ul>\n<li>\n<p>language: \u044f\u0437\u044b\u043a, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u044b \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0438 \u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0432\u0432\u043e\u0434\u0430.<\/p>\n<\/li>\n<li>\n<p>theme: \u0446\u0432\u0435\u0442\u0430 \u0438 \u0444\u043e\u043d \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 \u043a\u043e\u0434\u0430 (\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u043f\u043e\u0437\u0436\u0435).<\/p>\n<\/li>\n<li>\n<p>value: \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440.<\/p>\n<\/li>\n<li>\n<p>onChange: \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 value \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435. \u0418\u0437\u043c\u0435\u043d\u0438\u0432\u0448\u0435\u0435\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0437\u0436\u0435 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0432\u044b\u0437\u0432\u0430\u0442\u044c API Judge0.<\/p>\n<\/li>\n<\/ul>\n<p>\u0420\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 onChange, language, code \u0438 theme \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Landing.js. \u041a\u043e\u0433\u0434\u0430 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e value, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a onChange \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 Landing.<\/p>\n<h3>\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Landing<\/h3>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 landing \u0432 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0442\u0440\u0451\u0445 \u0447\u0430\u0441\u0442\u0435\u0439:<\/p>\n<ul>\n<li>\n<p>Actions Bar \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0445 \u0441\u043f\u0438\u0441\u043a\u043e\u0432 Languages \u0438 Themes.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Code Editor Window.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Output \u0438 Custom Input.<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"javascript\">\/\/ Landing.js  import React, { useEffect, useState } from \"react\"; import CodeEditorWindow from \".\/CodeEditorWindow\"; import axios from \"axios\"; import { classnames } from \"..\/utils\/general\"; import { languageOptions } from \"..\/constants\/languageOptions\";  import { ToastContainer, toast } from \"react-toastify\"; import \"react-toastify\/dist\/ReactToastify.css\";  import { defineTheme } from \"..\/lib\/defineTheme\"; import useKeyPress from \"..\/hooks\/useKeyPress\"; import Footer from \".\/Footer\"; import OutputWindow from \".\/OutputWindow\"; import CustomInput from \".\/CustomInput\"; import OutputDetails from \".\/OutputDetails\"; import ThemeDropdown from \".\/ThemeDropdown\"; import LanguagesDropdown from \".\/LanguagesDropdown\";  const javascriptDefault = `\/\/ some comment`;  const Landing = () => {   const [code, setCode] = useState(javascriptDefault);   const [customInput, setCustomInput] = useState(\"\");   const [outputDetails, setOutputDetails] = useState(null);   const [processing, setProcessing] = useState(null);   const [theme, setTheme] = useState(\"cobalt\");   const [language, setLanguage] = useState(languageOptions[0]);    const enterPress = useKeyPress(\"Enter\");   const ctrlPress = useKeyPress(\"Control\");    const onSelectChange = (sl) => {     console.log(\"selected Option...\", sl);     setLanguage(sl);   };    useEffect(() => {     if (enterPress &amp;&amp; ctrlPress) {       console.log(\"enterPress\", enterPress);       console.log(\"ctrlPress\", ctrlPress);       handleCompile();     }   }, [ctrlPress, enterPress]);   const onChange = (action, data) => {     switch (action) {       case \"code\": {         setCode(data);         break;       }       default: {         console.warn(\"case not handled!\", action, data);       }     }   };   const handleCompile = () => {     \/\/ We will come to the implementation later in the code   };    const checkStatus = async (token) => {     \/\/ We will come to the implementation later in the code   };    function handleThemeChange(th) {     \/\/ We will come to the implementation later in the code   }   useEffect(() => {     defineTheme(\"oceanic-next\").then((_) =>       setTheme({ value: \"oceanic-next\", label: \"Oceanic Next\" })     );   }, []);    const showSuccessToast = (msg) => {     toast.success(msg || `Compiled Successfully!`, {       position: \"top-right\",       autoClose: 1000,       hideProgressBar: false,       closeOnClick: true,       pauseOnHover: true,       draggable: true,       progress: undefined,     });   };   const showErrorToast = (msg) => {     toast.error(msg || `Something went wrong! Please try again.`, {       position: \"top-right\",       autoClose: 1000,       hideProgressBar: false,       closeOnClick: true,       pauseOnHover: true,       draggable: true,       progress: undefined,     });   };    return (     &lt;>       &lt;ToastContainer         position=\"top-right\"         autoClose={2000}         hideProgressBar={false}         newestOnTop={false}         closeOnClick         rtl={false}         pauseOnFocusLoss         draggable         pauseOnHover       \/>       &lt;div className=\"h-4 w-full bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500\">&lt;\/div>       &lt;div className=\"flex flex-row\">         &lt;div className=\"px-4 py-2\">           &lt;LanguagesDropdown onSelectChange={onSelectChange} \/>         &lt;\/div>         &lt;div className=\"px-4 py-2\">           &lt;ThemeDropdown handleThemeChange={handleThemeChange} theme={theme} \/>         &lt;\/div>       &lt;\/div>       &lt;div className=\"flex flex-row space-x-4 items-start px-4 py-4\">         &lt;div className=\"flex flex-col w-full h-full justify-start items-end\">           &lt;CodeEditorWindow             code={code}             onChange={onChange}             language={language?.value}             theme={theme.value}           \/>         &lt;\/div>          &lt;div className=\"right-container flex flex-shrink-0 w-[30%] flex-col\">           &lt;OutputWindow outputDetails={outputDetails} \/>           &lt;div className=\"flex flex-col items-end\">             &lt;CustomInput               customInput={customInput}               setCustomInput={setCustomInput}             \/>             &lt;button               onClick={handleCompile}               disabled={!code}               className={classnames(                 \"mt-4 border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] px-4 py-2 hover:shadow transition duration-200 bg-white flex-shrink-0\",                 !code ? \"opacity-50\" : \"\"               )}             >               {processing ? \"Processing...\" : \"Compile and Execute\"}             &lt;\/button>           &lt;\/div>           {outputDetails &amp;&amp; &lt;OutputDetails outputDetails={outputDetails} \/>}         &lt;\/div>       &lt;\/div>       &lt;Footer \/>     &lt;\/>   ); }; export default Landing;<\/code><\/pre>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 Landing \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435.<\/p>\n<h3>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 CodeEditorWindow<\/h3>\n<p>\u041a\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u0432\u0438\u0434\u0435\u043b\u0438, \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 CodeEditorWindow \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u043a\u043e\u0434 \u0438 \u043c\u0435\u0442\u043e\u0434 onChange, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u0434:.<\/p>\n<pre><code class=\"javascript\">\/\/ onChange method implementation   const onChange = (action, data) => {     switch (action) {       case \"code\": {         setCode(data);         break;       }       default: {         console.warn(\"case not handled!\", action, data);       }     }   };<\/code><\/pre>\n<p>\u0417\u0430\u0434\u0430\u0451\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 code \u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 CodeEditorWindow \u0442\u0430\u043a\u0436\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e language \u2014 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u044f\u0437\u044b\u043a, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u044b \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0438 \u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0432\u0432\u043e\u0434\u0430.<\/p>\n<p>\u041c\u0430\u0441\u0441\u0438\u0432 languageOptions \u044f \u0441\u043e\u0437\u0434\u0430\u043b \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043d\u044f\u0442\u044b\u0445 \u0432 Monaco Editor \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u044f\u0437\u044b\u043a\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0435\u0439 (\u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c languageId, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c\u044b\u0439 \u0432 \u044d\u0442\u0438\u0445 API judge0):<\/p>\n<pre><code class=\"javascript\">\/\/ constants\/languageOptions.js  export const languageOptions = [   {     id: 63,     name: \"JavaScript (Node.js 12.14.0)\",     label: \"JavaScript (Node.js 12.14.0)\",     value: \"javascript\",   },   {     id: 45,     name: \"Assembly (NASM 2.14.02)\",     label: \"Assembly (NASM 2.14.02)\",     value: \"assembly\",   },     ...     ...     ...     ...     ...     ...        {     id: 84,     name: \"Visual Basic.Net (vbnc 0.0.0.5943)\",     label: \"Visual Basic.Net (vbnc 0.0.0.5943)\",     value: \"vbnet\",   }, ];<\/code><\/pre>\n<p>\u0412<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-334337","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/334337","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=334337"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/334337\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=334337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=334337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=334337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}