JSX Cheat Sheet (React Syntax)

🧩 JSX Cheat Sheet (React Syntax)

Feature	✅ JSX Syntax Example	💡 Notes / Explanation
JSX Expression	<h1>Hello, {userName}</h1>	Use {} to embed JS expressions
Class Name	<div className="container"></div>	Use className instead of class
Inline Style	<p style={{ color: 'red', fontSize: '20px' }}>Hello</p>	Use camelCase CSS property names
Self-closing Tags	<img src="logo.png" alt="Logo" />	Tags without children must be self-closed
Conditional (Ternary)	{isLoggedIn ? <p>Welcome</p> : <p>Please Login</p>}	Ternary operator for if-else logic
Conditional (&&)	{cart.length > 0 && <p>Items in Cart: {cart.length}</p>}	Renders only if condition is true
Fragment (short)	<> <h1>Title</h1><p>Text</p> </>	No extra DOM wrapper; used instead of <div>
Fragment (full)	<React.Fragment><h1>Header</h1></React.Fragment>	Full syntax if you're not using JSX transformer
Array/List Rendering	{items.map(item => <li key={item.id}>{item.name}</li>)}	Use .map() with unique key for each item
Functional Component	function Greet() { return <h1>Hello!</h1>; }	JSX is returned from a component function
Multiple Elements	return (<div><h1>Hi</h1><p>Bye</p></div>)	Wrap multiple JSX elements in a single parent
JSX in Variable	const element = <h2>Stored in variable</h2>;	You can store JSX in variables
Event Handling	<button onClick={handleClick}>Click</button>	Events use camelCase and {} for handler
Boolean Attribute	<input type="checkbox" checked={true} />	Use {true} or {false} instead of just writing checked
Comments	{/* This is a comment inside JSX */}	Wrap comments in {/* */}

---

Use this cheat sheet as a quick reference while writing React components!