{"id":354969,"date":"2024-05-20T22:59:00","date_gmt":"2024-05-20T22:59:00","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=354969"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=354969","title":{"rendered":"<span>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430 JSON \u0432 Typescript \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React, NodeJS \u0438 ChatGPT<\/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\/w780q1\/getpro\/habr\/upload_files\/535\/e7d\/6f9\/535e7d6f93f4d703a06ccc39e20b6006.jpg\" width=\"1200\" height=\"600\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/535\/e7d\/6f9\/535e7d6f93f4d703a06ccc39e20b6006.jpg\" data-blurred=\"true\"\/><\/figure>\n<p>\u041b\u044e\u0431\u043e\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442, \u0447\u0430\u0441\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u0441 API, \u043c\u043e\u0436\u0435\u0442 \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u043c\u0430\u0441\u0441\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 ChatGPT \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f JSON \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b Typescript.\u00a0<\/p>\n<h3>\u0417\u0430\u0447\u0435\u043c \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e<\/h3>\n<p>API \u2014 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0430\u043b\u0430\u0434\u0438\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0441\u0430\u0439\u0442\u043e\u043c \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043a\u043e\u0434\u0430 \u043e\u0431\u044b\u0447\u043d\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d \u043e\u0431 \u043e\u0442\u0432\u0435\u0442\u0435. \u041d\u043e \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a API \u0432\u044b \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0423 \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0440\u0435\u0448\u0435\u043d\u0438\u044f:<\/p>\n<ol>\n<li>\n<p>\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441, \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u0445.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0439\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430 (\u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0435\u0441\u0442\u044c) \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u0445.<\/p>\n<\/li>\n<\/ol>\n<p>\u041d\u043e \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSON \u0438 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0432 Typescript.<\/p>\n<p>\u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f <a href=\"https:\/\/www.npmjs.com\/package\/json-to-ts\"><u>JSON \u0432 Typescript<\/u><\/a>, \u043d\u043e \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 ChatGPT, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0430\u043a \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435. \u042f \u0441\u043e\u0437\u0434\u0430\u043b <a href=\"https:\/\/github.com\/novuhq\/json-to-typescript-chatgpt\"><u>\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/u><\/a> \u0441 \u043f\u043e\u043b\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f JSON \u0432 Typescript \u2014 \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e.<\/p>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 ChatGPT<\/h3>\n<p>ChatGPT \u2014 \u044d\u0442\u043e \u044f\u0437\u044b\u043a\u043e\u0432\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442\u0430, \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u0430\u044f OpenAI \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438 \u0432 \u0440\u0430\u0437\u0433\u043e\u0432\u043e\u0440\u043d\u043e\u0439 \u043c\u0430\u043d\u0435\u0440\u0435, \u043f\u043e\u0445\u043e\u0436\u0435\u0439 \u043d\u0430 \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u0443\u044e. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043a\u0440\u0430\u0442\u043a\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0438\u043b\u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044b\u0435 \u043e\u0442\u0432\u0435\u0442\u044b \u043f\u043e \u0448\u0438\u0440\u043e\u043a\u043e\u043c\u0443 \u043a\u0440\u0443\u0433\u0443 \u0442\u0435\u043c \u0432\u0441\u0435\u0433\u043e \u0437\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<p>ChatGPT \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c, \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u0438 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0442\u044c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0434\u0430. \u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0441\u0435\u0440\u0432\u0438\u0441 ChatGPT \u043e\u0442\u043a\u0440\u044b\u0442 \u0434\u043b\u044f \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u044d\u0442\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e API \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430 JSON \u0432 Typescript.<\/p>\n<h4>\u0412\u043e \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e \u043e\u0431\u043e\u0439\u0434\u0435\u0442\u0441\u044f<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0431\u0440\u0430\u0442\u044c \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0434\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043a API \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e Chat GPT (gpt-3.5-turbo), \u0442\u043e, \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e <a href=\"https:\/\/techcrunch.com\/2023\/03\/01\/openai-launches-an-api-for-chatgpt-plus-dedicated-capacity-for-enterprise-customers\/\"><u>\u0434\u0430\u043d\u043d\u044b\u043c TechCrunch<\/u><\/a>, \u043e\u043d\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442 0.002 \u0434\u043e\u043b\u043b\u0430\u0440\u0430 \u0437\u0430 1 000 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0438\u043b\u0438 750 \u0441\u043b\u043e\u0432. \u041c\u0435\u0441\u044f\u0447\u043d\u0430\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 ChatGPT Plus, \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0430\u044f \u00ab\u0431\u0435\u0437\u043b\u0438\u043c\u0438\u0442\u00bb \u043e\u0431\u043e\u0439\u0434\u0435\u0442\u0441\u044f \u0443\u0436\u0435 \u0432 20 \u0434\u043e\u043b\u043b\u0430\u0440\u043e\u0432.<\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0432\u0430\u043c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0440\u0435\u0434\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0434\u043b\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c React.js \u0434\u043b\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 Node.js \u0434\u043b\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043f\u0430\u043f\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0434\u043b\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0432 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">mkdir json-to-typescript cd json-to-typescript mkdir client server<\/code><\/pre>\n<h4>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 Node.js<\/h4>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b \u00abpackage.json\u00bb.<\/p>\n<pre><code class=\"javascript\">cd server &amp; npm init -y<\/code><\/pre>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 Express, Nodemon \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 CORS:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/expressjs.com\/\"><u>ExpressJS<\/u><\/a> \u2014 \u0431\u044b\u0441\u0442\u0440\u0430\u044f \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 Node.js.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/cors\"><u>CORS<\/u><\/a> \u2014 \u044d\u0442\u043e \u043f\u0430\u043a\u0435\u0442 Node.js, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0441\u0432\u044f\u0437\u044c \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0434\u043e\u043c\u0435\u043d\u0430\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/nodemon\"><u>Nodemon<\/u><\/a> \u2014 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 Node.js, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0444\u0430\u0439\u043b\u043e\u0432.  <\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"javascript\">npm install express cors nodemon<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b \u00abindex.js\u00bb \u2014 \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430 \u043d\u0430 \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440.  <\/p>\n<pre><code class=\"javascript\">touch index.js<\/code><\/pre>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u0442\u0435 \u0441\u0435\u0440\u0432\u0435\u0440 Node.js \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Express.js. \u041f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043a\u043e\u0434\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 JSON \u043f\u0440\u0438 \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u0438 \u00abhttp:\/\/localhost:4000\/api\u00bb \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<pre><code class=\"javascript\">\/\/??index.js const express = require(\"express\"); const cors = require(\"cors\"); const app = express(); const PORT = 4000;  app.use(express.urlencoded({ extended: true })); app.use(express.json()); app.use(cors());  app.get(\"\/api\", (req, res) => {     res.json({         message: \"Hello world\",     }); });  app.listen(PORT, () => {     console.log(`Server listening on ${PORT}`); });<\/code><\/pre>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u0442\u0435 Nodemon, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 start \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0432 \u0444\u0430\u0439\u043b\u0435 \u00abpackage.json\u00bb. \u041f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043a\u043e\u0434\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Nodemon.<\/p>\n<pre><code class=\"javascript\">\/\/In server\/package.json  \"scripts\": {     \"test\": \"echo \\\"Error: no test specified\\\" &amp;&amp; exit 1\",     \"start\": \"nodemon index.js\"   },<\/code><\/pre>\n<p>\u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u0435\u043c! \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u043d\u0438\u0436\u0435.  <\/p>\n<pre><code class=\"javascript\">npm start<\/code><\/pre>\n<h4>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f React<\/h4>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043a\u043b\u0438\u0435\u043d\u0442 \u0447\u0435\u0440\u0435\u0437 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u0438 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 React.js.<\/p>\n<pre><code class=\"javascript\">cd client npx create-react-app .\/<\/code><\/pre>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 2 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:\u00a0<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/suren-atoyan\/monaco-react\"><u>Monaco Editor for React<\/u><\/a> \u2014 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0430\u043a\u0435\u0442 \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u0432 \u043a\u043e\u0434\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f React.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/react-copy-to-clipboard\"><u>React Copy to Clipboard<\/u><\/a> \u2014 \u043f\u0430\u043a\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043e\u0434\u043d\u0438\u043c \u043d\u0430\u0436\u0430\u0442\u0438\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"javascript\">npm install @monaco-editor\/react react-copy-to-clipboard<\/code><\/pre>\n<p>\u0423\u0434\u0430\u043b\u0438\u0442\u0435 \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0438 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0435 \u0444\u0430\u0439\u043b\u044b) \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f React \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0444\u0430\u0439\u043b \u00abApp.js\u00bb, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b \u00abHello World\u00bb, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435.  <\/p>\n<pre><code>function App() {     return (         &lt;div>             &lt;p>Hello World!&lt;\/p>         &lt;\/div>     ); } export default App;<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u0444\u0430\u0439\u043b \u00absrc\/index.css\u00bb \u0438 \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435 \u043a\u043e\u0434. \u041e\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0435\u0441\u044c \u043a\u043e\u0434 CSS, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435.  <\/p>\n<pre><code class=\"javascript\">@import url(\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;display=swap\");  * {     box-sizing: border-box;     margin: 0;     padding: 0;     font-family: \"Space Grotesk\", sans-serif; } .app {     width: 100%;     min-height: 100vh; } .loading {     display: flex;     align-items: center;     justify-content: center;     width: 100%;     height: 100vh; } .header__container {     width: 100%;     display: flex;     align-items: center;     height: 10vh;     background-color: #e0f2fe; } .header__right {     display: flex;     align-items: center; } .runBtn {     padding: 10px 5px;     width: 100px;     margin-right: 10px;     cursor: pointer;     border: none;     border-radius: 3px;     box-shadow: 0 0 1px 1px #e0e0ea;     background-color: #065f46;     outline: none;     color: #fff; } .header {     border: 1px solid #ddd;     padding: 10px 20px;     border: 1px solid #e8e2e2;     display: flex;     align-items: center;     justify-content: space-between;     flex: 0.5;     height: 100%; } .code__container {     display: flex;     height: 95vh;     width: 100%;     align-items: flex-start; } .minimap {     display: none; } .editor {     padding: 10px 0px;     width: 100%; } .code, .output {     width: 50vw; } .deleteIcon {     height: 25px;     color: #cf0a0a;     cursor: pointer; } .copyIcon {     height: 25px;     color: #3e54ac;     cursor: pointer; }<\/code><\/pre>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430 JSON \u0432 Typescript, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u044b JSON \u0432 \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432 Typescript \u0432 \u043f\u0440\u0430\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430, \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0f4\/808\/268\/0f4808268efce0e8609b6970e8848730.png\" width=\"800\" height=\"334\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0f4\/808\/268\/0f4808268efce0e8609b6970e8848730.png\"\/><\/figure>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043f\u0430\u043f\u043a\u0443 \u0438\u043a\u043e\u043d\u043e\u043a \u00abicons\u00bb \u0432 \u043f\u0430\u043f\u043a\u0435 \u00abclient\/src\u00bb. \u041f\u0430\u043f\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0438 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0432\u044b\u0448\u0435.  <\/p>\n<pre><code class=\"javascript\">cd client\/src mkdir icons cd icons touch Copy.js Delete.js<\/code><\/pre>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0444\u0430\u0439\u043b \u00abCopy.js\u00bb, \u0447\u0442\u043e\u0431\u044b \u0432 \u043d\u0435\u043c \u043d\u0430\u0447\u0430\u043b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0437\u043d\u0430\u0447\u043e\u043a SVG \u0438\u0437 <a href=\"https:\/\/heroicons.com\/\"><u>Heroicons<\/u><\/a>.  <\/p>\n<pre><code class=\"javascript\">import React from \"react\";  const Copy = () => {     return (         &lt;svg             xmlns='http:\/\/www.w3.org\/2000\/svg'             viewBox='0 0 24 24'             fill='currentColor'             className='w-6 h-6 copyIcon'         >             &lt;path d='M7.5 3.375c0-1.036.84-1.875 1.875-1.875h.375a3.75 3.75 0 013.75 3.75v1.875C13.5 8.161 14.34 9 15.375 9h1.875A3.75 3.75 0 0121 12.75v3.375C21 17.16 20.16 18 19.125 18h-9.75A1.875 1.875 0 017.5 16.125V3.375z' \/>             &lt;path d='M15 5.25a5.23 5.23 0 00-1.279-3.434 9.768 9.768 0 016.963 6.963A5.23 5.23 0 0017.25 7.5h-1.875A.375.375 0 0115 7.125V5.25zM4.875 6H6v10.125A3.375 3.375 0 009.375 19.5H16.5v1.125c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 013 20.625V7.875C3 6.839 3.84 6 4.875 6z' \/>         &lt;\/svg>     ); };  export default Copy;<\/code><\/pre>\n<p>\u0421\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435 \u043a\u043e\u0434 \u0432 \u0444\u0430\u0439\u043b \u00abDelete.js\u00bb. \u041e\u043d \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 SVG-\u0438\u043a\u043e\u043d\u043a\u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f.  <\/p>\n<pre><code class=\"javascript\">import React from \"react\";  const Delete = () => {     return (         &lt;svg             xmlns='http:\/\/www.w3.org\/2000\/svg'             viewBox='0 0 24 24'             fill='currentColor'             className='w-6 h-6 deleteIcon'         >             &lt;path                 fillRule='evenodd'                 d='M16.5 4.478v.227a48.816 48.816 0 013.878.512.75.75 0 11-.256 1.478l-.209-.035-1.005 13.07a3 3 0 01-2.991 2.77H8.084a3 3 0 01-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 01-.256-1.478A48.567 48.567 0 017.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 013.369 0c1.603.051 2.815 1.387 2.815 2.951zm-6.136-1.452a51.196 51.196 0 013.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 00-6 0v-.113c0-.794.609-1.428 1.364-1.452zm-.355 5.945a.75.75 0 10-1.5.058l.347 9a.75.75 0 101.499-.058l-.346-9zm5.48.058a.75.75 0 10-1.498-.058l-.347 9a.75.75 0 001.5.058l.345-9z'                 clipRule='evenodd'             \/>         &lt;\/svg>     ); };  export default Delete;<\/code><\/pre>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0444\u0430\u0439\u043b \u00abApp.js\u00bb, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.  <\/p>\n<pre><code>import React from \"react\"; import Delete from \".\/icons\/Delete\"; import Copy from \".\/icons\/Copy\";  const App = () => {     const handleSubmit = () => {         console.log(\"Run Button Clicked\");     };      return (         &lt;main className='app'>             &lt;header className='header__container'>                 &lt;div className='header'>                     &lt;h3>JSON&lt;\/h3>                     &lt;div className='header__right'>                         &lt;button className='runBtn' onClick={handleSubmit}>                             RUN                         &lt;\/button>                         &lt;Delete \/>                     &lt;\/div>                 &lt;\/div>                  &lt;div className='header'>                     &lt;h3>Typescript&lt;\/h3>                     &lt;Copy \/>                 &lt;\/div>             &lt;\/header>              &lt;div className='code__container'>&lt;\/div>         &lt;\/main>     ); };  export default App;<\/code><\/pre>\n<h3>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u043e\u0434\u0430 Monaco \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 React<\/h3>\n<p>Monaco \u2014 \u044d\u0442\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 VS Code. \u0414\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u044d\u0442\u043e\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u0430\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f.<\/p>\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0443\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0432 \u0444\u0430\u0439\u043b \u00abApp.js\u00bb, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435.<\/p>\n<pre><code class=\"javascript\">import React, { useState } from \"react\"; import Delete from \".\/icons\/Delete\"; import Copy from \".\/icons\/Copy\"; import Editor from \"@monaco-editor\/react\";  const App = () => {     const [value, setValue] = useState(\"\");     const [output, setOutput] = useState(\"\");     const handleSubmit = () => {         console.log(\"Run Button Clicked\");     };      return (         &lt;main className='app'>             &lt;header className='header__container'>                 &lt;div className='header'>                     &lt;h3>JSON&lt;\/h3>                     &lt;div className='header__right'>                         &lt;button className='runBtn' onClick={handleSubmit}>                             RUN                         &lt;\/button>                         &lt;Delete \/>                     &lt;\/div>                 &lt;\/div>                  &lt;div>                     &lt;h3>Typescript&lt;\/h3>                     &lt;Copy \/>                 &lt;\/div>             &lt;\/header>              &lt;div className='code__container'>                 &lt;div className='code'>                     &lt;Editor                         height='90vh'                         className='editor'                         defaultLanguage='json'                         defaultValue='{ }'                         value={value}                         onChange={(value) => setValue(value)}                     \/>                 &lt;\/div>                 &lt;div className='output'>                     &lt;Editor                         height='90vh'                         className='editor'                         defaultLanguage='typescript'                         options={{                             domReadOnly: true,                             readOnly: true,                         }}                         defaultValue=''                         value={output}                         onChange={(value) => setOutput(value)}                     \/>                 &lt;\/div>             &lt;\/div>         &lt;\/main>     ); };  export default App;<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0432 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u0432\u044b\u0448\u0435 \u043a\u043e\u0434\u0435:<\/p>\n<ul>\n<li>\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u00abEditor\u00bb \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 Monaco Editor.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0442\u0430\u043a\u0438\u0435 \u0440\u0435\u043a\u0432\u0438\u0437\u0438\u0442\u044b, \u043a\u0430\u043a \u0432\u044b\u0441\u043e\u0442\u0430, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u044f\u0437\u044b\u043a \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u00abonChange\u00bb.<\/p>\n<\/li>\n<li>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0442\u0435 \u0436\u0435 \u0440\u0435\u043a\u0432\u0438\u0437\u0438\u0442\u044b, \u0447\u0442\u043e \u0438 \u043f\u0435\u0440\u0432\u044b\u0439, \u043d\u043e \u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0440\u0435\u043a\u0432\u0438\u0437\u0438\u0442\u043e\u043c, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u043c \u00aboptions\u00bb, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/158\/735\/cd1\/158735cd1bdad94a3ebfec3c53b3ae48.png\" width=\"800\" height=\"171\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/158\/735\/cd1\/158735cd1bdad94a3ebfec3c53b3ae48.png\"\/><\/figure>\n<h3>\u041a\u0430\u043a \u043e\u0431\u0449\u0430\u0442\u044c\u0441\u044f \u0441 ChatGPT \u0432 Node.js<\/h3>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0432\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 ChatGPT \u0447\u0435\u0440\u0435\u0437 \u0435\u0433\u043e API \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 Node.js. \u041c\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043c \u043a\u043e\u0434 JSON, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c, \u0432 API, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442 \u0432 Typescript. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435 \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u044b\u0439 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 Node.js \u00abOpenAI API\u00bb, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0432 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435 \u043a\u043e\u0434.<\/p>\n<pre><code class=\"javascript\">npm install openai<\/code><\/pre>\n<p>\u0412\u043e\u0439\u0434\u0438\u0442\u0435 \u0438\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0443\u0447\u0435\u0442\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c OpenAI <a href=\"https:\/\/platform.openai.com\/overview\"><u>\u0437\u0434\u0435\u0441\u044c<\/u><\/a>.<\/p>\n<p>\u041d\u0430\u0436\u043c\u0438\u0442\u0435 \u00ab\u041b\u0438\u0447\u043d\u044b\u0439\u00bb (Personal) \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0438 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u00ab\u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u043b\u044e\u0447\u0438 API\u00bb (View API keys) \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \u043c\u0435\u043d\u044e, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0441\u0435\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043a\u043b\u044e\u0447.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/43e\/e59\/742\/43ee5974268d840c123ceea126084cd6.png\" width=\"800\" height=\"336\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/43e\/e59\/742\/43ee5974268d840c123ceea126084cd6.png\"\/><\/figure>\n<p>\u0421\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u043a\u043b\u044e\u0447 API \u0432 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435 \u2014 \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0438\u043c \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0435 \u0432\u0440\u0435\u043c\u044f.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 API, \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435 \u043a\u043e\u0434 \u0432 \u0444\u0430\u0439\u043b \u00abindex.js\u00bb. \u0417\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0432 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u00abapiKey\u00bb \u0441\u0432\u043e\u0438\u043c \u043a\u043b\u044e\u0447\u043e\u043c API.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442 POST, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u043e\u0434 JSON \u0438\u0437 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0435\u0433\u043e Typescript \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442.<\/p>\n<pre><code class=\"javascript\">app.post(\"\/convert\", async (req, res) => { let { value } = req.body;  const prompt = `Convert the JSON object into Typescript interfaces \\n ${value} Please, I need the only the code, I don't need any explanations.`; const completion = await openai.createChatCompletion({ model: \"gpt-3.5-turbo\", messages: [{ role: \"user\", content: prompt }], }); res.json({ message: \"Successful\", response: completion.data.choices[0].message.content, }); });<\/code><\/pre>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u00abhandleSubmit\u00bb \u0432 \u0444\u0430\u0439\u043b\u0435 \u00abApp.js\u00bb, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 JSON, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c, \u0432 \u044d\u043d\u0434\u043f\u043e\u0439\u043d\u0442 \u00ab\/convert\u00bb \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<pre><code class=\"javascript\">const handleSubmit = () => {     fetch(\"http:\/\/localhost:4000\/convert\", {         method: \"POST\",         body: JSON.stringify({             value,         }),         headers: {             \"Content-Type\": \"application\/json\",         },     })         .then((res) => res.json())         .then((data) => {             setOutput(data.response);         })         .catch((err) => console.error(err)); };<\/code><\/pre>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u044d\u043d\u0434\u043f\u043e\u0439\u043d\u0442 \u00ab\/convert\u00bb, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435.  <\/p>\n<p>\u041f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043a\u043e\u0434\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439:\u00a0<\/p>\n<ol>\n<li>\n<p>\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 JSON \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f React;\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0435 \u0441 \u043a\u043e\u0434\u043e\u043c JSON;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0435\u0433\u043e \u0432 API ChatGPT.\u00a0<\/p>\n<\/li>\n<\/ol>\n<p>\u041e\u0442\u0432\u0435\u0442, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442 \u043a\u043e\u0434\u0430 Typescript, \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0443.<\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043e\u0442\u0432\u0435\u0442 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 Node.js, \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b \u00abLoading.js\u00bb \u0438 \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0432 \u043d\u0435\u0433\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435 \u043a\u043e\u0434.<\/p>\n<pre><code class=\"javascript\">import React from \"react\";  const Loading = () => {     return (         &lt;div className='loading'>             &lt;h2>Loading...&lt;\/h2>         &lt;\/div>     ); };  export default Loading;<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432 \u0444\u0430\u0439\u043b \u00abApp.js\u00bb.<\/p>\n<pre><code class=\"javascript\">const [loading, setLoading] = useState(false);<\/code><\/pre>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u00abhandleSubmit\u00bb, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \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 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c\u00bb (Run) \u0438\u043b\u0438 \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u043f\u0440\u043e\u0441 \u0443\u0441\u043f\u0435\u0448\u0435\u043d.<\/p>\n<pre><code class=\"javascript\">const handleSubmit = () => {     \/\/?? sets to true     setLoading(true);     fetch(\"http:\/\/localhost:4000\/convert\", {         method: \"POST\",         body: JSON.stringify({             value,         }),         headers: {             \"Content-Type\": \"application\/json\",         },     })         .then((res) => res.json())         .then((data) => {             \/\/?? sets to false             setLoading(false);             setOutput(data.response);         })         .catch((err) => console.error(err)); };<\/code><\/pre>\n<p>\u041f\u0440\u043e\u0432\u0435\u0434\u0438\u0442\u0435 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u043e\u0434\u0430, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0433\u043e \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435.<\/p>\n<pre><code class=\"javascript\">return (     &lt;main className='app'>         {\/* -- other UI components --*\/}         &lt;div className='code__container'>             &lt;div className='code'>                 &lt;Editor                     height='90vh'                     className='editor'                     defaultLanguage='json'                     defaultValue='{ }'                     value={value}                     onChange={(value) => setValue(value)}                 \/>             &lt;\/div>              &lt;div className='output'>                 {loading ? (                     &lt;Loading \/>                 ) : (                     &lt;Editor                         height='90vh'                         className='editor'                         defaultLanguage='typescript'                         options={{                             domReadOnly: true,                             readOnly: true,                         }}                         defaultValue=''                         value={output}                         onChange={(value) => setOutput(value)}                     \/>                 )}             &lt;\/div>         &lt;\/div>     &lt;\/main> );<\/code><\/pre>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 JSON \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u00ab\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430\u00bb (Loading) \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d, \u0430 \u0437\u0430\u0442\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/37a\/cf8\/6e8\/37acf86e839f48c5e2b57ab0eb656c4e.png\" width=\"800\" height=\"347\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/37a\/cf8\/6e8\/37acf86e839f48c5e2b57ab0eb656c4e.png\"\/><\/figure>\n<p>\u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u0435\u043c!\u00a0 \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0447\u0442\u0438 \u0433\u043e\u0442\u043e\u0432\u043e.\u00a0<\/p>\n<p>\u0412 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0435\u0433\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u043c\u0430\u0448\u0438\u043d\u043e\u043f\u0438\u0441\u043d\u044b\u0439 \u043a\u043e\u0434\u00a0 \u0438 \u043e\u0447\u0438\u0449\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u0432\u0432\u043e\u0434\u0430 \u0432 \u043e\u0434\u0438\u043d \u043a\u043b\u0438\u043a.<\/p>\n<h3>\u041a\u0430\u043a \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 Typescript \u043e\u0434\u043d\u0438\u043c \u043a\u043b\u0438\u043a\u043e\u043c<\/h3>\n<p>\u0418\u0437 \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0432\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u00a0 \u0432 \u043e\u0434\u0438\u043d \u043a\u043b\u0438\u043a, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u00abReact-copy-to-clipboard\u00bb.<\/p>\n<p>\u0412\u044b \u0443\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u043d\u0443\u0436\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430. \u0422\u0435\u043f\u0435\u0440\u044c \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u0435\u0433\u043e \u0432 \u0444\u0430\u0439\u043b \u00abApp.js\u00bb, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435.<\/p>\n<pre><code class=\"javascript\">import { CopyToClipboard } from \"react-copy-to-clipboard\";<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e, \u0432 \u0444\u0430\u0439\u043b\u0435 \u00abApp.js\u00bb.  <\/p>\n<pre><code class=\"javascript\">const copyToClipBoard = () => alert(`Copied \u2705`);<\/code><\/pre>\n<p>\u041e\u0431\u0435\u0440\u043d\u0438\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u00abCopyToClipboard\u00bb \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 \u0432\u043e\u043a\u0440\u0443\u0433 \u0437\u043d\u0430\u0447\u043a\u0430 SVG, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435.<\/p>\n<pre><code class=\"javascript\">&lt;CopyToClipboard text={output} onCopy={copyToClipBoard}>     &lt;span>         &lt;Copy \/>     &lt;\/span> &lt;\/CopyToClipboard><\/code><\/pre>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u00abCopyToClipboard\u00bb \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0440\u0435\u043a\u0432\u0438\u0437\u0438\u0442, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0438 \u0440\u0435\u043a\u0432\u0438\u0437\u0438\u0442 \u00abonCopy\u00bb \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e.<\/p>\n<h3>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043e\u0434\u043d\u0438\u043c \u043a\u043b\u0438\u043a\u043e\u043c<\/h3>\n<p>\u0427\u0442\u043e\u0431\u044b \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0432\u0441\u0435 \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u0435\u0440\u0435\u0434\u0430\u0439\u0442\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u00ab&lt;Delete\/>\u00bb.<\/p>\n<pre><code class=\"javascript\">&lt;Delete setValue={setValue} \/><\/code><\/pre>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0449\u0435\u043b\u043a\u043d\u0435\u0442 \u043d\u0430 \u0437\u043d\u0430\u0447\u043e\u043a \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f (Delete).<\/p>\n<pre><code class=\"javascript\">import React from \"react\";  const Delete = ({ setValue }) => {     return (         &lt;svg             xmlns='http:\/\/www.w3.org\/2000\/svg'             viewBox='0 0 24 24'             fill='currentColor'             className='w-6 h-6 deleteIcon'             onClick={() => setValue(\"{ }\")}         >             &lt;path                 fillRule='evenodd'                 d='M16.5 4.478v.227a48.816 48.816 0 013.878.512.75.75 0 11-.256 1.478l-.209-.035-1.005 13.07a3 3 0 01-2.991 2.77H8.084a3 3 0 01-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 01-.256-1.478A48.567 48.567 0 017.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 013.369 0c1.603.051 2.815 1.387 2.815 2.951zm-6.136-1.452a51.196 51.196 0 013.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 00-6 0v-.113c0-.794.609-1.428 1.364-1.452zm-.355 5.945a.75.75 0 10-1.5.058l.347 9a.75.75 0 101.499-.058l-.346-9zm5.48.058a.75.75 0 10-1.498-.058l-.347 9a.75.75 0 001.5.058l.345-9z'                 clipRule='evenodd'             \/>         &lt;\/svg>     ); };  export default Delete;<\/code><\/pre>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e API ChatGPT. \u042d\u0442\u043e\u0442 \u0436\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u043e\u0449\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u044b \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043e\u0431\u043b\u0430\u0441\u0442\u044f\u0445: \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u0442\u0435\u043a\u0441\u0442\u0430, Q&amp;A, \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u0434\u0430 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445.<\/p>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d <a href=\"https:\/\/github.com\/novuhq\/json-to-typescript\"><u>\u0437\u0434\u0435\u0441\u044c<\/u><\/a>.<\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0447\u0442\u0435\u043d\u0438\u0435!<\/p>\n<hr\/>\n<p>\u041d\u041b\u041e \u043f\u0440\u0438\u043b\u0435\u0442\u0435\u043b\u043e \u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u043b\u043e \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u043c\u043e\u043a\u043e\u0434 \u0434\u043b\u044f \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u0435\u0439 \u043d\u0430\u0448\u0435\u0433\u043e \u0431\u043b\u043e\u0433\u0430:<br \/><a href=\"https:\/\/firstvds.ru\/?utm_source=habr&amp;utm_medium=article&amp;utm_campaign=product&amp;utm_content=vds15exeptprogrev\"><strong>-15% \u043d\u0430 \u0437\u0430\u043a\u0430\u0437 \u043b\u044e\u0431\u043e\u0433\u043e VDS<\/strong><\/a><strong>\u00a0<\/strong>(\u043a\u0440\u043e\u043c\u0435 \u0442\u0430\u0440\u0438\u0444\u0430 \u041f\u0440\u043e\u0433\u0440\u0435\u0432) \u2014\u00a0<strong>HABRFIRSTVDS<\/strong>.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/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\/articles\/761228\/\"> https:\/\/habr.com\/ru\/articles\/761228\/<\/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\"><\/figure>\n<p>\u041b\u044e\u0431\u043e\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442, \u0447\u0430\u0441\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u0441 API, \u043c\u043e\u0436\u0435\u0442 \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u043c\u0430\u0441\u0441\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 ChatGPT \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f JSON \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b Typescript.\u00a0<\/p>\n<h3>\u0417\u0430\u0447\u0435\u043c \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e<\/h3>\n<p>API \u2014 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0430\u043b\u0430\u0434\u0438\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0441\u0430\u0439\u0442\u043e\u043c \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043a\u043e\u0434\u0430 \u043e\u0431\u044b\u0447\u043d\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d \u043e\u0431 \u043e\u0442\u0432\u0435\u0442\u0435. \u041d\u043e \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a API \u0432\u044b \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0423 \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0440\u0435\u0448\u0435\u043d\u0438\u044f:<\/p>\n<ol>\n<li>\n<p>\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441, \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u0445.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0439\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430 (\u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0435\u0441\u0442\u044c) \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u0445.<\/p>\n<\/li>\n<\/ol>\n<p>\u041d\u043e \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSON \u0438 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0432 Typescript.<\/p>\n<p>\u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f <a href=\"https:\/\/www.npmjs.com\/package\/json-to-ts\"><u>JSON \u0432 Typescript<\/u><\/a>, \u043d\u043e \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 ChatGPT, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0430\u043a \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435. \u042f \u0441\u043e\u0437\u0434\u0430\u043b <a href=\"https:\/\/github.com\/novuhq\/json-to-typescript-chatgpt\"><u>\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/u><\/a> \u0441 \u043f\u043e\u043b\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f JSON \u0432 Typescript \u2014 \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e.<\/p>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 ChatGPT<\/h3>\n<p>ChatGPT \u2014 \u044d\u0442\u043e \u044f\u0437\u044b\u043a\u043e\u0432\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442\u0430, \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u0430\u044f OpenAI \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438 \u0432 \u0440\u0430\u0437\u0433\u043e\u0432\u043e\u0440\u043d\u043e\u0439 \u043c\u0430\u043d\u0435\u0440\u0435, \u043f\u043e\u0445\u043e\u0436\u0435\u0439 \u043d\u0430 \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u0443\u044e. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043a\u0440\u0430\u0442\u043a\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0438\u043b\u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044b\u0435 \u043e\u0442\u0432\u0435\u0442\u044b \u043f\u043e \u0448\u0438\u0440\u043e\u043a\u043e\u043c\u0443 \u043a\u0440\u0443\u0433\u0443 \u0442\u0435\u043c \u0432\u0441\u0435\u0433\u043e \u0437\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<p>ChatGPT \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c, \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u0438 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0442\u044c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0434\u0430. \u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0441\u0435\u0440\u0432\u0438\u0441 ChatGPT \u043e\u0442\u043a\u0440\u044b\u0442 \u0434\u043b\u044f \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u044d\u0442\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e API \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430 JSON \u0432 Typescript.<\/p>\n<h4>\u0412\u043e \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e \u043e\u0431\u043e\u0439\u0434\u0435\u0442\u0441\u044f<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0431\u0440\u0430\u0442\u044c \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0434\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043a API \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e Chat GPT (gpt-3.5-turbo), \u0442\u043e, \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e <a href=\"https:\/\/techcrunch.com\/2023\/03\/01\/openai-launches-an-api-for-chatgpt-plus-dedicated-capacity-for-enterprise-customers\/\"><u>\u0434\u0430\u043d\u043d\u044b\u043c TechCrunch<\/u><\/a>, \u043e\u043d\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442 0.002 \u0434\u043e\u043b\u043b\u0430\u0440\u0430 \u0437\u0430 1 000 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0438\u043b\u0438 750 \u0441\u043b\u043e\u0432. \u041c\u0435\u0441\u044f\u0447\u043d\u0430\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 ChatGPT Plus, \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0430\u044f \u00ab\u0431\u0435\u0437\u043b\u0438\u043c\u0438\u0442\u00bb \u043e\u0431\u043e\u0439\u0434\u0435\u0442\u0441\u044f \u0443\u0436\u0435 \u0432 20 \u0434\u043e\u043b\u043b\u0430\u0440\u043e\u0432.<\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0432\u0430\u043c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0440\u0435\u0434\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0434\u043b\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c React.js \u0434\u043b\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 Node.js \u0434\u043b\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043f\u0430\u043f\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0434\u043b\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0432 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">mkdir json-to-typescript cd json-to-typescript mkdir client server<\/code><\/pre>\n<h4>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 Node.js<\/h4>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b \u00abpackage.json\u00bb.<\/p>\n<pre><code class=\"javascript\">cd server &amp; npm init -y<\/code><\/pre>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 Express, Nodemon \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 CORS:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/expressjs.com\/\"><u>ExpressJS<\/u><\/a> \u2014 \u0431\u044b\u0441\u0442\u0440\u0430\u044f \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 Node.js.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/cors\"><u>CORS<\/u><\/a> \u2014 \u044d\u0442\u043e \u043f\u0430\u043a\u0435\u0442 Node.js, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0441\u0432\u044f\u0437\u044c \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0434\u043e\u043c\u0435\u043d\u0430\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/nodemon\"><u>Nodemon<\/u><\/a> \u2014 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 Node.js, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0444\u0430\u0439\u043b\u043e\u0432.  <\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"javascript\">npm install express cors nodemon<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b \u00abindex.js\u00bb \u2014 \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430 \u043d\u0430 \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440.  <\/p>\n<pre><code class=\"javascript\">touch index.js<\/code><\/pre>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u0442\u0435 \u0441\u0435\u0440\u0432\u0435\u0440 Node.js \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Express.js. \u041f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043a\u043e\u0434\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 JSON \u043f\u0440\u0438 \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u0438 \u00abhttp:\/\/localhost:4000\/api\u00bb \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<pre><code class=\"javascript\">\/\/??index.js const express = require(\"express\"); const cors = require(\"cors\"); const app = express(); const PORT = 4000;  app.use(express.urlencoded({ extended: true })); app.use(express.json()); app.use(cors());  app.get(\"\/api\", (req, res) => {     res.json({         message: \"Hello world\",     }); });  app.listen(PORT, () => {     console.log(`Server listening on ${PORT}`); });<\/code><\/pre>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u0442\u0435 Nodemon, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 start \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0432 \u0444\u0430\u0439\u043b\u0435 \u00abpackage.json\u00bb. \u041f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043a\u043e\u0434\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Nodemon.<\/p>\n<pre><code class=\"javascript\">\/\/In server\/package.json  \"scripts\": {     \"test\": \"echo \\\"Error: no test specified\\\" &amp;&amp; exit 1\",     \"start\": \"nodemon index.js\"   },<\/code><\/pre>\n<p>\u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u0435\u043c! \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u043d\u0438\u0436\u0435.  <\/p>\n<pre><code class=\"javascript\">npm start<\/code><\/pre>\n<h4>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f React<\/h4>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043a\u043b\u0438\u0435\u043d\u0442 \u0447\u0435\u0440\u0435\u0437 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u0438 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 React.js.<\/p>\n<pre><code class=\"javascript\">cd client npx create-react-app .\/<\/code><\/pre>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 2 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:\u00a0<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/suren-atoyan\/monaco-react\"><u>Monaco Editor for React<\/u><\/a> \u2014 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0430\u043a\u0435\u0442 \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u0432 \u043a\u043e\u0434\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f React.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/react-copy-to-clipboard\"><u>React Copy to Clipboard<\/u><\/a> \u2014 \u043f\u0430\u043a\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043e\u0434\u043d\u0438\u043c \u043d\u0430\u0436\u0430\u0442\u0438\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"javascript\">npm install @monaco-editor\/react react-copy-to-clipboard<\/code><\/pre>\n<p>\u0423\u0434\u0430\u043b\u0438\u0442\u0435 \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0438 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0435 \u0444\u0430\u0439\u043b\u044b) \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f React \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0444\u0430\u0439\u043b \u00abApp.js\u00bb, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b \u00abHello World\u00bb, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435.  <\/p>\n<pre><code>function App() {     return (         &lt;div>             &lt;p>Hello World!&lt;\/p>         &lt;\/div>     ); } export default App;<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u0444\u0430\u0439\u043b \u00absrc\/index.css\u00bb \u0438 \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435 \u043a\u043e\u0434. \u041e\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0435\u0441\u044c \u043a\u043e\u0434 CSS, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435.  <\/p>\n<pre><code class=\"javascript\">@import url(\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;display=swap\");  * {     box-sizing: border-box;     margin: 0;     padding: 0;     font-family: \"Space Grotesk\", sans-serif; } .app {     width: 100%;     min-height: 100vh; } .loading {     display: flex;     align-items: center;     justify-content: center;     width: 100%;     height: 100vh; } .header__container {     width: 100%;     display: flex;     align-items: center;     height: 10vh;     background-color: #e0f2fe; } .header__right {     display: flex;     align-items: center; } .runBtn {     padding: 10px 5px;     width: 100px;     margin-right: 10px;     cursor: pointer;     border: none;     border-radius: 3px;     box-shadow: 0 0 1px 1px #e0e0ea;     background-color: #065f46;     outline: none;     color: #fff; } .header {     border: 1px solid #ddd;     padding: 10px 20px;     border: 1px solid #e8e2e2;     display: flex;     align-items: center;     justify-content: space-between;     flex: 0.5;     height: 100%; } .code__container {     display: flex;     height: 95vh;     width: 100%;     align-items: flex-start; } .minimap {     display: none; } .editor {     padding: 10px 0px;     width: 100%; } .code, .output {     width: 50vw; } .deleteIcon {     height: 25px;     color: #cf0a0a;     cursor: pointer; } .copyIcon {     height: 25px;     color: #3e54ac;     cursor: pointer; }<\/code><\/pre>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430 JSON \u0432 Typescript, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u044b JSON \u0432 \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432 Typescript \u0432 \u043f\u0440\u0430\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430, \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043f\u0430\u043f\u043a\u0443 \u0438\u043a\u043e\u043d\u043e\u043a \u00abicons\u00bb \u0432 \u043f\u0430\u043f\u043a\u0435 \u00abclient\/src\u00bb. \u041f\u0430\u043f\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0438 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0432\u044b\u0448\u0435.  <\/p>\n<pre><code class=\"javascript\">cd client\/src mkdir icons cd icons touch Copy.js Delete.js<\/code><\/pre>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0444\u0430\u0439\u043b \u00abCopy.js\u00bb, \u0447\u0442\u043e\u0431\u044b \u0432 \u043d\u0435\u043c \u043d\u0430\u0447\u0430\u043b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0437\u043d\u0430\u0447\u043e\u043a SVG \u0438\u0437 <a href=\"https:\/\/heroicons.com\/\"><u>Heroicons<\/u><\/a>.  <\/p>\n<pre><code class=\"javascript\">import React from \"react\";  const Copy = () => {     return (         &lt;svg             xmlns='http:\/\/www.w3.org\/2000\/svg'             viewBox='0 0 24 24'             fill='currentColor'             className='w-6 h-6 copyIcon'         >             &lt;path d='M7.5 3.375c0-1.036.84-1.875 1.875-1.875h.375a3.75 3.75 0 013.75 3.75v1.875C13.5 8.161 14.34 9 15.375 9h1.875A3.75 3.75 0 0121 12.75v3.375C21 17.16 20.16 18 19.125 18h-9.75A1.875 1.875 0 017.5 16.125V3.375z' \/>             &lt;path d='M15 5.25a5.23 5.23 0 00-1.279-3.434 9.768 9.768 0 016.963 6.963A5.23 5.23 0 0017.25 7.5h-1.875A.375.375 0 0115 7.125V5.25zM4.875 6H6v10.125A3.375 3.375 0 009.375 19.5H16.5v1.125c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 013 20.625V7.875C3 6.839 3.84 6 4.875 6z' \/>         &lt;\/svg>     ); };  export default Copy;<\/code><\/pre>\n<p>\u0421\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435 \u043a\u043e\u0434 \u0432 \u0444\u0430\u0439\u043b \u00abDelete.js\u00bb. \u041e\u043d \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 SVG-\u0438\u043a\u043e\u043d\u043a\u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f.  <\/p>\n<pre><code class=\"javascript\">import React from \"react\";  const Delete = () => {     return (         &lt;svg             xmlns='http:\/\/www.w3.org\/2000\/svg'             viewBox='0 0 24 24'             fill='currentColor'             className='w-6 h-6 deleteIcon'         >             &lt;path                 fillRule='evenodd'                 d='M16.5 4.478v.227a48.816 48.816 0 013.878.512.75.75 0 11-.256 1.478l-.209-.035-1.005 13.07a3 3 0 01-2.991 2.77H8.084a3 3 0 01-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 01-.256-1.478A48.567 48.567 0 017.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 013.369 0c1.603.051 2.815 1.387 2.815 2.951zm-6.136-1.452a51.196 51.196 0 013.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 00-6 0v-.113c0-.794.609-1.428 1.364-1.452zm-.355 5.945a.75.75 0 10-1.5.058l.347 9a.75.75 0 101.499-.058l-.346-9zm5.48.058a.75.75 0 10-1.498-.058l-.347 9a.75.75 0 001.5.058l.345-9z'                 clipRule='evenodd'             \/>         &lt;\/svg>     ); };  export default Delete;<\/code><\/pre>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0444\u0430\u0439\u043b \u00abApp.js\u00bb, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.  <\/p>\n<pre><code>import React from \"react\"; import Delete from \".\/icons\/Delete\"; import Copy from \".\/icons\/Copy\";  const App = () => {     const handleSubmit = () => {         console.log(\"Run Button Clicked\");     };      return (         &lt;main className='app'>             &lt;header className='header__container'>                 &lt;div className='header'>                     &lt;h3>JSON&lt;\/h3>                     &lt;div className='header__right'>                         &lt;button className='runBtn' onClick={handleSubmit}>                             RUN                         &lt;\/button>                         &lt;Delete \/>                     &lt;\/div>                 &lt;\/div>                  &lt;div className='header'>                     &lt;h3>Typescript&lt;\/h3>                     &lt;Copy \/>                 &lt;\/div>             &lt;\/header>              &lt;div className='code__container'>&lt;\/div>         &lt;\/main>     ); };  export default App;<\/code><\/pre>\n<h3>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u043e\u0434\u0430 Monaco \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 React<\/h3>\n<p>Monaco \u2014 \u044d\u0442\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 VS Code. \u0414\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u044d\u0442\u043e\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u0430\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f.<\/p>\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0443\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0432 \u0444\u0430\u0439\u043b \u00abApp.js\u00bb, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435.<\/p>\n<pre><code class=\"javascript\">import React, { useState } from \"react\"; import Delete from \".\/icons\/Delete\"; import Copy from \".\/icons\/Copy\"; import Editor from \"@monaco-editor\/react\";  const App = ()<\/code><\/pre>\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-354969","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/354969","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=354969"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/354969\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=354969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=354969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=354969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}