React JSX Introduction
Understanding JSX syntax in React
✨ Introduction to JSX
JSX is a syntax extension that lets you write HTML-like code in JavaScript files. It makes React components easier to read and write by combining markup and logic in one place, compiling to regular JavaScript.
// JSX looks like HTML
const element = <h1>Hello, JSX!</h1>;
Output:
Hello, JSX!
JSX Fundamentals
HTML-like Syntax
Write markup in JavaScript
const el = <div>Hello</div>;JavaScript Inside
Embed expressions with curly braces
const el = <h1>{2 + 2}</h1>;Single Root
JSX must have one parent element
<div><h1/><p/></div>Self-Closing Tags
Tags without children must close
<img src="pic.jpg" />🔹 Basic JSX Syntax
JSX looks like HTML but it's actually JavaScript. You can assign JSX to variables, pass it as arguments, and return it from functions just like any JavaScript value.
// Simple JSX Element
const element = <h1>Hello World</h1>;
// JSX with Multiple Lines
const element = (
<div>
<h1>Welcome</h1>
<p>This is JSX</p>
</div>
);
// JSX in a Function
function getGreeting() {
return <h1>Hello, User!</h1>;
}Output:
Hello World
Welcome
This is JSX
🔹 JSX Must Have One Parent
JSX expressions must have exactly one parent element. If you need multiple elements, wrap them in a div or use React Fragments to avoid adding extra DOM nodes.
// ❌ Wrong - Multiple Parents
const element = (
<h1>Title</h1>
<p>Paragraph</p>
);
// ✅ Correct - Single Parent
const element = (
<div>
<h1>Title</h1>
<p>Paragraph</p>
</div>
);
// ✅ Using Fragment
const element = (
<>
<h1>Title</h1>
<p>Paragraph</p>
</>
);Output:
Title
Paragraph
🔹 Self-Closing Tags
In JSX, tags without children must be self-closed with a forward slash. This is different from HTML where some tags like img and input don't require closing.
// ❌ Wrong - Not Self-Closed
const element = <img src="photo.jpg">;
const input = <input type="text">;
// ✅ Correct - Self-Closed
const element = <img src="photo.jpg" />;
const input = <input type="text" />;
const lineBreak = <br />;
const divider = <hr />;Output:
🔹 JSX vs HTML Differences
While JSX looks like HTML, there are important differences. JSX uses camelCase for attributes, requires closing tags, and uses className instead of class for CSS styling.
// HTML Attribute Names
<div class="container"></div> // HTML
<div className="container"></div> // JSX
// Event Handlers
<button onclick="handleClick()"> // HTML
<button onClick={handleClick}> // JSX
// Inline Styles
<div style="color: red"></div> // HTML
<div style={{color: 'red'}}></div> // JSX
// For Attribute
<label for="name"></label> // HTML
<label htmlFor="name"></label> // JSX🔹 JSX Compiles to JavaScript
Behind the scenes, JSX is transformed into regular JavaScript function calls. Understanding this helps you see that JSX is just syntactic sugar for creating React elements programmatically.
// JSX Code
const element = (
<h1 className="greeting">
Hello, World!
</h1>
);
// Compiles to JavaScript
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, World!'
);
// Both create the same element!