JSX vs HTML

JSX (JavaScript XML) is a syntax extension for JavaScript used in React. It allows developers to write UI components in a syntax similar to HTML, making code more readable and maintainable. JSX is not required in React, but it’s widely used because it simplifies UI development.

What is JSX?

JSX lets you write HTML-like code inside JavaScript. Under the hood, it gets compiled into standard JavaScript function calls.

Example: JSX vs. JavaScript

✅ JSX (Common in React)

const element = <h1>Hello, world!</h1>;

❌ Without JSX (Using React.createElement)

const element = React.createElement('h1', null, 'Hello, world!');

JSX makes it easier to structure UI components visually, instead of writing raw JavaScript functions.

How JSX Works

JSX is not valid JavaScript—it must be compiled by a tool like Babel before the browser can understand it. Babel transforms JSX into React.createElement() calls.

For example, this JSX:

const element = <h1>Hello, world!</h1>;

Compiles to:

const element = React.createElement('h1', null, 'Hello, world!');

This creates a JavaScript object representing the DOM structure, which React uses for efficient updates.

JSX Rules & Best Practices

1️⃣ JSX Must Return a Single Parent Element

return (
  <div>
    <h1>Title</h1>
    <p>Some text</p>
  </div>
);

If multiple elements are needed, wrap them inside a <div> or use fragments (<>...</>):

return (
  <>
    <h1>Title</h1>
    <p>Some text</p>
  </>
);

2️⃣ Embedding JavaScript Expressions in JSX

Use curly braces {} to insert JavaScript inside JSX:

const name = "Alice";
const element = <h1>Hello, {name}!</h1>;

3️⃣ Adding Attributes in JSX

JSX uses camelCase for attributes instead of HTML-style attributes.

<img src="image.png" alt="Description" />

4️⃣ Conditional Rendering in JSX

Using ternary operators:

const isLoggedIn = true;
const message = <h1>{isLoggedIn ? "Welcome back!" : "Please log in"}</h1>;

Using && (short-circuit evaluation):

{isLoggedIn && <p>You have new messages</p>}

JSX vs. HTML: Key Differences

JSX	HTML
`className="btn"`	`class="btn"`
`{expression}` for JavaScript	No JavaScript inside HTML
Self-closing tags required (`<img />`)	Self-closing tags optional (`<img>`)
CamelCase attributes (`onClick`)	Lowercase (`onclick`)

Summary

JSX lets you write UI code in a familiar, HTML-like syntax within JavaScript.
It compiles to React.createElement() calls for React to process efficiently.
JSX requires a single parent element and follows JavaScript syntax rules.
You can embed JavaScript expressions and conditionally render elements using JSX.

References

React Docs – JSX
Understanding JSX in React
Babel JSX Compiler

halfFullstack

Tag: JSX vs HTML

JSX: JavaScript XML in React