JSX: The Magical Fusion of JavaScript + XML That Makes React Shine

 

 

 

Hello fellow coders! 

If you’re just diving into React, you’ve probably stumbled upon a mysterious creature called JSX. The first time you see it, you might think:

"Wait... is this HTML? Or JavaScript? What is <h1>Hello</h1> doing in a .js file?"

Welcome to JSX — a wonderful blend of JavaScript and XML-like syntax that makes writing UI in React fun, readable, and powerful.

 

So, What is JSX?

JSX stands for JavaScript XML. It’s not a new language but a syntax extension for JavaScript that lets you write UI code that looks like HTML right inside your JavaScript files.

Example:

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

This is not HTML, even though it looks like it. It’s JSX — and React understands it thanks to a compiler like Babel.

 

Why Does React Use JSX?

React’s philosophy is: “UI is a function of state.” In other words, your interface should be tightly coupled with your logic.

Benefits of JSX:

• Declarative: You can see the UI shape directly in your code.
• Editor Support: Autocomplete, linting, and syntax highlighting work beautifully.
• Early Error Detection: Errors appear during compile time.

 

JSX vs HTML — Looks Can Be Deceiving

Though it looks like HTML, JSX is not the same. Here are key differences:

JSX	HTML
className="btn"	class="btn"
htmlFor="id"	for="id"
camelCase styles	kebab-case styles
Must have one root element	Multiple root elements allowed

 

How JSX Works Under the Hood

JSX gets compiled into plain JavaScript using Babel.

For example:

const element = <h1>Hello</h1>;

Becomes:

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

And that turns into a JavaScript object like:

{
  type: 'h1',
  props: {
    children: 'Hello'
  }
}

 

What Can JSX Contain?

 

JavaScript Expressions

const name = 'Jane';
const greeting = <h1>Hello, {name}!</h1>;

Ternary Operations

{isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}

Arrays / Map

const items = ['Apple', 'Banana', 'Cherry'];
return (
  <ul>
    {items.map(item => <li key={item}>{item}</li>)}
  </ul>
);

 

JSX Needs One Root Element

This will throw an error:

return (
  <h1>Hello</h1>
  <p>World</p>
);

You need to wrap it like this:

return (
  <div>
    <h1>Hello</h1>
    <p>World</p>
  </div>
);

Or use fragments:

return (
  <>
    <h1>Hello</h1>
    <p>World</p>
  </>
);

 

Styling with JSX

 

Inline Styles

const style = { color: 'blue', fontSize: '24px' };
return <h1 style={style}>Styled Text</h1>;

CSS Imports

import './App.css';

Or use Tailwind, SCSS, styled-components, or whatever your heart desires!

 

Common JSX Mistakes

• Using class instead of className
• Forgetting key in lists
• Multiple top-level elements in return
• Style names like font-size (should be fontSize)

 

JSX Inside Components

Here’s a basic example:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

 

JSX Best Practices

• Always use key in lists
• Use fragments for grouping without extra DOM
• Move logic outside of JSX return when it gets messy
• Keep it readable like HTML

 

JSX + TypeScript

type Props = {
  name: string;
}

function Welcome({ name }: Props) {
  return <h1>Hello, {name}</h1>;
}

Save the file as .tsx and you're good to go.

JSX is the magic sauce that makes React intuitive and powerful. It might feel strange at first, but once you get the hang of it, you'll love how it makes UI code feel like poetry. 

“JSX is like a chocolate croissant — a delicious combination of things you already love.”