{"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-04-29T21:42:59","modified_gmt":"2025-04-29T21:42:59","slug":"example","status":"publish","type":"page","link":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/example\/","title":{"rendered":"Example"},"content":{"rendered":"\n

Here we have default template react app.<\/p>\n\n\n

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

As shown in the screenshot, you can edit App ui in \u201csrc\/App.js\u201d.<\/p>\n\n\n\n

App.js<\/span><\/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
A imagery example <\/em><\/strong><\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
We added a simple a button to our Reach app<\/p>\n\n\n\n
App.js<\/span><\/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
After saving opening the browser, we can see our new button.<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Let\u2019s add a simple button in react component.<\/p>\n\n\n\n
App.js<\/span><\/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
Let’s create a button counter every time it’s been pressed add’s +1 point to it.<\/p>\n\n\n\n
App.js<\/span><\/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":"
Here we have default template react app. As shown in the screenshot, you can edit App ui in \u201csrc\/App.js\u201d. A imagery example We added a simple a button to our Reach app After saving opening the browser, we can see our new button. Let\u2019s add a simple button in react component. Let’s create a button … Read more<\/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\/en\/wp-json\/wp\/v2\/pages\/81","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":1,"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/pages\/81\/revisions"}],"predecessor-version":[{"id":111,"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/pages\/81\/revisions\/111"}],"wp:attachment":[{"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/media?parent=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}