React JSX

JSX stands for JavaScript XML. It is a syntax extension for JavaScript used in React to describe what the UI should look like. JSX lets you write HTML-like code inside JavaScript, which makes your code more readable and helps build user interfaces in a declarative way.

Why JSX?

In React, you build user interfaces by composing components. These components return elements that describe what should appear on the screen. Instead of using plain JavaScript to build those elements, JSX offers a cleaner and more intuitive way.

Compare this:

Using JavaScript:

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

Using JSX:

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

Both lines do the same thing, but JSX is easier to read and understand, especially when working with complex layouts.

JSX is Not HTML

Although JSX looks very similar to HTML, it’s not exactly the same. JSX gets compiled down to React.createElement() calls behind the scenes. That means you can write code that looks like HTML, but it’s actually running in JavaScript.

Here’s a simple example:

function Greeting() {
  return <h1>Welcome to my website!</h1>;
}

This function returns a JSX element (<h1>) that React knows how to render into the browser.

Key Features of JSX

1. Embedding Expressions
   You can embed JavaScript expressions inside JSX using curly braces {}. Example:const name = "Janhvika"; const element = <h1>Hello, {name}!</h1>;
2. Attributes
   JSX uses camelCase for naming attributes instead of HTML’s lowercase.
   • class becomes classNamefor becomes htmlFor
   Example: <div className="container"> <label htmlFor="name">Name:</label> </div>
3. Conditional Rendering
   You can use conditional logic inside JSX with ternary operators or short-circuit &&. Example: const isLoggedIn = true; const element = <p>{isLoggedIn ? "Welcome back!" : "Please sign in."}</p>;
4. JSX Must Have One Parent Element
   JSX expressions must return only one parent element. If you want to return multiple elements, wrap them inside a <div> or use React fragments (<>...</>). return ( <> <h1>Heading</h1> <p>Paragraph</p> </> );
5. Self-Closing Tags
   Just like in HTML5, some elements like <img />, <input />, and <br /> should be self-closing.

JSX in Components

JSX is commonly used inside React components, which are functions or classes that return JSX elements.

Example:

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

You can use this component like HTML:

<Welcome name="Janhvika" />

JSX Gets Compiled

JSX cannot run directly in the browser. Tools like Babel compile JSX into plain JavaScript so browsers can understand it.

Behind the scenes:

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

Is compiled into:

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

Benefits of JSX

Improved Readability – Code looks like the HTML you’re building.
Component Structure – Makes it easier to split your UI into reusable parts.
Power of JavaScript – You can use full JavaScript logic inside your markup.
Tooling Support – Most editors support syntax highlighting and auto-complete for JSX.

Summary

JSX is a powerful feature in React that allows developers to write HTML-like syntax inside JavaScript. It makes the code more readable and intuitive, and it closely reflects how the UI will look in the browser. Although JSX is not required to use React, it’s the preferred way to define components and build interfaces.