{"id":18,"date":"2024-02-17T01:42:13","date_gmt":"2024-02-17T01:42:13","guid":{"rendered":"https:\/\/courses.usnh.domains\/cms\/?p=18"},"modified":"2024-02-17T23:17:47","modified_gmt":"2024-02-17T23:17:47","slug":"jsx","status":"publish","type":"post","link":"https:\/\/courses.usnh.domains\/cms\/it-612\/jsx\/","title":{"rendered":"JSX"},"content":{"rendered":"\n

Writing markup with JSX<\/h2>\n\n\n\n

The markup syntax you\u2019ve seen above is called JSX<\/em>. It is optional, but most React projects use JSX for its convenience. All of the tools we recommend for local development<\/a> support JSX out of the box.<\/p>\n\n\n\n

JSX is stricter than HTML. You have to close tags like <br \/><\/code>. Your component also can\u2019t return multiple JSX tags. You have to wrap them into a shared parent, like a <div>...<\/div><\/code> or an empty <>...<\/><\/code> wrapper:<\/p>\n\n\n\n

functionAboutPage(){
return(
<>
<h1>About<\/h1>
<p>Hello there.<br\/>How do you do?<\/p>
<\/>
);
}<\/code><\/pre>\n\n\n\n
If you have a lot of HTML to port to JSX, you can use an online converter.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Writing markup with JSX The markup syntax you\u2019ve seen above is called JSX. It is optional, but most React projects use JSX for its convenience. All of the tools we recommend for local development support JSX out of the box. JSX is stricter than HTML. You have to close tags like <br \/>. Your component […]<\/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-18","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\/18","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=18"}],"version-history":[{"count":1,"href":"https:\/\/courses.usnh.domains\/cms\/wp-json\/wp\/v2\/posts\/18\/revisions"}],"predecessor-version":[{"id":19,"href":"https:\/\/courses.usnh.domains\/cms\/wp-json\/wp\/v2\/posts\/18\/revisions\/19"}],"wp:attachment":[{"href":"https:\/\/courses.usnh.domains\/cms\/wp-json\/wp\/v2\/media?parent=18"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.usnh.domains\/cms\/wp-json\/wp\/v2\/categories?post=18"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.usnh.domains\/cms\/wp-json\/wp\/v2\/tags?post=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}