Hi there 👋,
Hope you read
✅What is JSX?
JSX stands for JavaScript XML.
It’s a syntax extension for JavaScript used in React that allows you to write HTML-like code inside JavaScript files. Here’s JSX in action:
const greeting = <h2>Hello, React!</h2>;
✅ This is not HTML
✅ It’s JavaScript
✅ It gets compiled into:
React.createElement("h2", null, "Hello, React!");
🎯 Why Do We Use JSX?
JSX makes React code:
- Easier to read and write
- More declarative (you describe what UI should look like)
- Keeps logic and markup together (less jumping between files)
Without JSX, you'd need to write UI like this:
const element = React.createElement('div', null, 'Hello');
😵 Ouch. JSX makes it cleaner:
const element = <div>Hello</div>;
Much better, right?
🔧 How JSX Works Under the Hood in React
✅ You write JSX
🔄 Babel transpiles it to React.createElement(...)
🔧 That returns React element objects (JS objects)
🧠 React uses those to build the Virtual DOM (Don't know about virtual DOM? Don't worry, we will get you covered 😊)
⚡ Efficient updates are sent to the real DOM
🧪 Fun Example
const heading = <h1 className="title">Hello</h1>;
⬇️ Under the hood:
const heading = React.createElement(
"h1",
{ className: "title" },
"Hello"
);
⬇️ Which becomes this object:
{
type: "h1",
props: {
className: "title",
children: "Hello"
}
}
⬇️ React reads this object and says:
"Okay, I need to render an heading with class 'title' and text 'Hello'".
🫣 But be aware, JSX has some stricter rules
JSX Must Have One Parent Element
Wrong:
return (
<h1>Hello</h1>
<p>Welcome!</p>
);
Correct:
return (
<div>
<h1>Hello</h1>
<p>Welcome!</p>
</div>
);
You can also use <> and </> as a shortcut (called a fragment)
return (
<>
<h1>Hello</h1>
<p>Welcome!</p>
</>
);
Use className, not class
Since class is a reserved word in JavaScript, JSX uses className instead:
<div className="container">Hello</div>
Use camelCase for Attributes
JSX follows JavaScript conventions, not HTML.
HTML Attribute
- onclick
- for
- maxlength
JSX Attribute
- onClick
- htmlFor
- maxLength
Example:
<label htmlFor="email">Email:</label>
<input type="text" maxLength={20} />
Wrap JavaScript in {}
You can embed JavaScript expressions in JSX using {}:
const name = "Alice";
return <h2>Hello, {name}!</h2>;
With JSX, you’ve unlocked the ability to describe what your app should look like.
But... what happens when your app needs to remember something?
Like:
- A button that counts clicks
- A form input that updates as you type
🤔 How does React remember these things?
👉 “State of Mind: React useState Made Simple”
In the next blog post, we’ll dive into how React gives components memory, using something called useState.
Top comments (3)
Good, descriptive and easy to understand information.
🔥🔥
Nicely explained!🙌