{"id":81,"date":"2025-04-29T21:42:59","date_gmt":"2025-04-29T21:42:59","guid":{"rendered":"https:\/\/praktikant.thkit.ee\/reactjs\/?page_id=81"},"modified":"2025-05-02T11:56:10","modified_gmt":"2025-05-02T11:56:10","slug":"%d0%bf%d1%80%d0%b8%d0%bc%d0%b5%d1%80","status":"publish","type":"page","link":"https:\/\/praktikant.thkit.ee\/reactjs\/ru\/%d0%bf%d1%80%d0%b8%d0%bc%d0%b5%d1%80\/","title":{"rendered":"\u041f\u0440\u0438\u043c\u0435\u0440"},"content":{"rendered":"\n

\u0417\u0434\u0435\u0441\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f React \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

\u041a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u0441\u043d\u0438\u043c\u043a\u0435 \u044d\u043a\u0440\u0430\u043d\u0430, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 «src\/App.js».<\/p>\n\n\n\n

App.js<\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>logo<\/span> <\/span>from<\/span> <\/span>'.\/logo.svg'<\/span>;<\/span><\/span>\nimport<\/span> <\/span>'.\/App.css'<\/span>;<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>App<\/span>() {<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <<\/span>div<\/span> <\/span>className<\/span>=<\/span>"App"<\/span>><\/span><\/span>\n      <<\/span>header<\/span> <\/span>className<\/span>=<\/span>"App-header"<\/span>><\/span><\/span>\n        <<\/span>img<\/span> <\/span>src<\/span>=<\/span>{<\/span>logo<\/span>} <\/span>className<\/span>=<\/span>"App-logo"<\/span> <\/span>alt<\/span>=<\/span>"logo"<\/span> \/><\/span><\/span>\n        <<\/span>p<\/span>><\/span><\/span>\n          Edit <<\/span>code<\/span>>src\/App.js<\/<\/span>code<\/span>> and save to reload.<\/span><\/span>\n        <\/<\/span>p<\/span>><\/span><\/span>\n        <<\/span>a<\/span><\/span>\n          <\/span>className<\/span>=<\/span>"App-link"<\/span><\/span>\n          <\/span>href<\/span>=<\/span>"https:\/\/reactjs.org"<\/span><\/span>\n          <\/span>target<\/span>=<\/span>"_blank"<\/span><\/span>\n          <\/span>rel<\/span>=<\/span>"noopener noreferrer"<\/span><\/span>\n        ><\/span><\/span>\n          Learn React<\/span><\/span>\n        <\/<\/span>a<\/span>><\/span><\/span>\n      <\/<\/span>header<\/span>><\/span><\/span>\n    <\/<\/span>div<\/span>><\/span><\/span>\n  );<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> <\/span>App<\/span>;<\/span>JavaScript<\/span><\/span><\/code><\/pre>JavaScript<\/span><\/div>\n\n\n\n
\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/em><\/strong><\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
\u041c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u0432 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Reach.<\/p>\n\n\n\n
App.js<\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>logo<\/span> <\/span>from<\/span> <\/span>'.\/logo.svg'<\/span>;<\/span><\/span>\nimport<\/span> <\/span>'.\/App.css'<\/span>;<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>App<\/span>() {<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <<\/span>div<\/span> <\/span>className<\/span>=<\/span>"App"<\/span>><\/span><\/span>\n      <<\/span>header<\/span> <\/span>className<\/span>=<\/span>"App-header"<\/span>><\/span><\/span>\n        <<\/span>button<\/span>>I'm a simple button with react component<\/<\/span>button<\/span>><\/span><\/span>\n        <<\/span>img<\/span> <\/span>src<\/span>=<\/span>{<\/span>logo<\/span>} <\/span>className<\/span>=<\/span>"App-logo"<\/span> <\/span>alt<\/span>=<\/span>"logo"<\/span> \/><\/span><\/span>\n        <<\/span>p<\/span>><\/span><\/span>\n          Edit <<\/span>code<\/span>>src\/App.js<\/<\/span>code<\/span>> and save to reload.<\/span><\/span>\n        <\/<\/span>p<\/span>><\/span><\/span>\n        <<\/span>a<\/span><\/span>\n          <\/span>className<\/span>=<\/span>"App-link"<\/span><\/span>\n          <\/span>href<\/span>=<\/span>"https:\/\/reactjs.org"<\/span><\/span>\n          <\/span>target<\/span>=<\/span>"_blank"<\/span><\/span>\n          <\/span>rel<\/span>=<\/span>"noopener noreferrer"<\/span><\/span>\n        ><\/span><\/span>\n          Learn React<\/span><\/span>\n        <\/<\/span>a<\/span>><\/span><\/span>\n      <\/<\/span>header<\/span>><\/span><\/span>\n    <\/<\/span>div<\/span>><\/span><\/span>\n  );<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> <\/span>App<\/span>;<\/span><\/span><\/code><\/pre>JavaScript<\/span><\/div>\n\n\n\n
\u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043e\u0442\u043a\u0440\u044b\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u043d\u0430\u0448\u0443 \u043d\u043e\u0432\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443.<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 React.<\/p>\n\n\n\n
App.js<\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>logo<\/span> <\/span>from<\/span> <\/span>'.\/logo.svg'<\/span>;<\/span><\/span>\nimport<\/span> <\/span>'.\/App.css'<\/span>;<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>ButtonReachComponent<\/span>() {<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n      <<\/span>button<\/span>>I'm a simple button with react component<\/<\/span>button<\/span>><\/span><\/span>\n  )<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>App<\/span>() {<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <<\/span>div<\/span> <\/span>className<\/span>=<\/span>"App"<\/span>><\/span><\/span>\n      <<\/span>header<\/span> <\/span>className<\/span>=<\/span>"App-header"<\/span>><\/span><\/span>\n        <<\/span>ButtonReachComponent<\/span>\/><\/span><\/span>\n        <<\/span>img<\/span> <\/span>src<\/span>=<\/span>{<\/span>logo<\/span>} <\/span>className<\/span>=<\/span>"App-logo"<\/span> <\/span>alt<\/span>=<\/span>"logo"<\/span> \/><\/span><\/span>\n        <<\/span>p<\/span>><\/span><\/span>\n          Edit <<\/span>code<\/span>>src\/App.js<\/<\/span>code<\/span>> and save to reload.<\/span><\/span>\n        <\/<\/span>p<\/span>><\/span><\/span>\n        <<\/span>a<\/span><\/span>\n          <\/span>className<\/span>=<\/span>"App-link"<\/span><\/span>\n          <\/span>href<\/span>=<\/span>"https:\/\/reactjs.org"<\/span><\/span>\n          <\/span>target<\/span>=<\/span>"_blank"<\/span><\/span>\n          <\/span>rel<\/span>=<\/span>"noopener noreferrer"<\/span><\/span>\n        ><\/span><\/span>\n          Learn React<\/span><\/span>\n        <\/<\/span>a<\/span>><\/span><\/span>\n      <\/<\/span>header<\/span>><\/span><\/span>\n    <\/<\/span>div<\/span>><\/span><\/span>\n  );<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> <\/span>App<\/span>;<\/span>JavaScript<\/span><\/span><\/code><\/pre>JavaScript<\/span><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u043a\u043d\u043e\u043f\u043e\u043a, \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043a \u043d\u0435\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0431\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f +1 \u043e\u0447\u043a\u043e.<\/p>\n\n\n\n
App.js<\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>logo<\/span> <\/span>from<\/span> <\/span>'.\/logo.svg'<\/span>;<\/span><\/span>\nimport<\/span> <\/span>'.\/App.css'<\/span>;<\/span><\/span>\n\/\/ useState is a React Hook, that lets you add a state variable to your component.<\/span><\/span>\nimport<\/span> { <\/span>useState<\/span> } <\/span>from<\/span> <\/span>'react'<\/span>;<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>ButtonCounter<\/span>() {<\/span><\/span>\n  <\/span>const<\/span> [<\/span>count<\/span>, <\/span>setCount<\/span>] <\/span>=<\/span> <\/span>useState<\/span>(<\/span>0<\/span>);<\/span><\/span>\n<\/span>\n  <\/span>function<\/span> <\/span>handleClick<\/span>() {<\/span><\/span>\n    <\/span>setCount<\/span>(<\/span>count<\/span> <\/span>+<\/span> <\/span>1<\/span>);<\/span><\/span>\n  }<\/span><\/span>\n<\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n      <<\/span>button<\/span> <\/span>onClick<\/span>=<\/span>{<\/span>handleClick<\/span>}><\/span><\/span>\n        Clicked {<\/span>count<\/span>} times<\/span><\/span>\n      <\/<\/span>button<\/span>><\/span><\/span>\n  );<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>App<\/span>() {<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <<\/span>div<\/span> <\/span>className<\/span>=<\/span>"App"<\/span>><\/span><\/span>\n      <<\/span>header<\/span> <\/span>className<\/span>=<\/span>"App-header"<\/span>><\/span><\/span>\n        <<\/span>ButtonCounter<\/span> \/><\/span><\/span>\n        <<\/span>img<\/span> <\/span>src<\/span>=<\/span>{<\/span>logo<\/span>} <\/span>className<\/span>=<\/span>"App-logo"<\/span> <\/span>alt<\/span>=<\/span>"logo"<\/span> \/><\/span><\/span>\n        <<\/span>p<\/span>><\/span><\/span>\n          Edit <<\/span>code<\/span>>src\/App.js<\/<\/span>code<\/span>> and save to reload.<\/span><\/span>\n        <\/<\/span>p<\/span>><\/span><\/span>\n        <<\/span>a<\/span><\/span>\n          <\/span>className<\/span>=<\/span>"App-link"<\/span><\/span>\n          <\/span>href<\/span>=<\/span>"https:\/\/reactjs.org"<\/span><\/span>\n          <\/span>target<\/span>=<\/span>"_blank"<\/span><\/span>\n          <\/span>rel<\/span>=<\/span>"noopener noreferrer"<\/span><\/span>\n        ><\/span><\/span>\n          Learn React<\/span><\/span>\n        <\/<\/span>a<\/span>><\/span><\/span>\n      <\/<\/span>header<\/span>><\/span><\/span>\n    <\/<\/span>div<\/span>><\/span><\/span>\n  );<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> <\/span>App<\/span>;<\/span><\/span><\/code><\/pre>JavaScript<\/span><\/div>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
\u0417\u0434\u0435\u0441\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f React \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u0441\u043d\u0438\u043c\u043a\u0435 \u044d\u043a\u0440\u0430\u043d\u0430, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 «src\/App.js». \u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u041c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u0432 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Reach. \u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043e\u0442\u043a\u0440\u044b\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u043d\u0430\u0448\u0443 \u043d\u043e\u0432\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 React. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u043a\u043d\u043e\u043f\u043e\u043a, \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 … \u0427\u0438\u0442\u0430\u0442\u044c \u0434\u0430\u043b\u0435\u0435<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-81","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/praktikant.thkit.ee\/reactjs\/ru\/wp-json\/wp\/v2\/pages\/81","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/praktikant.thkit.ee\/reactjs\/ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/praktikant.thkit.ee\/reactjs\/ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/praktikant.thkit.ee\/reactjs\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/praktikant.thkit.ee\/reactjs\/ru\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":1,"href":"https:\/\/praktikant.thkit.ee\/reactjs\/ru\/wp-json\/wp\/v2\/pages\/81\/revisions"}],"predecessor-version":[{"id":97,"href":"https:\/\/praktikant.thkit.ee\/reactjs\/ru\/wp-json\/wp\/v2\/pages\/81\/revisions\/97"}],"wp:attachment":[{"href":"https:\/\/praktikant.thkit.ee\/reactjs\/ru\/wp-json\/wp\/v2\/media?parent=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}