{"id":14,"date":"2024-02-16T22:42:39","date_gmt":"2024-02-16T22:42:39","guid":{"rendered":"http:\/\/courses.usnh.domains\/cms\/?p=14"},"modified":"2024-02-17T23:18:09","modified_gmt":"2024-02-17T23:18:09","slug":"components","status":"publish","type":"post","link":"https:\/\/courses.usnh.domains\/cms\/it-612\/components\/","title":{"rendered":"Components"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">React apps are made out of <em>components<\/em>. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React components are JavaScript functions that return markup:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>functionMyButton(){<br>return(<br>&lt;button&gt;I'm a button&lt;\/button&gt;<br>);<br>}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now that you\u2019ve declared <code>MyButton<\/code>, you can nest it into another component:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>exportdefaultfunctionMyApp(){<br>return(<br>&lt;div&gt;<br>&lt;h1&gt;Welcome to my app&lt;\/h1&gt;<br>&lt;MyButton\/&gt;<br>&lt;\/div&gt;<br>);<br>}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Notice that <code>&lt;MyButton \/&gt;<\/code> starts with a capital letter. That\u2019s how you know it\u2019s a React component. React component names must always start with a capital letter, while HTML tags must be lowercase.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Have a look at the result:<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page. React components are JavaScript functions that return markup: Now that you\u2019ve declared MyButton, you can [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,5],"tags":[8],"class_list":["post-14","post","type-post","status-publish","format-standard","hentry","category-it-612","category-react","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/courses.usnh.domains\/cms\/wp-json\/wp\/v2\/posts\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/courses.usnh.domains\/cms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.usnh.domains\/cms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.usnh.domains\/cms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.usnh.domains\/cms\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":2,"href":"https:\/\/courses.usnh.domains\/cms\/wp-json\/wp\/v2\/posts\/14\/revisions"}],"predecessor-version":[{"id":17,"href":"https:\/\/courses.usnh.domains\/cms\/wp-json\/wp\/v2\/posts\/14\/revisions\/17"}],"wp:attachment":[{"href":"https:\/\/courses.usnh.domains\/cms\/wp-json\/wp\/v2\/media?parent=14"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.usnh.domains\/cms\/wp-json\/wp\/v2\/categories?post=14"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.usnh.domains\/cms\/wp-json\/wp\/v2\/tags?post=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}