JSX Explained: Writing HTML in JavaScript

JSX stands for JavaScript XML. It’s a syntax extension for JavaScript that lets you write code that looks like HTML inside your JavaScript files. JSX is commonly used with React, a popular JavaScript library for building user interfaces.

🔹 Why Use JSX?

Normally, you’d have to use JavaScript functions like document.createElement() to create HTML elements, which can get complicated and messy. JSX makes it easier and more intuitive by letting you write code that looks like HTML but behaves like JavaScript.

Example:

Without JSX:

javascript

Copy

Edit

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

With JSX:

jsx

Copy

Edit

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

🔹 How JSX Works

JSX isn’t understood by browsers directly. Behind the scenes, tools like Babel compile JSX into regular JavaScript. So, when you write:

jsx

Copy

Edit

const button = <button>Click me</button>;

It gets converted into something like:

javascript

Copy

Edit

const button = React.createElement('button', null, 'Click me');

This allows React to efficiently create and update the DOM.

🔹 JSX is JavaScript

Even though it looks like HTML, JSX is fully JavaScript. You can:

Use JavaScript expressions inside JSX with {}.

Assign JSX to variables.

Return JSX from functions.

Example:

jsx

Copy

Edit

const name = "Alice";

const greeting = <h2>Hello, {name}!</h2>;

🔹 Common Rules in JSX

One parent element: JSX must have one top-level element.

jsx

Copy

Edit

return (

  <div>

    <h1>Title</h1>

    <p>Paragraph</p>

  </div>

);

Use className instead of class (since class is a reserved keyword in JS).

jsx

Copy

Edit

<div className="container">Content</div>

Use camelCase for attributes like onClick, htmlFor, etc.

jsx

Copy

Edit

<button onClick={handleClick}>Click</button>

🔹 Conclusion

JSX lets you write HTML-like code in your JavaScript, making your UI code cleaner and more readable. It’s not required to use React, but it’s highly recommended because of how much it simplifies writing components.

Would you like a short demo app or example using JSX in a real component?

Learn React JS Course in Hyderabad

Visit Our Quality Thought Training in Hyderabad

Get Directions 

Read More

Setting Up Your First React App with Create React App

State in React: The Basics