{"id":21,"date":"2026-07-03T22:56:40","date_gmt":"2026-07-03T22:56:40","guid":{"rendered":"https:\/\/www.kindsonthegenius.com\/react\/2026\/07\/03\/03-react-jsx-and-components\/"},"modified":"2026-07-04T10:14:09","modified_gmt":"2026-07-04T10:14:09","slug":"03-react-jsx-and-components","status":"publish","type":"post","link":"https:\/\/www.kindsonthegenius.com\/react\/03-react-jsx-and-components\/","title":{"rendered":"React JSX and Components \u2014 Build Your First UI"},"content":{"rendered":"<p><!-- ktg-updated-banner --><\/p>\n<div class=\"ktg-updated-banner\" style=\"margin:0 0 1.25em;padding:0.75em 1em;background:#fefce8;border-left:4px solid #ca8a04;border-radius:4px;\">\n<p><strong>Updated July 4, 2026.<\/strong> Refreshed for React 19 and current SEO best practices.<\/p>\n<\/div>\n<p><!-- ktg-series-toc --><\/p>\n<nav class=\"ktg-series-toc\" aria-label=\"React tutorial table of contents\" style=\"margin:1.5em 0;padding:1em 1.25em;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;\">\n<h2>Table of Contents<\/h2>\n<p>Follow the React tutorial series in order:<\/p>\n<ol>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/react\/01-react-introduction\/\">Lesson 1: React Tutorial \u2014 Introduction (2026)<\/a><\/li>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/react\/02-react-setup\/\">Lesson 2: React Setup \u2014 Create Your First App with Vite<\/a><\/li>\n<li><strong aria-current=\"page\">Lesson 3: React JSX and Components \u2014 Build Your First UI<\/strong><\/li>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/react\/04-react-state-usestate\/\">Lesson 4: React State and useState \u2014 Interactive UI (React 19+)<\/a><\/li>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/react\/05-react-useeffect\/\">Lesson 5: React useEffect \u2014 Side Effects and Data Fetching (React 19+)<\/a><\/li>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/react\/06-react-forms\/\">Lesson 6: React Forms \u2014 Controlled Inputs and Validation (React 19+)<\/a><\/li>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/react\/07-react-router\/\">Lesson 7: React Router \u2014 Multi-Page Navigation (React 19+)<\/a><\/li>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/react\/\">\u2190 Back to React Tutorial hub<\/a><\/li>\n<\/ol>\n<\/nav>\n<p><!-- ktg-react-modern --><\/p>\n<div class=\"ktg-react-modern\" style=\"margin:1.5em 0;padding:1em;background:#eff6ff;border-left:4px solid #2563eb;border-radius:4px;\">\n<h4>React 19 Notes<\/h4>\n<p>React 19 uses the automatic JSX runtime \u2014 write components as plain functions returning JSX. Use <code>Fragment<\/code> (<code>&lt;&gt;...&lt;\/&gt;<\/code>) to group elements without extra DOM nodes. Props are read-only; state and hooks come in later lessons.<\/p>\n<\/div>\n<p>This lesson covers <strong>React JSX and components<\/strong> \u2014 the core skills for building any React interface. You will learn JSX rules, write functional components, pass props, render conditionally, and combine everything in a small Greeting Card example.<\/p>\n<p><strong>Prerequisites:<\/strong> Lessons 1\u20132 (<a href=\"https:\/\/www.kindsonthegenius.com\/react\/01-react-introduction\/\">Introduction<\/a>, <a href=\"https:\/\/www.kindsonthegenius.com\/react\/02-react-setup\/\">Setup<\/a>) with a Vite React project running locally. <strong>Estimated time:<\/strong> 45\u201355 minutes.<\/p>\n<h4 id=\"what-is-jsx\">1. What Is JSX?<\/h4>\n<p><strong>JSX<\/strong> (JavaScript XML) lets you write HTML-like markup inside JavaScript. React compiles JSX into <code>React.createElement<\/code> calls (or equivalent) that describe UI structure.<\/p>\n<p>Example:<\/p>\n<pre><code class=\"language-jsx\">const element = &lt;h1 className=\"title\"&gt;Hello, JSX&lt;\/h1&gt;;\n<\/code><\/pre>\n<p>Important JSX rules:<\/p>\n<ul>\n<li>Use <code>className<\/code> instead of <code>class<\/code> (since <code>class<\/code> is a JavaScript keyword)<\/li>\n<li>Self-closing tags must end with <code>\/&gt;<\/code> \u2014 e.g. <code>&lt;img \/&gt;<\/code>, <code>&lt;br \/&gt;<\/code><\/li>\n<li>Return a <strong>single parent element<\/strong>, or use a Fragment (<code>&lt;&gt;...&lt;\/&gt;<\/code>)<\/li>\n<li>Embed JavaScript expressions inside curly braces: <code>{userName}<\/code>, <code>{2 + 2}<\/code><\/li>\n<li>Comments inside JSX: <code>{\/* comment *\/}<\/code><\/li>\n<\/ul>\n<figure style=\"margin:1.5em 0;text-align:center;\"><img decoding=\"async\" src=\"https:\/\/www.kindsonthegenius.com\/react\/wp-content\/uploads\/2026\/07\/03-react-jsx-and-components-section-1-1.jpg\" alt=\"React component-based user interface\" width=\"1200\" height=\"675\" loading=\"lazy\" style=\"max-width:100%;height:auto;border-radius:8px;border:1px solid #dee2e6;\" \/><figcaption style=\"font-size:0.85em;color:#666;margin-top:0.5em;\">Photo by <a href=\"https:\/\/unsplash.com\/@lautaroandreani?utm_source=kindsonthegenius&#038;utm_medium=referral\" rel=\"noopener noreferrer\" target=\"_blank\">Lautaro Andreani<\/a> on <a href=\"https:\/\/unsplash.com\/?utm_source=kindsonthegenius&#038;utm_medium=referral\" rel=\"noopener noreferrer\" target=\"_blank\">Unsplash<\/a><\/figcaption><\/figure>\n<h4 id=\"functional-components\">2. Functional Components<\/h4>\n<p>A <strong>component<\/strong> is a reusable function (or class) that returns JSX. Modern React uses <strong>function components<\/strong> almost exclusively:<\/p>\n<pre><code class=\"language-jsx\">function Welcome() {\n  return &lt;h2&gt;Welcome to the React tutorial&lt;\/h2&gt;;\n}\n\nexport default Welcome;\n<\/code><\/pre>\n<p>Use a component like an HTML tag: <code>&lt;Welcome \/&gt;<\/code>. Compose small components into larger ones \u2014 this is how React apps scale without spaghetti DOM code.<\/p>\n<p>File naming convention: PascalCase for components (<code>GreetingCard.jsx<\/code>), camelCase for utilities (<code>formatDate.js<\/code>).<\/p>\n<figure style=\"margin:1.5em 0;text-align:center;\"><img decoding=\"async\" src=\"https:\/\/www.kindsonthegenius.com\/react\/wp-content\/uploads\/2026\/07\/03-react-jsx-and-components-section-2-1.jpg\" alt=\"JavaScript code for React JSX and components\" width=\"1200\" height=\"675\" loading=\"lazy\" style=\"max-width:100%;height:auto;border-radius:8px;border:1px solid #dee2e6;\" \/><figcaption style=\"font-size:0.85em;color:#666;margin-top:0.5em;\">Photo by <a href=\"https:\/\/unsplash.com\/@florianolv?utm_source=kindsonthegenius&#038;utm_medium=referral\" rel=\"noopener noreferrer\" target=\"_blank\">Florian Olivo<\/a> on <a href=\"https:\/\/unsplash.com\/?utm_source=kindsonthegenius&#038;utm_medium=referral\" rel=\"noopener noreferrer\" target=\"_blank\">Unsplash<\/a><\/figcaption><\/figure>\n<h4 id=\"props\">3. Props \u2014 Passing Data to Components<\/h4>\n<p><strong>Props<\/strong> (properties) are read-only inputs from a parent component. Define them as function parameters:<\/p>\n<pre><code class=\"language-jsx\">function Greeting({ name, role }) {\n  return (\n    &lt;div&gt;\n      &lt;h3&gt;Hello, {name}!&lt;\/h3&gt;\n      &lt;p&gt;Role: {role}&lt;\/p&gt;\n    &lt;\/div&gt;\n  );\n}\n\n\/\/ Usage in App.jsx:\n\/\/ &lt;Greeting name=\"Kindson\" role=\"Developer\" \/&gt;\n<\/code><\/pre>\n<p>Props make components reusable: the same <code>Greeting<\/code> component renders different content depending on what the parent passes. Never mutate props inside a child \u2014 treat them as immutable.<\/p>\n<p>Default values (optional):<\/p>\n<pre><code class=\"language-jsx\">function Greeting({ name = 'Guest', role = 'Learner' }) {\n  return &lt;p&gt;{name} \u2014 {role}&lt;\/p&gt;;\n}\n<\/code><\/pre>\n<h4 id=\"conditional\">4. Conditional Rendering<\/h4>\n<p>Show different UI based on data using JavaScript expressions inside JSX:<\/p>\n<pre><code class=\"language-jsx\">function StatusMessage({ isOnline }) {\n  return (\n    &lt;p&gt;\n      {isOnline ? 'You are online' : 'You are offline'}\n    &lt;\/p&gt;\n  );\n}\n<\/code><\/pre>\n<p>Other patterns:<\/p>\n<ul>\n<li><strong>Logical AND<\/strong> \u2014 <code>{hasError &amp;&amp; &lt;p&gt;Error occurred&lt;\/p&gt;}<\/code><\/li>\n<li><strong>Early return<\/strong> \u2014 return different JSX from separate <code>if<\/code> branches before the main return<\/li>\n<li><strong>Variable assignment<\/strong> \u2014 set <code>let content = ...<\/code> then render <code>{content}<\/code><\/li>\n<\/ul>\n<h4 id=\"lists\">5. Rendering Lists (Preview)<\/h4>\n<p>Render arrays with <code>.map()<\/code> and always provide a stable <code>key<\/code> prop:<\/p>\n<pre><code class=\"language-jsx\">const lessons = ['Introduction', 'Setup', 'JSX'];\n\nfunction LessonList() {\n  return (\n    &lt;ul&gt;\n      {lessons.map((title, index) =&gt; (\n        &lt;li key={index}&gt;{title}&lt;\/li&gt;\n      ))}\n    &lt;\/ul&gt;\n  );\n}\n<\/code><\/pre>\n<p>We cover lists and keys in depth in a future lesson. For now, remember that <code>key<\/code> helps React identify which items changed.<\/p>\n<h4 id=\"fragments\">6. Fragments \u2014 Group Without Extra DOM Nodes<\/h4>\n<p>JSX requires one parent element. Wrapping in <code>&lt;div&gt;<\/code> adds unnecessary DOM nodes. Use a <strong>Fragment<\/strong> instead:<\/p>\n<pre><code class=\"language-jsx\">function TitleBlock() {\n  return (\n    &lt;&gt;\n      &lt;h1&gt;React JSX and Components&lt;\/h1&gt;\n      &lt;p&gt;Lesson 3&lt;\/p&gt;\n    &lt;\/&gt;\n  );\n}\n<\/code><\/pre>\n<p>Long form: <code>&lt;React.Fragment&gt;...&lt;\/React.Fragment&gt;<\/code> \u2014 useful when you need a <code>key<\/code> on a fragment in a list.<\/p>\n<h4 id=\"complete-example\">7. Complete Example \u2014 GreetingCard<\/h4>\n<p>Create <code>src\/GreetingCard.jsx<\/code>:<\/p>\n<pre><code class=\"language-jsx\">function GreetingCard({ name, title, isPremium }) {\n  return (\n    &lt;article\n      style={{\n        border: '1px solid #e2e8f0',\n        borderRadius: '8px',\n        padding: '1.25rem',\n        maxWidth: '320px',\n      }}\n    &gt;\n      &lt;h2&gt;{title}&lt;\/h2&gt;\n      &lt;p&gt;Hello, &lt;strong&gt;{name}&lt;\/strong&gt;!&lt;\/p&gt;\n      {isPremium ? (\n        &lt;span style={{ color: '#2563eb' }}&gt;Premium member&lt;\/span&gt;\n      ) : (\n        &lt;span&gt;Free tier&lt;\/span&gt;\n      )}\n    &lt;\/article&gt;\n  );\n}\n\nexport default GreetingCard;\n<\/code><\/pre>\n<p>Update <code>src\/App.jsx<\/code>:<\/p>\n<pre><code class=\"language-jsx\">import GreetingCard from '.\/GreetingCard';\n\nfunction App() {\n  return (\n    &lt;main style={{ padding: '2rem', fontFamily: 'system-ui' }}&gt;\n      &lt;h1&gt;React JSX and Components&lt;\/h1&gt;\n      &lt;GreetingCard name=\"Kindson\" title=\"Welcome\" isPremium={true} \/&gt;\n      &lt;GreetingCard name=\"Guest\" title=\"Welcome\" isPremium={false} \/&gt;\n    &lt;\/main&gt;\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n<p>Run <code>npm run dev<\/code> and verify both cards render with different props. You have built a small, reusable <strong>react jsx components<\/strong> example.<\/p>\n<h4 id=\"styling-note\">8. Styling Components (Brief)<\/h4>\n<p>This lesson uses inline <code>style={{ ... }}<\/code> objects for clarity. In production you might use:<\/p>\n<ul>\n<li>CSS modules (<code>Component.module.css<\/code>)<\/li>\n<li>Tailwind CSS utility classes<\/li>\n<li>Styled-components or CSS-in-JS libraries<\/li>\n<\/ul>\n<p>Styling choice does not change component structure \u2014 props and JSX work the same way.<\/p>\n<h4 id=\"next\">9. Next Steps<\/h4>\n<p>You can now write functional components with JSX, props, and conditional rendering. Next: <a href=\"https:\/\/www.kindsonthegenius.com\/react\/04-react-state-usestate\/\">Lesson 4 \u2014 React State and useState<\/a>.<\/p>\n<p>Series links: <a href=\"https:\/\/www.kindsonthegenius.com\/react\/01-react-introduction\/\">Lesson 1<\/a> \u00b7 <a href=\"https:\/\/www.kindsonthegenius.com\/react\/02-react-setup\/\">Lesson 2<\/a><\/p>\n<h4 id=\"faq\">Frequently Asked Questions<\/h4>\n<p><strong>What is JSX in React?<\/strong><br \/>\nJSX is a syntax extension that lets you write HTML-like markup inside JavaScript. React compiles JSX into efficient JavaScript function calls.<\/p>\n<p><strong>What is the difference between props and state?<\/strong><br \/>\nProps are read-only inputs passed from a parent component. State is mutable data managed inside a component (covered in a later lesson on hooks).<\/p>\n<p><strong>Why do I need keys in lists?<\/strong><br \/>\nKeys help React identify which list items changed, were added, or removed \u2014 improving update performance and avoiding subtle bugs.<\/p>\n<p><!-- ktg-faq-schema --><br \/>\n<script type=\"application\/ld+json\">{\"@context\":\"https:\/\/schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"What is JSX in React?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. React compiles JSX into efficient JavaScript function calls.\"}},{\"@type\":\"Question\",\"name\":\"What is the difference between props and state?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Props are read-only inputs passed from a parent component. State is mutable data managed inside a component (covered in a later lesson on hooks).\"}}]}<\/script><\/p>\n<p><!-- ktg-lesson-nav --><\/p>\n<nav class=\"ktg-lesson-nav\" aria-label=\"Lesson navigation\">\n<p><strong>Previous:<\/strong> <a href=\"https:\/\/www.kindsonthegenius.com\/react\/02-react-setup\/\">Lesson 2: React Setup \u2014 Create Your First App with Vite<\/a><\/p>\n<p><strong>Next:<\/strong> <a href=\"https:\/\/www.kindsonthegenius.com\/react\/04-react-state-usestate\/\">Lesson 4: React State and useState \u2014 Interactive UI (React 19+)<\/a><\/p>\n<\/nav>\n<p><!-- ktg-alkademy-cta --><\/p>\n<div class=\"ktg-alkademy-cta\">\n<p><strong>Want live React or frontend classes?<\/strong> Join <a href=\"https:\/\/www.alkademy.com\/courses\" target=\"_blank\" rel=\"noopener noreferrer\">Alkademy<\/a> for instructor-led React and JavaScript courses with hands-on projects.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Updated July 4, 2026. Refreshed for React 19 and current SEO best practices. Table of Contents Follow the React tutorial series in order: Lesson 1: React Tutorial \u2014 Introduction (2026) Lesson 2: React Setup \u2014 Create Your First App with Vite Lesson 3: React JSX and Components \u2014 Build Your First UI Lesson 4: React [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":80,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[2],"tags":[],"class_list":["post-21","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-tutorials"],"_links":{"self":[{"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/posts\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":8,"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/posts\/21\/revisions"}],"predecessor-version":[{"id":84,"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/posts\/21\/revisions\/84"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/media\/80"}],"wp:attachment":[{"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/media?parent=21"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/categories?post=21"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/tags?post=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}