{"id":329854,"date":"2022-02-19T15:00:43","date_gmt":"2022-02-19T15:00:43","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=329854"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=329854","title":{"rendered":"<span>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0432\u043e\u0439 React \u0441 \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u043c \u0438 useState \u0437\u0430 30 \u043c\u0438\u043d\u0443\u0442<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"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\/e9c\/fb8\/ca2\/e9cfb8ca2a96faeb7efad83d26e2d213.png\" width=\"2177\" height=\"1043\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e9c\/fb8\/ca2\/e9cfb8ca2a96faeb7efad83d26e2d213.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0441 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u044f\u0442 \u0432 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043c\u0435\u043b\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043f\u0430\u0437\u043b\u0430. \u0415\u0441\u043b\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u0447\u0442\u043e \u0412\u0430\u043c \u0434\u0430\u043b\u0438 \u0437\u0430\u0434\u0430\u0447\u0443 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 React \u0437\u0430 \u043f\u043e\u043b\u0447\u0430\u0441\u0430, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0412\u044b \u0431\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u043e\u0434\u0438\u043d \u0438\u0437 \u0434\u0432\u0443\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432: <\/p>\n<ul>\n<li>\n<p>\u043f\u0435\u0440\u0435\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0441\u0435 \u0442\u043e, \u0447\u0442\u043e \u0438\u0437\u043b\u043e\u0436\u0435\u043d\u043e \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 <a href=\"https:\/\/reactjs.org\" rel=\"noopener noreferrer nofollow\">reactjs.org<\/a><\/p>\n<\/li>\n<li>\n<p>\u043b\u0438\u0431\u043e \u043f\u0440\u043e\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 <a href=\"https:\/\/github.com\/facebook\/react\/blob\/main\/packages\/react\/src\/React.js\" rel=\"noopener noreferrer nofollow\">react<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u0430 \u0448\u0430\u0433\u0430, \u043d\u043e \u0435\u0441\u0442\u044c \u043b\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435?<\/p>\n<h2>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/h2>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0434\u0432\u0435 dev \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438: <\/p>\n<pre><code class=\"bash\">yarn add -D parcel typescript<\/code><\/pre>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 parcel \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 (\u043a\u0430\u043a \u0440\u0430\u0437 \u0442\u043e, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e), \u0430 typescript (\u0442\u043e\u0447\u043d\u0435\u0435 typescript<em> <\/em>compiler &#8212; <em>tsc<\/em>) \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u043b\u0435\u0433\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f jsx \u0432 js<em>.<\/em> \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0432\u0442\u043e\u0440\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/babeljs.io\/docs\/en\/#jsx-and-react\" rel=\"noopener noreferrer nofollow\">babel<\/a>, \u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f typescript \u043c\u044b \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e. \u0412\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"bash\">yarn tsc --init<\/code><\/pre>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u0440\u043e \u0444\u0430\u0439\u043b node_modules\/.bin\/tsc<\/summary>\n<div class=\"spoiler__content\">\n<p>\u041f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u043f\u0430\u043a\u0435\u0442\u043e\u0432, <em>yarn<\/em> (\u0438\u043b\u0438 <em>npm<\/em>) \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u0435\u0441\u0442\u044c \u043b\u0438 \u0443 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0444\u0430\u0439\u043b \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u043b\u0435 <a href=\"https:\/\/docs.npmjs.com\/cli\/v8\/configuring-npm\/package-json#bin\" rel=\"noopener noreferrer nofollow\">bin<\/a> \u0432 \u0444\u0430\u0439\u043b\u0435 <em>package.json<\/em>.<br \/>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u043b\u0438 typescript, \u0431\u0438\u043d\u0430\u0440\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430 \u0431\u044b\u043b\u043e \u0441\u0440\u0430\u0437\u0443 \u0434\u0432\u0430:<\/p>\n<pre><code class=\"json\">\/\/ node_modules\/typescript\/package.json \"bin\": {   \"tsc\": \".\/bin\/tsc\", \u00a0 \"tsserver\": \".\/bin\/tsserver\" }<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u0435 <em>bin<\/em> \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043e, \u0442\u043e \u043f\u0430\u043a\u0435\u0442\u043d\u044b\u0439 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Symbolic_link\" rel=\"noopener noreferrer nofollow\">symlink<\/a> (<a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%A1%D0%B8%D0%BC%D0%B2%D0%BE%D0%BB%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F_%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B0\" rel=\"noopener noreferrer nofollow\">\u0441\u0438\u043c\u0432\u043e\u043b\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0441\u044b\u043b\u043a\u0443<\/a>) \u043d\u0430 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u0438 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u0435\u0435 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <em>node_modules\/.bin<br \/><\/em>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c <em>node_modules\/.bin\/tsc<\/em> &#8212; \u044d\u0442\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0444\u0430\u0439\u043b <em>node_modules\/typescript\/bin\/tsc<\/em><br \/> \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e <em>yarn &lt;bin_name><\/em> &#8212; \u043f\u0430\u043a\u0435\u0442\u043d\u044b\u0439 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 <em>&lt;bin_name><\/em> \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <em>node_modules\/.bin<\/em> \u0438 \u0435\u0441\u043b\u0438 \u0442\u0430\u043a\u043e\u0432\u043e\u0439 \u043d\u0430\u0439\u0434\u0435\u043d, \u0442\u043e \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n<\/div>\n<\/details>\n<p>\u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0434\u043b\u044f typescript &#8212; <em>tsconfig.json<\/em>. \u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0441\u043c\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439:<\/p>\n<ol>\n<li>\n<p>\u0420\u0430\u0441\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u0443 <code>\"jsx\": \"preserve\"<\/code> &#8212; \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u043c <code>\"preserve\"<\/code> \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>\"react\"<\/code>. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u043a\u0430\u043a\u043e\u0439 \u0442\u0438\u043f <em>output<\/em> \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f <em>jsx<\/em> \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c (\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e <em>jsx<\/em> \u0432 <a href=\"#jsx\" rel=\"noopener noreferrer nofollow\">\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435<\/a>). \u0412\u0441\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/jsx.html\" rel=\"noopener noreferrer nofollow\">\u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435<\/a>.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <a href=\"https:\/\/www.typescriptlang.org\/tsconfig#strict\" rel=\"noopener noreferrer nofollow\">\u0444\u043b\u0430\u0433\u0430 &#171;strict&#187;<\/a> \u0441 <code>\"true\"<\/code> \u043d\u0430 <code>\"false\"<\/code>. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043e\u0442\u0432\u043b\u0435\u043a\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0434 \u043d\u0430\u0448\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 React.\u00a0<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 <em>tsconfig.json<\/em> \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"diff\">\/\/ tsconfig.json -    \/\/ \"jsx\": \"preserve\"  \/* Specify what JSX code is generated. *\/, +    \"jsx\": \"react\"        \/* Specify what JSX code is generated. *\/, -    \"strict\": true        \/* Enable all strict type-checking options. *\/, +    \"strict\": false       \/* Enable all strict type-checking options. *\/,<\/code><\/pre>\n<p>\u0412\u0441\u0435 \u0433\u043e\u0442\u043e\u0432\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u044b! \u0427\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043d\u0430\u0447\u0430\u0442\u044c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f <em>index.html<\/em> \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<pre><code class=\"markdown\">\/\/ index.html &lt;script src=\"index.tsx\" type=\"module\">&lt;\/script><\/code><\/pre>\n<p>\u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0432\u0435\u043d\u043d\u043e, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 <em>index.tsx<\/em>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c <code>console.log(\"hello react\");<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ index.tsx console.log(\"hello react\");<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0431\u043b\u043e\u043a \u0432 \u0444\u0430\u0439\u043b <em>package.json<\/em> \u0432 \u043a\u043e\u0440\u043d\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<pre><code class=\"json\">\/\/ package.json \"licence\": \"MIT\", \"scripts\": {   \"start\": \"parcel index.html\" },<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 <code>yarn start<\/code> \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435, \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 <em>1234<\/em> \u043f\u043e\u0440\u0442\u0443 \u043b\u043e\u043a\u0430\u043b\u0445\u043e\u0441\u0442\u0430 <a href=\"http:\/\/localhost:1234\" rel=\"noopener noreferrer nofollow\">http:\/\/localhost:1234<\/a>, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043f\u0443\u0441\u0442\u043e\u0439, \u043d\u043e \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u043e \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <em>index.tsx<\/em><\/p>\n<p><a class=\"anchor\" name=\"jsx\" id=\"jsx\"><\/a><\/p>\n<h2>JSX &amp; React Elements<\/h2>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0431\u043b\u043e\u043a\u0435 \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">const element = &lt;h1>React, what are you?&lt;\/h1>;<\/code><\/pre>\n<p>\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f React (\u0432 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u0438\u0439 \u044f\u0437\u044b\u043a <a href=\"https:\/\/github.com\/reactjs\/ru.reactjs.org\/pull\/236\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0438\u043d\u044f\u043b \u0443\u0447\u0430\u0441\u0442\u0438\u0435<\/a> \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0412\u0430\u0448 \u043f\u043e\u043a\u043e\u0440\u043d\u044b\u0439 \u0441\u043b\u0443\u0433\u0430), <a href=\"https:\/\/ru.reactjs.org\/docs\/introducing-jsx.html\" rel=\"noopener noreferrer nofollow\">\u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435<\/a> <em>JSX<\/em> \u0441 \u0444\u0440\u0430\u0437\u044b:  \u00a0<\/p>\n<blockquote>\n<p>\u042d\u0442\u043e\u0442 \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0439 \u0442\u0435\u0433\u00a0\u2014 \u043d\u0438\u00a0\u0441\u0442\u0440\u043e\u043a\u0430, \u043d\u0438\u00a0\u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 HTML<\/p>\n<\/blockquote>\n<p>?  \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u043d\u0430\u0447\u0430\u043b\u043e!<\/p>\n<p>\u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0441\u0430\u043c\u044b\u043c \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u043c \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 <a href=\"https:\/\/www.typescriptlang.org\/play\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u044b typescript<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/babeljs.io\/repl\" rel=\"noopener noreferrer nofollow\">babel<\/a> (\u0434\u043b\u044f babel \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043e\u0442\u0436\u0430\u0442\u044c \u0433\u0430\u043b\u043e\u0447\u043a\u0443 react \u0441\u043b\u0435\u0432\u0430!), \u0433\u0434\u0435 \u043d\u0430\u0448\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 <code>&lt;h1>React, what are you?&lt;\/h1><\/code> \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c.<\/p>\n<pre><code class=\"javascript\">\"use strict\";  React.createElement(\"h1\", null, \"React, what are you?\");<\/code><\/pre>\n<details class=\"spoiler\">\n<summary>\u041f\u0435\u0440\u0432\u043e\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0441 React.createElement<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0434\u0430\u043d\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c.<\/p>\n<p>\u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 &#8212; \u044d\u0442\u043e \u0442\u0435\u0433, \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 <em>h1<\/em>.<\/p>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0440\u0430\u0432\u0435\u043d <em>null<\/em>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b. \u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u0441\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u044e\u0447\u0435\u0439\/\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0443\u0442 \u0438\u043c\u0435\u043d\u0430 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432. \u0422\u0430\u043a\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u0440\u0435\u0430\u043a\u0442\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <a href=\"https:\/\/reactjs.org\/docs\/components-and-props.html\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u043e\u043f\u0441<\/a>.<\/p>\n<p>\u0422\u0440\u0435\u0442\u0438\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 &#8212; \u044d\u0442\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u0442\u0435\u0433\u0430, \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430. \u0415\u0441\u043b\u0438 \u0431\u044b \u0432\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0431\u044b\u043b\u0430 \u043d\u0435 \u0441\u0442\u0440\u043e\u043a\u0430 \u0438\u043b\u0438 \u0447\u0438\u0441\u043b\u043e, \u0430 \u0434\u0440\u0443\u0433\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430, \u0442\u043e \u043c\u044b \u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043d\u043e\u0432\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 <em>React.createElement<\/em>.  <\/p>\n<p><strong>\u0412\u0430\u0436\u043d\u043e!<\/strong> \u0415\u0441\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0433\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u043b\u043e\u0436\u0435\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u0433\u043e\u0432, \u0447\u0438\u0441\u043b\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c\u0441\u044f \u0441 \u0442\u0440\u0435\u0445 \u0434\u043e <em>n + 2<\/em>, \u0433\u0434\u0435 <em>n<\/em> &#8212; \u044d\u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0442\u0435\u0433\u043e\u0432 \u043e\u0434\u043d\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"markdown\">&lt;div> \u00a0 &lt;p>1&lt;\/p> \u00a0 &lt;p>2&lt;\/p> &lt;\/div><\/code><\/pre>\n<p>\u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0432<\/p>\n<pre><code class=\"javascript\"> React.createElement(\"div\",\u00a0null, \u00a0\u00a0\u00a0\u00a0React.createElement(\"p\",\u00a0null,\u00a0\"1\"), \u00a0\u00a0\u00a0\u00a0React.createElement(\"p\",\u00a0null,\u00a0\"2\"));<\/code><\/pre>\n<p>\u0433\u0434\u0435 \u0443 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 <em>React.createElement<\/em> \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0447\u0438\u0442\u0430\u0442\u044c <em>4<\/em> \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430.<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u0442\u0440\u0430\u043d\u0441\u043f\u0430\u0439\u043b\u0438\u043d\u0433\u0430 <code>&lt;h1>React, what are you?&lt;\/h1><\/code> \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <em>element<\/em> \u0437\u0430\u043f\u0438\u0448\u0435\u0442\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0437\u043e\u0432\u0430 <em>React.createElement<\/em> \u0441 \u0442\u0440\u0435\u043c\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438.<\/p>\n<p>\u0423\u0431\u0435\u0434\u0438\u043c\u0441\u044f \u0432 \u044d\u0442\u043e\u043c \u0441\u0430\u043c\u0438, \u0432 \u0444\u0430\u0439\u043b\u0435 <em>index.tsx<\/em> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435:<\/p>\n<pre><code class=\"javascript\">\/\/ index.tsx const element = &lt;h1>React, what are you?&lt;\/h1>; console.log(element);<\/code><\/pre>\n<p>\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 <a href=\"http:\/\/localhost:1234\/\" rel=\"noopener noreferrer nofollow\">http:\/\/localhost:1234<\/a><\/p>\n<blockquote>\n<p>Uncaught ReferenceError: React is not defined<\/p>\n<\/blockquote>\n<p>\u041e\u0448\u0438\u0431\u043a\u0430 \u0432\u044b\u0437\u0432\u0430\u043d\u0430 \u0442\u0435\u043c, \u0447\u0442\u043e TypeScript compiler \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b \u0441\u0432\u043e\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043a\u0430\u043a \u043d\u0430\u0434\u043e \u0438 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <em>element<\/em> \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043f\u0430\u0441\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b <em>React.createElement<\/em>, \u043d\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u043d\u0438\u0433\u0434\u0435 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <em>React<\/em>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0410 \u0447\u0442\u043e \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u0438?<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0412 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u0438 (\u0434\u043e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f <a href=\"https:\/\/reactjs.org\/blog\/2020\/09\/22\/introducing-the-new-jsx-transform.html\" rel=\"noopener noreferrer nofollow\">17-\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 react<\/a>) \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c <a href=\"https:\/\/www.npmjs.com\/package\/react\" rel=\"noopener noreferrer nofollow\">npm \u043f\u0430\u043a\u0435\u0442 react<\/a> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0444\u0430\u0439\u043b\u0430 <em>index.tsx <\/em>\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0438\u043c\u043f\u043e\u0440\u0442: <\/p>\n<pre><code class=\"javascript\">\/\/ index.tsx  import React from \"react\" <\/code><\/pre>\n<p>\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u044d\u0442\u043e \u0440\u0435\u0448\u0438\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 (\u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0443 \u0412\u0430\u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Modules\" rel=\"noopener noreferrer nofollow\">type=&#187;module&#187;<\/a> \u0442\u0435\u0433\u0443 <em>script<\/em> \u0432 <em>index.html<\/em>) \u0438 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u044b\u0432\u043e\u0434 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0c1\/2e6\/488\/0c12e6488d4275547a1df1e5d47db7f3.png\" alt=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0432\u043e\u0434\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 element \u0432 \u0444\u0430\u0439\u043b\u0435 index.tsx\" title=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0432\u043e\u0434\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 element \u0432 \u0444\u0430\u0439\u043b\u0435 index.tsx\" width=\"1308\" height=\"644\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0c1\/2e6\/488\/0c12e6488d4275547a1df1e5d47db7f3.png\"\/><figcaption>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0432\u043e\u0434\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 element \u0432 \u0444\u0430\u0439\u043b\u0435 index.tsx<\/figcaption><\/figure>\n<p>\u0426\u0435\u043b\u044c\u044e \u0436\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u0431\u043e\u0440 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0440\u0435\u0430\u043a\u0442\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043f\u043e\u0439\u0434\u0435\u043c \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0443\u0442\u0435\u043c \u0438 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u0432\u043e\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e React.<\/p>\n<\/div>\n<\/details>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <em>React<\/em> \u0438 \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u043c \u0435\u0439 \u043f\u0443\u0441\u0442\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442:<\/p>\n<pre><code class=\"diff\">\/\/ index.tsx + const React = {};    const element = &lt;h1>React, what are you?&lt;\/h1>;   console.log(element);<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0448\u0438\u0431\u043a\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0439 \u0432\u0438\u0434:<\/p>\n<blockquote>\n<p>Uncaught TypeError: React.createElement is not a function<\/p>\n<\/blockquote>\n<p>\u0427\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u043f\u043e\u043b\u043d\u0435 \u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0435\u0442\u043e\u0434 <em>createElement<\/em> \u0438 \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b:<\/p>\n<pre><code class=\"javascript\">\/\/ index.tsx const React = { \u00a0 createElement: (...params) => { \u00a0 \u00a0 console.log(params); \u00a0 }, };  \/\/ ...<\/code><\/pre>\n<p>\u041e\u0448\u0438\u0431\u043a\u0430 \u043f\u043e\u0432\u0435\u0440\u0436\u0435\u043d\u0430, \u0438 \u043c\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0442\u0440\u0435\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u0432 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u043a\u0430\u043a \u0442\u0435, \u0447\u0442\u043e \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0432 <a href=\"https:\/\/www.typescriptlang.org\/play\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435 TypeScript<\/a>!<br \/>\u0427\u0442\u043e\u0431\u044b \u043b\u0443\u0447\u0448\u0435 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 <em>React.createElement<\/em> &#8212; \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443. \u0412 \u0438\u0442\u043e\u0433\u0435 \u0444\u0430\u0439\u043b <em>index.tsx<\/em> \u043f\u0440\u0438\u043c\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434:<\/p>\n<pre><code class=\"javascript\">\/\/ index.tsx const React = {   createElement: (...params) => {     console.log(params);   }, };  const element = (   &lt;div>     &lt;header>Header&lt;\/header>     &lt;main>       &lt;h1>Page title&lt;\/h1>       &lt;p>lorem...&lt;\/p>     &lt;\/main>     &lt;footer>Footer&lt;\/footer>   &lt;\/div> );  console.log(element);<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u0447\u0442\u043e \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u043a\u043e\u043d\u0441\u043e\u043b\u044c &#8212; \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443:<\/p>\n<blockquote>\n<p>[&#8216;header&#8217;, {\u2026}, &#8216;Header&#8217;]<\/p>\n<p>[&#8216;h1&#8217;, {\u2026}, &#8216;Page title&#8217;]<\/p>\n<p>[&#8216;p&#8217;, {\u2026}, &#8216;lorem&#8230;&#8217;]<\/p>\n<p>[&#8216;main&#8217;, {\u2026}, undefined, undefined]<\/p>\n<p>[&#8216;footer&#8217;, {\u2026}, &#8216;Footer&#8217;]<\/p>\n<p>[&#8216;div&#8217;, {\u2026}, undefined, undefined, undefined]<\/p>\n<\/blockquote>\n<p>\u0423 \u043d\u0435\u0438\u0441\u043a\u0443\u0448\u0435\u043d\u043d\u043e\u0433\u043e \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>\u0427\u0435\u043c \u043e\u0431\u0443\u0441\u043b\u043e\u0432\u043b\u0435\u043d \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u0437\u043e\u0432\u043e\u0432?<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u043a\u0443\u0434\u0430 \u0432\u0437\u044f\u043b\u0438\u0441\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b <em>undefined<\/em> \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0430\u0445 \u0434\u043b\u044f \u0442\u0435\u0433\u043e\u0432 <em>main<\/em> \u0438 <em>div<\/em>?<\/p>\n<\/li>\n<\/ul>\n<ol>\n<li>\n<p>\u0412\u044b\u0437\u043e\u0432\u044b <em>createElement<\/em> <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%A0%D0%B5%D0%BA%D1%83%D1%80%D1%81%D0%B8%D1%8F\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u044b<\/a>. \u0415\u0441\u043b\u0438 \u0432\u0437\u044f\u0442\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0442\u0435\u0433 <em>div<\/em>, \u0442\u043e \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 <code>React.createElement(\"header\", null, \"Header\")<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 <code>React.createElement(\"div\", \u2026);<\/code><\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0432\u044b\u0437\u043e\u0432 <em>React.createElement<\/em> (\u0438\u0437 npm \u043f\u0430\u043a\u0435\u0442\u0430 <em>react<\/em>) \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 React \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0430 \u043d\u0430\u0448\u0430 \u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u043a\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 (<em>undefined<\/em>). \u0418\u0441\u043f\u0440\u0430\u0432\u0438\u043c \u044d\u0442\u043e! ??\u200d?<\/p>\n<\/li>\n<\/ol>\n<p>\u041c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <em>createElement<\/em>, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0432\u0438\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">\/\/ index.tsx const React = {   createElement: (tag, props, ...children) => {     return {       tag,       props: {         ...props,         children,       },     };   }, };  \/\/ ...<\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0430\u043a\u0442\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043a\u0430\u043a \u043f\u0440\u043e\u043f <em>children<\/em>. \u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u043d\u043e\u0433\u043e, \u0430 \u043c\u043e\u0436\u0435\u0442 \u0438 \u043d\u0435 \u0431\u044b\u0442\u044c \u0441\u043e\u0432\u0441\u0435\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <em>rest<\/em> \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430. \u00a0<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0445 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0439 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0434\u0440\u0435\u0432\u043e\u0432\u0438\u0434\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0430\u0448\u0435\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435!<br \/>\u041d\u043e \u043a\u0430\u043a \u0436\u0435 \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d? ?<\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e, \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u0432 \u0444\u0430\u0439\u043b\u0435 <em>index.tsx<\/em> \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043d\u0430 \u0432 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0431\u043b\u043e\u0433\u0435 \u043d\u0430 <a href=\"https:\/\/reactjs.org\/blog\/2015\/12\/18\/react-components-elements-and-instances.html\" rel=\"noopener noreferrer nofollow\">reactjs.org<\/a>.<\/p>\n<p>\u0421 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f, \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <em>element<\/em> \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <em>App<\/em>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442:<\/p>\n<pre><code class=\"javascript\">const App = () => (   &lt;div>     &lt;header>Header&lt;\/header>     &lt;main>       &lt;h1>Page title&lt;\/h1>       &lt;p>lorem...&lt;\/p>     &lt;\/main>     &lt;footer>Footer&lt;\/footer>   &lt;\/div> );<\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0443\u0447\u0438\u0442\u044c \u043d\u0430\u0448\u0443 \u0432\u0435\u0440\u0441\u0438\u044e \u043c\u0435\u0442\u043e\u0434\u0430 <em>React.createElement<\/em> \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443:<\/p>\n<pre><code class=\"diff\">\/\/ index.tsx  const React = {   createElement: (tag, props, ...children) => { +   if (typeof tag === \"function\") { +      return tag({ ...props, children }); +    }      return {       tag,       props: {         ...props,         children,       },     };   }, };  + const App = () => ( - const element = (    &lt;div>      &lt;header>Header&lt;\/header>      &lt;main>        &lt;h1>Page title&lt;\/h1>        &lt;p>lorem...&lt;\/p>      &lt;\/main>      &lt;footer>Footer&lt;\/footer>    &lt;\/div>  );  + console.log(&lt;App \/>); - console.log(element);<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 <em>tag<\/em> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439, <em>createElement<\/em> \u0432\u0435\u0440\u043d\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0435\u0435 \u0432\u044b\u0437\u043e\u0432\u0430, \u043f\u0435\u0440\u0435\u0434\u0430\u0432 <em>props<\/em>, \u0432 \u0441\u043e\u0441\u0442\u0430\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u0432\u0445\u043e\u0434\u0438\u0442\u044c \u0438 <em>children<\/em>.<\/p>\n<p>\u042d\u0442\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b <em>React.createElement<\/em> \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 <strong><em>JSX expressions must have one parent element<\/em><\/strong>.<\/p>\n<h2>ReactDOM render<\/h2>\n<p>\u041d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 \u0444\u0430\u0439\u043b\u0435 <em>index.tsx<\/em> \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u043a\u043e\u0434\u0430.<\/p>\n<pre><code class=\"javascript\">ReactDOM.render(&lt;App \/>, document.getElementById(\"root\"));<\/code><\/pre>\n<p>\u0421\u0440\u0430\u0437\u0443 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u0443\u044e \u043e\u0448\u0438\u0431\u043a\u0443 <code>Uncaught ReferenceError: ReactDOM is not defined<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043e\u0439\u0442\u0438 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0443 \u0432\u0438\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">const ReactDOM = { \u00a0 render: (...params) => { \u00a0 \u00a0 console.log(params); \u00a0 }, };<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043f\u0440\u043e\u043f\u0430\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430 \u0438 \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0434\u0432\u0443\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041f\u0435\u0440\u0432\u044b\u0439 &#8212; \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u043e\u0435 \u043d\u0430\u043c \u0434\u0440\u0435\u0432\u043e\u0432\u0438\u0434\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u0430 \u0432\u0442\u043e\u0440\u043e\u0439 null. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 null \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e, \u0432\u0435\u0434\u044c <em>document.getElementById(&#171;root&#187;)<\/em> \u043d\u0435 \u0441\u043c\u043e\u0433 \u043d\u0430\u0439\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <em>id<\/em> \u0440\u0430\u0432\u043d\u044b\u043c <em>root<\/em>. \u0427\u0442\u043e\u0431\u044b \u0442\u0430\u043a\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 <em>index.html<\/em> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443:<\/p>\n<pre><code class=\"diff\">\/\/ index.html + &lt;div id=\"root\">&lt;\/div>   &lt;script src=\"index.tsx\" type=\"module\">&lt;\/script><\/code><\/pre>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 <em>id<\/em> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043d\u043e <em>root<\/em> \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0442\u0435\u0433\u0430. \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430\u0448\u0435 \u0434\u0435\u0440\u0435\u0432\u043e (<em>jsx<\/em> \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &#8212; \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0437\u043e\u0432\u0430 <em>App<\/em>).<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e <em>ReactDOM.render<\/em>:<\/p>\n<pre><code class=\"javascript\">const ReactDOM = {   render: (element, container) => {     if (typeof element === \"string\" || typeof element === \"number\") {       container.appendChild(document.createTextNode(String(element)));        return;     }      const { props, tag } = element;     const domElement = document.createElement(tag);      if (props.children) {       for (const child of props.children) {         ReactDOM.render(child, domElement);       }     }      for (const prop in props) {       const value = props[prop];       if (prop !== \"children\") {         domElement[prop] = value;       }     }      container.appendChild(domElement);   }, };<\/code><\/pre>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0430 \u0432 <em>ReactDOM.render<\/em> \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e:<\/p>\n<ol>\n<li>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043f\u0440\u0438\u0448\u0435\u0434\u0448\u0438\u0439 \u043a \u043d\u0430\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043e\u043c (\u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u0438\u043b\u0438 \u0447\u0438\u0441\u043b\u043e\u043c) &#8212; \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0443\u044e \u043d\u043e\u0434\u0443 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0435 \u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443. <\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">if (typeof element === \"string\" || typeof element === \"number\") {   container.appendChild(document.createTextNode(String(element)));    return; }<\/code><\/pre>\n<p>\u00a02. \u0415\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043e\u043c, \u0442\u043e \u043c\u044b \u043e\u0436\u0438\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u044f tag \u0438 props. \u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u043e\u043b\u044f tag \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c DOM \u044d\u043b\u0435\u043c\u0435\u043d\u0442.\u00a0<\/p>\n<pre><code class=\"javascript\">const { props, tag } = element; const domElement = document.createElement(tag);  if (props.children) {   for (const child of props.children) {     ReactDOM.render(child, domElement);   } }<\/code><\/pre>\n<p>\u0412 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c \u0432\u044b\u0448\u0435 \u0431\u043b\u043e\u043a\u0435, \u043c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043f\u0440\u043e\u043f\u044b <em>children<\/em>. \u0415\u0441\u043b\u0438 \u043e\u043d\u0430 \u0435\u0441\u0442\u044c &#8212; \u0442\u043e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0447\u0430\u0439\u043b\u0434\u0430 \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c <em>ReactDOM.render<\/em>, \u0433\u0434\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 DOM \u044d\u043b\u0435\u043c\u0435\u043d\u0442.<\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u0432\u0441\u0435\u0445 \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u043e\u0432 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f (\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u043e\u043c \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430).<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435, \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u043f\u043e\u0432 (\u043a\u0440\u043e\u043c\u0435 <em>children<\/em>) \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b DOM \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443.<\/p>\n<pre><code class=\"javascript\">for (const prop in props) {   const value = props[prop];   if (prop !== \"children\") {     domElement[prop.toLowerCase()] = value;   } }  container.appendChild(domElement);<\/code><\/pre>\n<p>\u0418 \u0432 \u0441\u0430\u043c\u043e\u043c \u043a\u043e\u043d\u0446\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 DOM \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440.<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 &#8212; \u043d\u0430\u0448\u0430 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430!<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b8a\/b48\/f8c\/b8ab48f8c522a36c5fc79741b1f7fb5e.png\" alt=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b ReactDOM.render\" title=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b ReactDOM.render\" width=\"1458\" height=\"420\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b8a\/b48\/f8c\/b8ab48f8c522a36c5fc79741b1f7fb5e.png\"\/><figcaption>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b ReactDOM.render<\/figcaption><\/figure>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c .html \u0444\u0430\u0439\u043b\u0438\u043a \u0438 \u043d\u0435 \u043c\u0443\u0447\u0430\u0442\u044c\u0441\u044f, \u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u0440\u0430\u0437\u0431\u043e\u0440 \u043f\u043e\u043c\u043e\u0433 \u043d\u0430\u043c \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 <em>React.createElement<\/em> \u0438 <em>ReactDOM.render<\/em>.<br \/>\u0421\u043b\u0435\u0434\u0443\u0449\u0438\u0439 \u043d\u0430 \u043e\u0447\u0435\u0440\u0435\u0434\u0438 \u0445\u0443\u043a <em>useState<\/em>, \u043d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433.<\/p>\n<h2>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e + \u0440\u0430\u0437\u043d\u043e\u0441\u0438\u043c \u043a\u043e\u0434 \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u0430\u043c<\/h2>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0430\u0437\u0434\u0435\u043b \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c, \u0435\u0441\u043b\u0438 \u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u0442\u043e\u043c, \u0447\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f React.<\/p>\n<p>\u0426\u0435\u043b\u044c \u044d\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u0434 \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u043c \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c.<\/p>\n<p>\u041e\u043f\u0438\u0448\u0435\u043c \u0442\u0438\u043f\u044b \u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b <em>types.ts<\/em>:<\/p>\n<pre><code class=\"javascript\">\/\/ types.ts export type Component&lt;T = {}> = (props: IPropsWithChildren&lt;T>) => JSX; export type ReactTag = HTMLTag | Component; type HTMLTag = keyof HTMLElementTagNameMap; export type JSX = IElement | string | number;  interface IElement {   tag: HTMLTag;   props: IPropsWithChildren; }  export type IPropsWithChildren&lt;P = {}> = P &amp; { children?: JSX[] };<\/code><\/pre>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0432\u044b\u043d\u0435\u0441\u0435\u043c \u0441\u0430\u043c\u043e\u043f\u0438\u0441\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e <em>ReactDOM<\/em> \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b:<\/p>\n<pre><code class=\"javascript\">\/\/ react-dom.ts import { JSX } from \".\/types\";  const ReactDOM = {   render: (element: JSX, container: HTMLElement): void => {     if (typeof element === \"string\" || typeof element === \"number\") {       container.appendChild(document.createTextNode(String(element)));        return;     }      const { props, tag } = element;     const domElement = document.createElement(tag);      if (props.children) {       for (const child of props.children) {         ReactDOM.render(child, domElement);       }     }      for (const prop in props) {       const value = props[prop];       if (prop !== \"children\") {         domElement[prop.toLowerCase()] = value;       }     }      container.appendChild(domElement);   } };  export default ReactDOM;<\/code><\/pre>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0434\u043b\u044f <em>React<\/em>:<\/p>\n<pre><code class=\"javascript\">\/\/ react.ts import { ReactTag, JSX, IPropsWithChildren } from \".\/types\";  const React = {   createElement: (     tag: ReactTag,     props: IPropsWithChildren,     ...children: JSX[]   ): JSX => {     if (typeof tag === \"function\") {       return tag({ ...props, children });     }      return {       tag,       props: {         ...props,         children,       },     };   } };  export default React;<\/code><\/pre>\n<p>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <em>App<\/em>:<\/p>\n<pre><code class=\"javascript\">\/\/ App.tsx import React from \".\/react\"; import { Component } from \".\/types\";  const App: Component = () => (   &lt;div>     &lt;header>Header&lt;\/header>     &lt;main>       &lt;h1>Page title&lt;\/h1>       &lt;p>lorem...&lt;\/p>     &lt;\/main>     &lt;footer>Footer&lt;\/footer>   &lt;\/div> );  export default App;<\/code><\/pre>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 <em>index.tsx<\/em> \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u0441\u044f \u0432 \u0443\u0434\u043e\u0431\u043d\u043e \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u0439 \u0444\u0430\u0439\u043b:<\/p>\n<pre><code class=\"javascript\">\/\/ index.tsx import React from \".\/react\"; import ReactDOM from \".\/react-dom\"; import App from \".\/App\";  const rootContainer = document.getElementById(\"root\"); ReactDOM.render(&lt;App \/>, rootContainer);<\/code><\/pre>\n<h2>ReactDOM rerender<\/h2>\n<p>\u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0439 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e <em>this.setState<\/em> \u0432 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0438 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043e\u0442 <em>useState<\/em> \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c UI \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0422\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0442\u0430\u043a\u0443\u044e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u0430\u043a \u043c\u0435\u0442\u043e\u0434 <em>ReactDOM<\/em>:<\/p>\n<pre><code class=\"diff\">\/\/ react-dom.tsx import { JSX } from \".\/types\"; + import React from \".\/react\"; + import App from \".\/App\";  \/\/ ...  + rerender: () => { +   const rootContainer = document.getElementById(\"root\"); +   rootContainer.removeChild(rootContainer.firstChild); +   ReactDOM.render(&lt;App \/>, rootContainer); + }<\/code><\/pre>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0432\u0441\u0451, \u0447\u0442\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 root \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435. \u0417\u0430\u0442\u0435\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c <code>&lt;App \/><\/code> \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440. <\/p>\n<p>\u2622\ufe0f \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 <em>react-dom.ts<\/em> \u043d\u0430 <em>react-dom.tsx<\/em>, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 <em>ReactDOM.render<\/em> \u043f\u0435\u0440\u0432\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 <em>JSX element<\/em>. \u0412\u0434\u043e\u0431\u0430\u0432\u043e\u043a \u043a \u044d\u0442\u043e\u043c\u0443, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c <code>import React from \".\/react\"<\/code>.<\/p>\n<p>\u041d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0448\u0430\u0433\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0441\u0442\u0435\u0439\u0442\u0443.<\/p>\n<h3>\u0421\u0430\u043c\u043e\u0434\u0435\u043b\u044c\u043d\u044b\u0439 useState<\/h3>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 <em>useState<\/em> &#8212; \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 (<em>Counter<\/em>), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d. \u0422\u0430\u043a\u0436\u0435 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0434\u0432\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0434\u043b\u044f \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u0434\u0435\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>\u041a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0445\u0443\u043a\u0430 <em>useState<\/em> \u0432 React? \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <em>Counter<\/em>:<\/p>\n<pre><code class=\"javascript\">\/\/ Counter.tsx import React from \".\/react\"; import { Component } from \".\/types\";  interface ICounterProps {   initialValue: number; }  export const Counter: Component&lt;ICounterProps> = ({ initialValue }) => {   const [value, setValue] = React.useState(initialValue);    return (     &lt;div>       &lt;h2>Counter: {value}&lt;\/h2>       &lt;div>         &lt;button onClick={() => setValue(value - 1)}>-&lt;\/button>         &lt;button onClick={() => setValue(value + 1)}>+&lt;\/button>       &lt;\/div>     &lt;\/div>   ); };<\/code><\/pre>\n<p>\u041c\u044b \u0443\u0436\u0435 \u0441 \u0412\u0430\u043c\u0438 \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u0432 \u043d\u0430\u0448\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 React \u043d\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <em>useState<\/em>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u0432\u043e\u044e \u0432\u0435\u0440\u0441\u0438\u044e.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0445\u0443\u043a\u0430, \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043c \u043f\u0440\u043e \u0432\u0430\u0436\u043d\u0443\u044e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0435\u0439\u0442\u0430. \u041e\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e <em>useState<\/em> \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0430\u043c\u0438. \u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f &#8212; \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442 <em>globalState<\/em>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0432\u0441\u0435\u0445 \u0441\u0442\u0435\u0439\u0442\u043e\u0432 + \u043a\u0443\u0440\u0441\u043e\u0440. \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u043f\u0443\u0441\u0442, \u0430 \u043a\u0443\u0440\u0441\u043e\u0440 \u0440\u0430\u0432\u0435\u043d \u043d\u0443\u043b\u044e:<\/p>\n<pre><code class=\"javascript\">\/\/ types.ts export interface IGlobalState {   states: any[];   cursor: number; }  \/\/ react.ts  import { IGlobalState, ReactTag, JSX, IPropsWithChildren } from \".\/types\";  const globalState: IGlobalState = {   states: [],   cursor: 0, };<\/code><\/pre>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a <a href=\"#useState\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 useState<\/a>, \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0437\u0430\u0447\u0435\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043a\u0443\u0440\u0441\u043e\u0440.<\/p>\n<p>\u0421 \u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f, <em>useState<\/em> &#8212; \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440: \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0436\u0435 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0435\u0439\u0442\u0430.<\/p>\n<p>\u041d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 <em>useState<\/em> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043d\u043e \u0437\u0430\u0442\u0435\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c, \u0435\u0441\u0442\u044c \u043b\u0438 \u0443\u0436\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0445\u0443\u043a\u0430 \u0432 <em>globalState<\/em>. \u0418\u043c\u0435\u043d\u043d\u043e \u043a\u0443\u0440\u0441\u043e\u0440 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0443\u0436\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u0433\u0434\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u0442\u0435\u0439\u0442\u0430. \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p><a class=\"anchor\" name=\"useState\" id=\"useState\"><\/a><\/p>\n<pre><code class=\"javascript\">\/\/ react.ts import ReactDOM from \".\/react-dom\";  \/\/ ...  useState&lt;T>(initialValue: T): [state: T, setState: (newState: T) => void] {   const currentCursor = globalState.cursor;   const state = globalState.states[currentCursor] || initialValue;   const setState = (newValue: T) => {     globalState.states[currentCursor] = newValue;      ReactDOM.rerender(globalState);   };    globalState.cursor += 1;    return [state, setState]; },<\/code><\/pre>\n<p>\u041d\u0430\u0448\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 &#8212; \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0438\u0437 <em>state<\/em> \u0438 <em>setState<\/em>. \u041d\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u0430\u0441\u0441\u0438\u0432 <em>globalState.states<\/em> \u043f\u0443\u0441\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 <em>state<\/em> \u0432\u0435\u0440\u043d\u0435\u0442\u0441\u044f <em>initialValue<\/em>.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u043c <em>globalState.cursor<\/em> \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <em>currentCursor<\/em>, \u0442.\u043a. \u0437\u0430\u0442\u0435\u043c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0443\u0440\u0441\u043e\u0440 \u0431\u0443\u0434\u0435\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d \u043d\u0430 \u0435\u0434\u0438\u043d\u0438\u0446\u0443.<\/p>\n<p>\u041c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441, \u0430 \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0441\u0431\u0440\u043e\u0441 \u043a\u0443\u0440\u0441\u043e\u0440\u0430? <\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0448\u0442\u0440\u0438\u0445. \u0412\u044b\u0437\u044b\u0432\u0430\u044f \u043c\u0435\u0442\u043e\u0434 <em>ReactDOM.rerender<\/em> \u0438\u0437 <em>setState<\/em>, \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c <em>globalState<\/em> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0442\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0443\u0440\u0441\u043e\u0440 \u043d\u0430 \u043d\u043e\u043b\u044c \u043f\u0435\u0440\u0435\u0434 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u043c.<\/p>\n<pre><code class=\"diff\">\/\/ react-dom.tsx - import { JSX } from \".\/types\"; + import { IGlobalState, JSX } from \".\/types\";  \/\/ ...  - rerender: () => { + rerender: (globalState: IGlobalState) => {     const rootContainer = document.getElementById(\"root\");     rootContainer.removeChild(rootContainer.firstChild); +   globalState.cursor = 0;     ReactDOM.render(&lt;App \/>, rootContainer);   },<\/code><\/pre>\n<p>\u0412\u044b\u0437\u043e\u0432\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Counter \u0432 \u0442\u0435\u043b\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <em>App<\/em> \u0441 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c <em>646<\/em>:<\/p>\n<pre><code class=\"diff\">\/\/ App.tsx   import React from \".\/react\";   import { Component } from \".\/types\"; + import { Counter } from \".\/Counter\";    const App: Component = () => (     &lt;div>       &lt;header>Header&lt;\/header>       &lt;main>         &lt;h1>Page title&lt;\/h1>         &lt;p>lorem...&lt;\/p> +       &lt;Counter initialValue={646} \/>       &lt;\/main>       &lt;footer>Footer&lt;\/footer>     &lt;\/div>   );    export default App;<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u0447\u0435\u0442\u0447\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 API \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 <em>react<\/em> \u0438 <em>react-dom<\/em>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/750\/4b4\/5be\/7504b45befd5e36fad48bdb58f752588.png\" alt=\"\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u043e\u043c, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0430\u043c\u043e\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e useState\" title=\"\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u043e\u043c, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0430\u043c\u043e\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e useState\" width=\"1310\" height=\"548\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/750\/4b4\/5be\/7504b45befd5e36fad48bdb58f752588.png\"\/><figcaption>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u043e\u043c, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0430\u043c\u043e\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e useState<\/figcaption><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0412\u0430\u0441 \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043b \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u0435\u0430\u043a\u0442\u0430 &#8212; \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u0432 <a href=\"https:\/\/github.com\/facebook\/react\/tree\/main\/packages\/react\" rel=\"noopener noreferrer nofollow\">\u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434<\/a>. \u0422\u0430\u043c \u0412\u044b \u043d\u0430\u0439\u0434\u0435\u0442\u0435 \u043c\u043d\u043e\u0433\u043e \u0447\u0435\u0433\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<h2>\u0412\u044b\u0432\u043e\u0434\u044b<\/h2>\n<p>\u0426\u0435\u043b\u044c\u044e \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0431\u044b\u043b\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u0430 \u0441 React. \u0411\u0443\u0434\u0443 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u0435\u043d \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438! <br \/>\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 &#8212; <a href=\"https:\/\/github.com\/SmolinPavel\/create-react\" rel=\"noopener noreferrer nofollow\">github.com\/SmolinPavel\/create-react<\/a>.<\/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\/post\/652487\/\"> https:\/\/habr.com\/ru\/post\/652487\/<\/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_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0441 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u044f\u0442 \u0432 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043c\u0435\u043b\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043f\u0430\u0437\u043b\u0430. \u0415\u0441\u043b\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u0447\u0442\u043e \u0412\u0430\u043c \u0434\u0430\u043b\u0438 \u0437\u0430\u0434\u0430\u0447\u0443 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 React \u0437\u0430 \u043f\u043e\u043b\u0447\u0430\u0441\u0430, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0412\u044b \u0431\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u043e\u0434\u0438\u043d \u0438\u0437 \u0434\u0432\u0443\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432: <\/p>\n<ul>\n<li>\n<p>\u043f\u0435\u0440\u0435\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0441\u0435 \u0442\u043e, \u0447\u0442\u043e \u0438\u0437\u043b\u043e\u0436\u0435\u043d\u043e \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 <a href=\"https:\/\/reactjs.org\" rel=\"noopener noreferrer nofollow\">reactjs.org<\/a><\/p>\n<\/li>\n<li>\n<p>\u043b\u0438\u0431\u043e \u043f\u0440\u043e\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 <a href=\"https:\/\/github.com\/facebook\/react\/blob\/main\/packages\/react\/src\/React.js\" rel=\"noopener noreferrer nofollow\">react<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u0430 \u0448\u0430\u0433\u0430, \u043d\u043e \u0435\u0441\u0442\u044c \u043b\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435?<\/p>\n<h2>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/h2>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0434\u0432\u0435 dev \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438: <\/p>\n<pre><code class=\"bash\">yarn add -D parcel typescript<\/code><\/pre>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 parcel \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 (\u043a\u0430\u043a \u0440\u0430\u0437 \u0442\u043e, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e), \u0430 typescript (\u0442\u043e\u0447\u043d\u0435\u0435 typescript<em> <\/em>compiler &#8212; <em>tsc<\/em>) \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u043b\u0435\u0433\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f jsx \u0432 js<em>.<\/em> \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0432\u0442\u043e\u0440\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/babeljs.io\/docs\/en\/#jsx-and-react\" rel=\"noopener noreferrer nofollow\">babel<\/a>, \u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f typescript \u043c\u044b \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e. \u0412\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"bash\">yarn tsc --init<\/code><\/pre>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u0440\u043e \u0444\u0430\u0439\u043b node_modules\/.bin\/tsc<\/summary>\n<div class=\"spoiler__content\">\n<p>\u041f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u043f\u0430\u043a\u0435\u0442\u043e\u0432, <em>yarn<\/em> (\u0438\u043b\u0438 <em>npm<\/em>) \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u0435\u0441\u0442\u044c \u043b\u0438 \u0443 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0444\u0430\u0439\u043b \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u043b\u0435 <a href=\"https:\/\/docs.npmjs.com\/cli\/v8\/configuring-npm\/package-json#bin\" rel=\"noopener noreferrer nofollow\">bin<\/a> \u0432 \u0444\u0430\u0439\u043b\u0435 <em>package.json<\/em>.<br \/>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u043b\u0438 typescript, \u0431\u0438\u043d\u0430\u0440\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430 \u0431\u044b\u043b\u043e \u0441\u0440\u0430\u0437\u0443 \u0434\u0432\u0430:<\/p>\n<pre><code class=\"json\">\/\/ node_modules\/typescript\/package.json \"bin\": {   \"tsc\": \".\/bin\/tsc\", \u00a0 \"tsserver\": \".\/bin\/tsserver\" }<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u0435 <em>bin<\/em> \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043e, \u0442\u043e \u043f\u0430\u043a\u0435\u0442\u043d\u044b\u0439 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Symbolic_link\" rel=\"noopener noreferrer nofollow\">symlink<\/a> (<a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%A1%D0%B8%D0%BC%D0%B2%D0%BE%D0%BB%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F_%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B0\" rel=\"noopener noreferrer nofollow\">\u0441\u0438\u043c\u0432\u043e\u043b\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0441\u044b\u043b\u043a\u0443<\/a>) \u043d\u0430 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u0438 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u0435\u0435 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <em>node_modules\/.bin<br \/><\/em>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c <em>node_modules\/.bin\/tsc<\/em> &#8212; \u044d\u0442\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0444\u0430\u0439\u043b <em>node_modules\/typescript\/bin\/tsc<\/em><br \/> \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e <em>yarn &lt;bin_name><\/em> &#8212; \u043f\u0430\u043a\u0435\u0442\u043d\u044b\u0439 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 <em>&lt;bin_name><\/em> \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <em>node_modules\/.bin<\/em> \u0438 \u0435\u0441\u043b\u0438 \u0442\u0430\u043a\u043e\u0432\u043e\u0439 \u043d\u0430\u0439\u0434\u0435\u043d, \u0442\u043e \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n<\/div>\n<\/details>\n<p>\u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0434\u043b\u044f typescript &#8212; <em>tsconfig.json<\/em>. \u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0441\u043c\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439:<\/p>\n<ol>\n<li>\n<p>\u0420\u0430\u0441\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u0443 <code>\"jsx\": \"preserve\"<\/code> &#8212; \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u043c <code>\"preserve\"<\/code> \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>\"react\"<\/code>. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u043a\u0430\u043a\u043e\u0439 \u0442\u0438\u043f <em>output<\/em> \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f <em>jsx<\/em> \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c (\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e <em>jsx<\/em> \u0432 <a href=\"#jsx\" rel=\"noopener noreferrer nofollow\">\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435<\/a>). \u0412\u0441\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/jsx.html\" rel=\"noopener noreferrer nofollow\">\u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435<\/a>.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <a href=\"https:\/\/www.typescriptlang.org\/tsconfig#strict\" rel=\"noopener noreferrer nofollow\">\u0444\u043b\u0430\u0433\u0430 &#171;strict&#187;<\/a> \u0441 <code>\"true\"<\/code> \u043d\u0430 <code>\"false\"<\/code>. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043e\u0442\u0432\u043b\u0435\u043a\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0434 \u043d\u0430\u0448\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 React.\u00a0<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 <em>tsconfig.json<\/em> \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"diff\">\/\/ tsconfig.json -    \/\/ \"jsx\": \"preserve\"  \/* Specify what JSX code is generated. *\/, +    \"jsx\": \"react\"        \/* Specify what JSX code is generated. *\/, -    \"strict\": true        \/* Enable all strict type-checking options. *\/, +    \"strict\": false       \/* Enable all strict type-checking options. *\/,<\/code><\/pre>\n<p>\u0412\u0441\u0435 \u0433\u043e\u0442\u043e\u0432\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u044b! \u0427\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043d\u0430\u0447\u0430\u0442\u044c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f <em>index.html<\/em> \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<pre><code class=\"markdown\">\/\/ index.html &lt;script src=\"index.tsx\" type=\"module\">&lt;\/script><\/code><\/pre>\n<p>\u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0432\u0435\u043d\u043d\u043e, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 <em>index.tsx<\/em>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c <code>console.log(\"hello react\");<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ index.tsx console.log(\"hello react\");<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0431\u043b\u043e\u043a \u0432 \u0444\u0430\u0439\u043b <em>package.json<\/em> \u0432 \u043a\u043e\u0440\u043d\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<pre><code class=\"json\">\/\/ package.json \"licence\": \"MIT\", \"scripts\": {   \"start\": \"parcel index.html\" },<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 <code>yarn start<\/code> \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435, \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 <em>1234<\/em> \u043f\u043e\u0440\u0442\u0443 \u043b\u043e\u043a\u0430\u043b\u0445\u043e\u0441\u0442\u0430 <a href=\"http:\/\/localhost:1234\" rel=\"noopener noreferrer nofollow\">http:\/\/localhost:1234<\/a>, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043f\u0443\u0441\u0442\u043e\u0439, \u043d\u043e \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u043e \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <em>index.tsx<\/em><\/p>\n<p><a class=\"anchor\" name=\"jsx\" id=\"jsx\"><\/a><\/p>\n<h2>JSX &amp; React Elements<\/h2>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0431\u043b\u043e\u043a\u0435 \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">const element = &lt;h1>React, what are you?&lt;\/h1>;<\/code><\/pre>\n<p>\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f React (\u0432 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u0438\u0439 \u044f\u0437\u044b\u043a <a href=\"https:\/\/github.com\/reactjs\/ru.reactjs.org\/pull\/236\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0438\u043d\u044f\u043b \u0443\u0447\u0430\u0441\u0442\u0438\u0435<\/a> \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0412\u0430\u0448 \u043f\u043e\u043a\u043e\u0440\u043d\u044b\u0439 \u0441\u043b\u0443\u0433\u0430), <a href=\"https:\/\/ru.reactjs.org\/docs\/introducing-jsx.html\" rel=\"noopener noreferrer nofollow\">\u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435<\/a> <em>JSX<\/em> \u0441 \u0444\u0440\u0430\u0437\u044b:  \u00a0<\/p>\n<blockquote>\n<p>\u042d\u0442\u043e\u0442 \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0439 \u0442\u0435\u0433\u00a0\u2014 \u043d\u0438\u00a0\u0441\u0442\u0440\u043e\u043a\u0430, \u043d\u0438\u00a0\u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 HTML<\/p>\n<\/blockquote>\n<p>?  \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u043d\u0430\u0447\u0430\u043b\u043e!<\/p>\n<p>\u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0441\u0430\u043c\u044b\u043c \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u043c \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 <a href=\"https:\/\/www.typescriptlang.org\/play\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u044b typescript<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/babeljs.io\/repl\" rel=\"noopener noreferrer nofollow\">babel<\/a> (\u0434\u043b\u044f babel \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043e\u0442\u0436\u0430\u0442\u044c \u0433\u0430\u043b\u043e\u0447\u043a\u0443 react \u0441\u043b\u0435\u0432\u0430!), \u0433\u0434\u0435 \u043d\u0430\u0448\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 <code>&lt;h1>React, what are you?&lt;\/h1><\/code> \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c.<\/p>\n<pre><code class=\"javascript\">\"use strict\";  React.createElement(\"h1\", null, \"React, what are you?\");<\/code><\/pre>\n<details class=\"spoiler\">\n<summary>\u041f\u0435\u0440\u0432\u043e\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0441 React.createElement<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0434\u0430\u043d\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c.<\/p>\n<p>\u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 &#8212; \u044d\u0442\u043e \u0442\u0435\u0433, \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 <em>h1<\/em>.<\/p>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0440\u0430\u0432\u0435\u043d <em>null<\/em>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b. \u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u0441\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u044e\u0447\u0435\u0439\/\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0443\u0442 \u0438\u043c\u0435\u043d\u0430 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432. \u0422\u0430\u043a\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u0440\u0435\u0430\u043a\u0442\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <a href=\"https:\/\/reactjs.org\/docs\/components-and-props.html\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u043e\u043f\u0441<\/a>.<\/p>\n<p>\u0422\u0440\u0435\u0442\u0438\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 &#8212; \u044d\u0442\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u0442\u0435\u0433\u0430, \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430. \u0415\u0441\u043b\u0438 \u0431\u044b \u0432\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0431\u044b\u043b\u0430 \u043d\u0435 \u0441\u0442\u0440\u043e\u043a\u0430 \u0438\u043b\u0438 \u0447\u0438\u0441\u043b\u043e, \u0430 \u0434\u0440\u0443\u0433\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430, \u0442\u043e \u043c\u044b \u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043d\u043e\u0432\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 <em>React.createElement<\/em>.  <\/p>\n<p><strong>\u0412\u0430\u0436\u043d\u043e!<\/strong> \u0415\u0441\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0433\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u043b\u043e\u0436\u0435\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u0433\u043e\u0432, \u0447\u0438\u0441\u043b\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c\u0441\u044f \u0441 \u0442\u0440\u0435\u0445 \u0434\u043e <em>n + 2<\/em>, \u0433\u0434\u0435 <em>n<\/em> &#8212; \u044d\u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0442\u0435\u0433\u043e\u0432 \u043e\u0434\u043d\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"markdown\">&lt;div> \u00a0 &lt;p>1&lt;\/p> \u00a0 &lt;p>2&lt;\/p> &lt;\/div><\/code><\/pre>\n<p>\u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0432<\/p>\n<pre><code class=\"javascript\"> React.createElement(\"div\",\u00a0null, \u00a0\u00a0\u00a0\u00a0React.createElement(\"p\",\u00a0null,\u00a0\"1\"), \u00a0\u00a0\u00a0\u00a0React.createElement(\"p\",\u00a0null,\u00a0\"2\"));<\/code><\/pre>\n<p>\u0433\u0434\u0435 \u0443 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 <em>React.createElement<\/em> \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0447\u0438\u0442\u0430\u0442\u044c <em>4<\/em> \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430.<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u0442\u0440\u0430\u043d\u0441\u043f\u0430\u0439\u043b\u0438\u043d\u0433\u0430 <code>&lt;h1>React, what are you?&lt;\/h1><\/code> \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <em>element<\/em> \u0437\u0430\u043f\u0438\u0448\u0435\u0442\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0437\u043e\u0432\u0430 <em>React.createElement<\/em> \u0441 \u0442\u0440\u0435\u043c\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438.<\/p>\n<p>\u0423\u0431\u0435\u0434\u0438\u043c\u0441\u044f \u0432 \u044d\u0442\u043e\u043c \u0441\u0430\u043c\u0438, \u0432 \u0444\u0430\u0439\u043b\u0435 <em>index.tsx<\/em> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435:<\/p>\n<pre><code class=\"javascript\">\/\/ index.tsx const element = &lt;h1>React, what are you?&lt;\/h1>; console.log(element);<\/code><\/pre>\n<p>\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 <a href=\"http:\/\/localhost:1234\/\" rel=\"noopener noreferrer nofollow\">http:\/\/localhost:1234<\/a><\/p>\n<blockquote>\n<p>Uncaught ReferenceError: React is not defined<\/p>\n<\/blockquote>\n<p>\u041e\u0448\u0438\u0431\u043a\u0430 \u0432\u044b\u0437\u0432\u0430\u043d\u0430 \u0442\u0435\u043c, \u0447\u0442\u043e TypeScript compiler \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b \u0441\u0432\u043e\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043a\u0430\u043a \u043d\u0430\u0434\u043e \u0438 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <em>element<\/em> \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043f\u0430\u0441\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b <em>React.createElement<\/em>, \u043d\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u043d\u0438\u0433\u0434\u0435 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <em>React<\/em>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0410 \u0447\u0442\u043e \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u0438?<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0412 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u0438 (\u0434\u043e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f <a href=\"https:\/\/reactjs.org\/blog\/2020\/09\/22\/introducing-the-new-jsx-transform.html\" rel=\"noopener noreferrer nofollow\">17-\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 react<\/a>) \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c <a href=\"https:\/\/www.npmjs.com\/package\/react\" rel=\"noopener noreferrer nofollow\">npm \u043f\u0430\u043a\u0435\u0442 react<\/a> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0444\u0430\u0439\u043b\u0430 <em>index.tsx <\/em>\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0438\u043c\u043f\u043e\u0440\u0442: <\/p>\n<pre><code class=\"javascript\">\/\/ index.tsx  import React from \"react\" <\/code><\/pre>\n<p>\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u044d\u0442\u043e \u0440\u0435\u0448\u0438\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 (\u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0443 \u0412\u0430\u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Modules\" rel=\"noopener noreferrer nofollow\">type=&#187;module&#187;<\/a> \u0442\u0435\u0433\u0443 <em>script<\/em> \u0432 <em>index.html<\/em>) \u0438 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u044b\u0432\u043e\u0434 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c:<\/p>\n<figure class=\"full-width\"><figcaption>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0432\u043e\u0434\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 element \u0432 \u0444\u0430\u0439\u043b\u0435 index.tsx<\/figcaption><\/figure>\n<p>\u0426\u0435\u043b\u044c\u044e \u0436\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u0431\u043e\u0440 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0440\u0435\u0430\u043a\u0442\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043f\u043e\u0439\u0434\u0435\u043c \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0443\u0442\u0435\u043c \u0438 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u0432\u043e\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e React.<\/p>\n<\/div>\n<\/details>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <em>React<\/em> \u0438 \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u043c \u0435\u0439 \u043f\u0443\u0441\u0442\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442:<\/p>\n<pre><code class=\"diff\">\/\/ index.tsx + const React = {};    const element = &lt;h1>React, what are you?&lt;\/h1>;   console.log(element);<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0448\u0438\u0431\u043a\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0439 \u0432\u0438\u0434:<\/p>\n<blockquote>\n<p>Uncaught TypeError: React.createElement is not a function<\/p>\n<\/blockquote>\n<p>\u0427\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u043f\u043e\u043b\u043d\u0435 \u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0435\u0442\u043e\u0434 <em>createElement<\/em> \u0438 \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b:<\/p>\n<pre><code class=\"javascript\">\/\/ index.tsx const React = { \u00a0 createElement: (...params) => { \u00a0 \u00a0 console.log(params); \u00a0 }, };  \/\/ ...<\/code><\/pre>\n<p>\u041e\u0448\u0438\u0431\u043a\u0430 \u043f\u043e\u0432\u0435\u0440\u0436\u0435\u043d\u0430, \u0438 \u043c\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0442\u0440\u0435\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u0432 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u043a\u0430\u043a \u0442\u0435, \u0447\u0442\u043e \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0432 <a href=\"https:\/\/www.typescriptlang.org\/play\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435 TypeScript<\/a>!<br \/>\u0427\u0442\u043e\u0431\u044b \u043b\u0443\u0447\u0448\u0435 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 <em>React.createElement<\/em> &#8212; \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443. \u0412 \u0438\u0442\u043e\u0433\u0435 \u0444\u0430\u0439\u043b <em>index.tsx<\/em> \u043f\u0440\u0438\u043c\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434:<\/p>\n<pre><code class=\"javascript\">\/\/ index.tsx const React = {   createElement: (...params) => {     console.log(params);   }, };  const element = (   &lt;div>     &lt;header>Header&lt;\/header>     &lt;main>       &lt;h1>Page title&lt;\/h1>       &lt;p>lorem...&lt;\/p>     &lt;\/main>     &lt;footer>Footer&lt;\/footer>   &lt;\/div> );  console.log(element);<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u0447\u0442\u043e \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u043a\u043e\u043d\u0441\u043e\u043b\u044c &#8212; \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443:<\/p>\n<blockquote>\n<p>[&#8216;header&#8217;, {\u2026}, &#8216;Header&#8217;]<\/p>\n<p>[&#8216;h1&#8217;, {\u2026}, &#8216;Page title&#8217;]<\/p>\n<p>[&#8216;p&#8217;, {\u2026}, &#8216;lorem&#8230;&#8217;]<\/p>\n<p>[&#8216;main&#8217;, {\u2026}, undefined, undefined]<\/p>\n<p>[&#8216;footer&#8217;, {\u2026}, &#8216;Footer&#8217;]<\/p>\n<p>[&#8216;div&#8217;, {\u2026}, undefined, undefined, undefined]<\/p>\n<\/blockquote>\n<p>\u0423 \u043d\u0435\u0438\u0441\u043a\u0443\u0448\u0435\u043d\u043d\u043e\u0433\u043e \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>\u0427\u0435\u043c \u043e\u0431\u0443\u0441\u043b\u043e\u0432\u043b\u0435\u043d \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u0437\u043e\u0432\u043e\u0432?<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u043a\u0443\u0434\u0430 \u0432\u0437\u044f\u043b\u0438\u0441\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b <em>undefined<\/em> \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0430\u0445 \u0434\u043b\u044f \u0442\u0435\u0433\u043e\u0432 <em>main<\/em> \u0438 <em>div<\/em>?<\/p>\n<\/li>\n<\/ul>\n<ol>\n<li>\n<p>\u0412\u044b\u0437\u043e\u0432\u044b <em>createElement<\/em> <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%A0%D0%B5%D0%BA%D1%83%D1%80%D1%81%D0%B8%D1%8F\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u044b<\/a>. \u0415\u0441\u043b\u0438 \u0432\u0437\u044f\u0442\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0442\u0435\u0433 <em>div<\/em>, \u0442\u043e \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 <code>React.createElement(\"header\", null, \"Header\")<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 <code>React.createElement(\"div\", \u2026);<\/code><\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0432\u044b\u0437\u043e\u0432 <em>React.createElement<\/em> (\u0438\u0437 npm \u043f\u0430\u043a\u0435\u0442\u0430 <em>react<\/em>) \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 React \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0430 \u043d\u0430\u0448\u0430 \u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u043a\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 (<em>undefined<\/em>). \u0418\u0441\u043f\u0440\u0430\u0432\u0438\u043c \u044d\u0442\u043e! ??\u200d?<\/p>\n<\/li>\n<\/ol>\n<p>\u041c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <em>createElement<\/em>, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0432\u0438\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">\/\/ index.tsx const React = {   createElement: (tag, props, ...children) => {     return {       tag,       props: {         ...props,         children,       },     };   }, };  \/\/ ...<\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0430\u043a\u0442\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043a\u0430\u043a \u043f\u0440\u043e\u043f <em>children<\/em>. \u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u043d\u043e\u0433\u043e, \u0430 \u043c\u043e\u0436\u0435\u0442 \u0438 \u043d\u0435 \u0431\u044b\u0442\u044c \u0441\u043e\u0432\u0441\u0435\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <em>rest<\/em> \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430. \u00a0<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0445 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0439 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0434\u0440\u0435\u0432\u043e\u0432\u0438\u0434\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0430\u0448\u0435\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435!<br \/>\u041d\u043e \u043a\u0430\u043a \u0436\u0435 \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d? ?<\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e, \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u0432 \u0444\u0430\u0439\u043b\u0435 <em>index.tsx<\/em> \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043d\u0430 \u0432 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0431\u043b\u043e\u0433\u0435 \u043d\u0430 <a href=\"https:\/\/reactjs.org\/blog\/2015\/12\/18\/react-components-elements-and-instances.html\" rel=\"noopener noreferrer nofollow\">reactjs.org<\/a>.<\/p>\n<p>\u0421 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f, \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <em>element<\/em> \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <em>App<\/em>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442:<\/p>\n<pre><code class=\"javascript\">const App = () => (   &lt;div>     &lt;header>Header&lt;\/header>     &lt;main>       &lt;h1>Page title&lt;\/h1>       &lt;p>lorem...&lt;\/p>     &lt;\/main>     &lt;footer>Footer&lt;\/footer>   &lt;\/div> );<\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0443\u0447\u0438\u0442\u044c \u043d\u0430\u0448\u0443 \u0432\u0435\u0440\u0441\u0438\u044e \u043c\u0435\u0442\u043e\u0434\u0430 <em>React.createElement<\/em> \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443:<\/p>\n<pre><code class=\"diff\">\/\/ index.tsx  const React = {   createElement: (tag, props, ...children) => { +   if (typeof tag === \"function\") { +      return tag({ ...props, children }); +    }      return {       tag,       props: {         ...props,         children,       },     };   }, };  + const App = () => ( - const element = (    &lt;div>      &lt;header>Header&lt;\/header>      &lt;main>        &lt;h1>Page title&lt;\/h1>        &lt;p>lorem...&lt;\/p>      &lt;\/main>      &lt;footer>Footer&lt;\/footer>    &lt;\/div>  );  + console.log(&lt;App \/>); - console.log(element);<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 <em>tag<\/em> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439, <em>createElement<\/em> \u0432\u0435\u0440\u043d\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0435\u0435 \u0432\u044b\u0437\u043e\u0432\u0430, \u043f\u0435\u0440\u0435\u0434\u0430\u0432 <em>pr<\/em><\/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-329854","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/329854","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=329854"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/329854\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=329854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=329854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=329854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}