🧠 What is JSX?
JSX (JavaScript XML) is a syntax extension for JavaScript used in React to describe what the UI should look like. It allows developers to write code that looks like HTML directly inside JavaScript, providing a more intuitive and readable way to build React components.
📄 Example of JSX in Action
jsx
import React from 'react';
const App = () => {
return (
<div>
<h1>Hello, world!</h1>
<p>This is a JSX example.</p>
</div>
);
};
export default App;
🔍 What’s Happening Here?
- You write HTML-like syntax inside JavaScript (e.g.,
<div>, <h1>, <p>). - JSX enables embedding JavaScript expressions inside
{} – useful for dynamic content. - Under the hood, JSX gets transpiled by Babel into
React.createElement() calls.
🔁 How JSX Translates to JavaScript
This:
jsx
<h1>Hello, world!</h1>
Becomes:
js
React.createElement('h1', null, 'Hello, world!');
This transformation is handled automatically by Babel, a tool that prepares your JSX code for the browser.
🛠️ Why Use JSX?
- Cleaner syntax: Easier to visualize component structures.
- Seamless logic integration: Write JavaScript and markup in one place.
- Enhanced readability: Looks like HTML, but behaves like JavaScript.
- Component composition: Helps you build UI as a tree of reusable components.
⚠️ JSX is Not HTML
While JSX resembles HTML, it has key differences:
- Use
className instead of class - Self-close tags like
<img />, <input /> - JavaScript expressions inside
{}
📝 Summary
- JSX is a syntax used with React to write component UIs in a declarative way.
- It’s transformed into React's core API calls (
React.createElement) using Babel. - Though it looks like HTML, JSX is JavaScript at heart.
- JSX simplifies building and managing complex UIs in React apps.