JSX Syntax in React
Have you ever wished you could write HTML directly inside your JavaScript? That's exactly what JSX (JavaScript XML) lets you do. It's one of the first things you'll notice when learning React, and it makes building user interfaces feel natural and intuitive.
What is JSX?
JSX is a syntax extension for JavaScript that looks similar to HTML. It was created to make React code more readable and to write components more easily. Instead of creating elements with JavaScript functions like `React.createElement()`, JSX allows you to write markup that looks like HTML but lives right inside your JavaScript files.
JSX is not HTML – it's syntactic sugar for `React.createElement()` calls. Browsers don't understand JSX directly; it needs to be transformed by a tool like Babel.
Why Use JSX?
- Familiar Syntax: If you know HTML, you already know most of JSX.
- Improved Readability: Seeing the UI structure directly in the code makes it easier to understand.
- Error Prevention: JSX catches many errors at compile time (like typos or missing closing tags).
- Combine Logic and Markup: You can embed JavaScript expressions directly in your markup using curly braces.
JSX Rules & Syntax
1. Return a Single Root Element
A component must return a single parent element. If you want to return multiple elements without an extra wrapper, use a Fragment (`<>...`) or ``.
function MyComponent() { return ( <> <!-- React Fragment --> <h1>Title</h1> <p>Paragraph</p> </> );}2. Close All Tags
Just like in XHTML, all tags must be closed. Self-closing tags like `![]()
` must end with `/>`.
<img src="image.jpg" alt="An image" /><br />3. Use camelCase for Attributes
HTML attributes become camelCase in JSX. For example, `class` becomes `className`, `tabindex` becomes `tabIndex`, and `onclick` becomes `onClick`.
<div className="container" tabIndex={0}>Hello</div>4. Embed JavaScript with Curly Braces
Use `{}` to embed any JavaScript expression (variables, function calls, ternary operators) inside JSX.
const name = 'John';const isLoggedIn = true;
<h1>Hello, {name}!</h1><p>Status: {isLoggedIn ? 'Active' : 'Inactive'}</p>Example: JSX vs Pure JavaScript
With JSX:
const element = <h1 className="greeting">Hello, world!</h1>;Without JSX (same result):
const element = React.createElement( 'h1', { className: 'greeting' }, 'Hello, world!');As you can see, JSX is much more readable and easier to write, especially for complex UIs.
Two Minute Drill
- JSX stands for JavaScript XML – it's a syntax extension that lets you write HTML-like code inside JavaScript.
- JSX is not required to use React, but it makes code more readable and is the preferred way.
- JSX must be transformed by a tool like Babel before browsers can understand it.
- Key rules: return a single root element, close all tags, use camelCase for attributes, and use `{}` for JavaScript expressions.
- Common attribute changes: `class` → `className`, `for` → `htmlFor`, `onclick` → `onClick`.
- You can embed any JavaScript expression inside `{}`, but not statements (like if/else, loops).
Need more clarification?
Drop us an email at career@quipoinfotech.com