JSX in React: Syntax, Patterns, and Best Practices

JSX in React: Syntax, Patterns, and Best Practices

• 1.
  R EAC TF RO M SCR ATCH • PART 2 JSX — JavaScript XML The HTML-like syntax that lets you describe UI directly inside JavaScript. Syntax · Babel Compilation · Expressions · Rules · Lists & Conditionals Prepared By: Kale J. N.
• 2.
  INTRODUCTION What Is JSX? •JSX stands for JavaScript XML. • It lets you write HTML-like syntax directly inside JavaScript. • React uses JSX to describe what the UI structure should look like. • Browsers don’t understand JSX — a tool called Babel compiles it into regular JavaScript before it runs. JSX AT A GLANCE const element = <h1>Hello, React!</h1>; This looks like HTML — but it’s really JavaScript. JSX is syntactic sugar that makes UI code far easier to read and write. 1. JSX (you write) 2. Babel compiles it 3. React.createElement() 4. Real DOM elements JSX Prepared By: Kale J. N. 2 / 10
• 3.
  MOTIVATION Why Use JSX? 1 CleanerCode Makes component code much easier to read and reason about. 2 Visualize UI You can see the structure of your UI right in the code. 3 Embed Logic Mix JavaScript logic directly into your markup with { }. 4 Maintainable The preferred, idiomatic way most React developers write UI. JSX Prepared By: Kale J. N. 3 / 10
• 4.
  UNDER THE HOOD JSXvs. Compiled JavaScript JSX CODE (WHAT YOU WRITE) const element = <h1>Hello, React!</h1>; Looks like plain HTML embedded in JS — intuitive and quick to write. COMPILED JAVASCRIPT (BY BABEL) const element = React.createElement( 'h1', null, 'Hello, React!' ); Babel translates every JSX tag into a React.createElement() call — this is the actual JavaScript that runs in the browser. JSX Prepared By: Kale J. N. 4 / 10
• 5.
  SYNTAX Embedding JavaScript InsideJSX • You can embed any JavaScript expression inside JSX using curly braces { }. • This includes variables, function calls, arithmetic, and ternary expressions. • It's how JSX stays dynamic — mixing live data with markup. EXAMPLE const name = 'Arav'; const element = <h1>Hello, {name}!</h1>; OUTPUT Hello, Arav! You can also embed function calls, e.g. {getGreeting()}, or math, e.g. {2 + 2}. JSX Prepared By: Kale J. N. 5 / 10
• 6.
  PRACTICAL PATTERNS Conditional Renderingin JSX ? Ternary Operator Use condition ? A : B to choose between two pieces of UI inline. function Status({ loggedIn }) { return ( <p> {loggedIn ? 'Welcome!' : 'Please log in'} </p> ); } Best for simple either/or choices between two outputs. && Logical AND (&&) Use && to render something only when a condition is true — renders nothing otherwise. function Cart({ items }) { return ( <div> {items.length > 0 && <p>{items.length} items</p>} </div> ); } Best for showing/hiding a single piece of UI conditionally. JSX Prepared By: Kale J. N. 6 / 10
• 7.
  PRACTICAL PATTERNS Rendering Listswith .map() • Use JavaScript’s .map() to turn an array of data into an array of JSX elements. • Each item in a list needs a unique key prop, so React can track it efficiently across updates. • Keys should be stable and unique — usually an id from your data, not the array index. EXAMPLE const fruits = ['Apple', 'Mango', 'Kiwi']; function FruitList() { return ( <ul> {fruits.map((fruit, i) => ( <li key={i}>{fruit}</li> ))} </ul> ); } ⚠ Skipping the key prop — or reusing array indexes when items reorder — can cause subtle rendering bugs. JSX Prepared By: Kale J. N. 7 / 10
• 8.
  REFERENCE JSX Rules toRemember 1 Single parent element A component must return one root element (or a Fragment <> </>). 2 Use className, not class class is a reserved JS word, so JSX uses className instead. 3 Self-close empty tags Tags with no children must self-close: <img /> not <img>. 4 Embed JS with { } Wrap any JavaScript expression in curly braces inside markup. 5 camelCase attributes Event and DOM attributes use camelCase: onClick, tabIndex. 6 Fragments avoid extra DOM Use <> </> to group elements without adding a wrapper <div>. JSX Prepared By: Kale J. N. 8 / 10
• 9.
  COMPARISON JSX vs. HTML— Key Differences HTML JSX WHY class className class is reserved in JavaScript for htmlFor for is reserved in JavaScript onclick onClick events use camelCase in JSX <img> <img /> unclosed tags aren’t allowed in JSX style="color:red" style={{color:'red'}} style takes a JS object, not a string JSX Prepared By: Kale J. N. 9 / 10
• 10.
  K EY TAKEAWAYS JSX, in Short • JSX = HTML-like syntax inside JavaScript, compiled by Babel. • Embed dynamic values and logic using { }. • Always return a single parent element (or a Fragment). • Use .map() with a unique key to render lists. • Next up: Build Tools — how your JSX becomes browser-ready code. REMEMBER function App() { const items = ['A', 'B']; return ( <> <h1>Hello, {items[0]}</h1> <ul> {items.map((i) => ( <li key={i}>{i}</li> ))} </ul> </> ); } JSX Prepared By: Kale J. N. 10 / 10