JSX (JavaScript XML) is a syntax extension for JavaScript that looks similar to HTML. It’s one of React’s most powerful features because it allows you to write UI components in a familiar, declarative way.

What Is JSX?

JSX is a syntax extension that lets you write HTML-like code within your JavaScript. Under the hood, JSX is transformed into plain JavaScript objects that React can render. While it might look like HTML, there are some key differences and advantages:

Declarative Syntax: JSX makes it easier to describe what your UI should look like.
Integration with JavaScript: You can embed JavaScript expressions directly inside JSX.
Improved Readability: The combination of markup and logic in one place makes components more understandable.

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

This simple line of JSX is equivalent to using React.createElement under the hood.

Creating JSX

Creating JSX is straightforward. Just write HTML-like code in your JavaScript file. In a React component, you typically return JSX from your function.

Example: A Simple Component Using JSX

function Welcome() {

return (

<div>

<h1>Welcome to my React App!</h1>

<p>This is created using JSX.</p>

</div>

);

}

export default Welcome;

In this example, the Welcome component returns a JSX tree that includes a <div>, <h1>, and <p>. The JSX code is later transformed into React elements by Babel.

Expressions in JSX

One of the powerful features of JSX is that you can embed JavaScript expressions inside curly braces {}. This means you can calculate values, call functions, or use any JavaScript logic directly within your JSX.

Example: Using JavaScript Expressions in JSX

function Greeting() {

const name = "James"

// JavaScript expression inside JSX

return <h1>Hello, {name}!</h1>;

}

export default Greeting;

Here, the expression {name} will render the name James.

JSX Rules

While JSX is intuitive, there are a few important rules to remember:

Single Parent Element: Every JSX expression must have one parent element. If you have multiple elements, wrap them in a single container (like a <div> or a React fragment).

// Correct: wrapped in a div

return (

<div>

<h1>Title</h1>

<p>Paragraph</p>

</div>

);

// Alternatively, using React fragments:

return (

<>

<h1>Title</h1>

<p>Paragraph</p>

</>

);

JavaScript Expressions Only: You can only use JavaScript expressions (and not statements) inside curly braces. For example, you can’t use an if statement directly inside JSX—you should use conditional (ternary) expressions instead.

// Correct: using ternary expression

<p>{isLoggedIn ? 'Welcome back!' : 'Please sign in'}</p>

Class Attribute: In JSX, you use className instead of class because class is a reserved word in JavaScript.

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

Self-Closing Tags: If an element does not have any children, it must be self-closed.

<br />

JavaScript Comments: To add comments within JSX, wrap them in curly braces.

{

/* This is a JSX comment */

}

Wrapping Up

JSX is the heart of React’s declarative UI development. In this guide, we covered:

What JSX is: A syntax extension that looks like HTML but is JavaScript.
How to create JSX: Writing JSX within your components.
Using expressions in JSX: Embedding JavaScript logic directly in your markup.
Essential JSX rules: Ensuring your JSX is well-formed and adheres to the syntax rules.

By mastering JSX, you can create dynamic, interactive components that form the foundation of any React application. As you continue learning React, these basics will help you write cleaner, more efficient code.