JavaScript expressions can be used.<\/li>\n<\/ul>\nBasic Syntax of JSX<\/h3>\n
\n The basic syntax of JSX is as follows. JSX code defines elements in the form of ``, and JavaScript expressions can be inserted using curly braces `{}`.
\n <\/tagname><\/p>\n<h1>Hello, JSX!<\/h1>\n<p>JSX is a fundamental element of React.<\/p><\/code><\/pre>\nUsing JavaScript Expressions<\/h3>\n
\n JavaScript expressions can be used within JSX, wrapped in curly braces. For example, you can use variables in JSX:\n <\/p>\n
const name = \"React\";\n<h1>Hello, {name}!<\/h1><\/code><\/pre>\nAdvantages of JSX<\/h2>\n
\n The main advantages of using JSX are as follows:\n <\/p>\n
\n- Readability:<\/strong> Thanks to the HTML-like syntax, it is intuitive to understand the UI structure.<\/li>\n
- Easy Debugging:<\/strong> JSX can be easily debugged through logs in developer tools.<\/li>\n
- Component-Based:<\/strong> Each UI can be separated into components, enhancing reuse and maintainability.<\/li>\n<\/ul>\n
Properties of JSX Expressions<\/h2>\n
\n When adding properties to JSX elements, camelCase notation should be used. For example, the HTML `class` attribute is used as `className` in JSX:\n <\/p>\n
<div className=\"container\">Content<\/div><\/code><\/pre>\nHandling Events<\/h3>\n
\n When handling events in JSX, you add properties using JavaScript notation. For example, handling a click event can be done as follows:\n <\/p>\n
<button onClick={handleClick}>Click me!<\/button><\/code><\/pre>\nPrecautions When Using JSX<\/h2>\n
\n There are a few precautions to take when using JSX:\n <\/p>\n
\n- JSX code must have a single root element.<\/li>\n
- Comments must use curly braces and the `\/* … *\/` syntax.<\/li>\n
- When using HTML special characters, they must be escaped. For example: `<` translates to `<`.<\/li>\n<\/ul>\n
Conditional Rendering<\/h3>\n
\n Conditional rendering within JSX can be done in several ways. The most common method is to use a ternary operator:\n <\/p>\n
{isLoggedIn ? <LogoutButton \/> : <LoginButton \/>}<\/code><\/pre>\nRendering Lists<\/h3>\n
\n When rendering elements of an array as a list, the `map()` method can be used. Each element requires a unique key property:\n <\/p>\n
const items = [\"Apple\", \"Banana\", \"Orange\"];\nconst itemList = items.map(item => <li key={item}>{item}<\/li>);<\/code><\/pre>\nAdvanced JSX Techniques<\/h2>\nUsing Fragments<\/h3>\n
\n When grouping multiple elements, you can use Fragments. Fragments group multiple elements without creating additional DOM nodes:\n <\/p>\n
<React.Fragment>\n <h1>Title<\/h1>\n <p>Content<\/p>\n<\/React.Fragment><\/code><\/pre>\nStyling<\/h3>\n
\n When applying inline styles in JSX, styles must be defined in object form:\n <\/p>\n
<div style={{ color: 'blue', fontSize: '20px' }}>Styled Text<\/div><\/code><\/pre>\nConclusion<\/h2>\n
\n JSX is a very important part of React development, enhancing the efficiency and readability of writing React components. In this course, we thoroughly examined the basics to advanced concepts of JSX and encourage you to experience it through practical applications. We hope to see you develop more intuitive and powerful web applications through the synergy of React and JSX.\n <\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"
JSX stands for JavaScript XML, and it is a syntax that combines JavaScript code and HTML. In React, JSX is primarily used to define components and provides a very intuitive and powerful way to write UIs. In this course, we will delve deeply into the basic concepts of JSX to advanced techniques. The Basic Concepts … \ub354 \ubcf4\uae30 “React Course: JSX”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[123],"tags":[],"class_list":["post-32815","post","type-post","status-publish","format-standard","hentry","category-react-basics-course"],"yoast_head":"\nReact Course: JSX - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/atmokpo.com\/w\/32815\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Course: JSX - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"JSX stands for JavaScript XML, and it is a syntax that combines JavaScript code and HTML. In React, JSX is primarily used to define components and provides a very intuitive and powerful way to write UIs. In this course, we will delve deeply into the basic concepts of JSX to advanced techniques. The Basic Concepts … \ub354 \ubcf4\uae30 "React Course: JSX"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/32815\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:11:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:21:52+00:00\" \/>\n<meta name=\"author\" content=\"root\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:site\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:label1\" content=\"\uae00\uc4f4\uc774\" \/>\n\t<meta name=\"twitter:data1\" content=\"root\" \/>\n\t<meta name=\"twitter:label2\" content=\"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04\" \/>\n\t<meta name=\"twitter:data2\" content=\"3\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/32815\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32815\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"React Course: JSX\",\"datePublished\":\"2024-11-01T09:11:45+00:00\",\"dateModified\":\"2024-11-01T11:21:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32815\/\"},\"wordCount\":424,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"React basics course\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/32815\/\",\"url\":\"https:\/\/atmokpo.com\/w\/32815\/\",\"name\":\"React Course: JSX - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:11:45+00:00\",\"dateModified\":\"2024-11-01T11:21:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32815\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/32815\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/32815\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Course: JSX\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atmokpo.com\/w\/#website\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/atmokpo.com\/w\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"contentUrl\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"width\":400,\"height\":400,\"caption\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\"},\"image\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/bebubo4\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\",\"name\":\"root\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"caption\":\"root\"},\"sameAs\":[\"http:\/\/atmokpo.com\/w\"],\"url\":\"https:\/\/atmokpo.com\/w\/author\/root\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Course: JSX - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/atmokpo.com\/w\/32815\/","og_locale":"ko_KR","og_type":"article","og_title":"React Course: JSX - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"JSX stands for JavaScript XML, and it is a syntax that combines JavaScript code and HTML. In React, JSX is primarily used to define components and provides a very intuitive and powerful way to write UIs. In this course, we will delve deeply into the basic concepts of JSX to advanced techniques. The Basic Concepts … \ub354 \ubcf4\uae30 \"React Course: JSX\"","og_url":"https:\/\/atmokpo.com\/w\/32815\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:11:45+00:00","article_modified_time":"2024-11-01T11:21:52+00:00","author":"root","twitter_card":"summary_large_image","twitter_creator":"@bebubo4","twitter_site":"@bebubo4","twitter_misc":{"\uae00\uc4f4\uc774":"root","\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04":"3\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/32815\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/32815\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"React Course: JSX","datePublished":"2024-11-01T09:11:45+00:00","dateModified":"2024-11-01T11:21:52+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/32815\/"},"wordCount":424,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["React basics course"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/32815\/","url":"https:\/\/atmokpo.com\/w\/32815\/","name":"React Course: JSX - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:11:45+00:00","dateModified":"2024-11-01T11:21:52+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/32815\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/32815\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/32815\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"React Course: JSX"}]},{"@type":"WebSite","@id":"https:\/\/atmokpo.com\/w\/#website","url":"https:\/\/atmokpo.com\/w\/","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","description":"","publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/atmokpo.com\/w\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/atmokpo.com\/w\/#organization","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","url":"https:\/\/atmokpo.com\/w\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/","url":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","contentUrl":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","width":400,"height":400,"caption":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8"},"image":{"@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/bebubo4"]},{"@type":"Person","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7","name":"root","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","caption":"root"},"sameAs":["http:\/\/atmokpo.com\/w"],"url":"https:\/\/atmokpo.com\/w\/author\/root\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32815","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/comments?post=32815"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32815\/revisions"}],"predecessor-version":[{"id":32816,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32815\/revisions\/32816"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=32815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=32815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=32815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}