JSX, which stands for JavaScript and XML, is an extension of JavaScript syntax that allows you to write HTML-like code within JavaScript. It’s one of the fundamental building blocks of React, making it easier to create and manage the UI by allowing you to express it in a declarative, readable format.

React uses JSX to describe the structure of the user interface (UI) and to combine HTML with JavaScript logic. Under the hood, JSX is converted into regular JavaScript code, which React uses to manage the DOM efficiently. While JSX looks similar to HTML, it brings many new features and benefits to developers building dynamic and interactive applications.

Why Use JSX?

JSX is used in React for several reasons, as it simplifies and enhances the development experience:

• Declarative Syntax: JSX is more declarative and readable than traditional JavaScript. You describe the UI’s structure, and React takes care of updating the DOM for you. This leads to less boilerplate code and makes the codebase easier to manage.

• Better Integration with JavaScript: Unlike regular HTML, JSX seamlessly integrates JavaScript expressions. This allows you to use JavaScript variables, functions, and logic within the HTML-like JSX markup.

• Component-Based Architecture: React promotes building UI elements as reusable components. JSX helps you to define components that can easily take in dynamic data and manage internal state, making the UI highly interactive and modular.

• Improved Developer Tools: JSX works well with modern JavaScript development tools, such as linters, transpilers (like Babel), and IDEs, helping to catch errors early and provide better autocompletion, refactoring, and debugging support.

Key Features of JSX

1. Embedding Expressions in JSX

JSX allows you to embed JavaScript expressions directly within the markup. This is done by wrapping the JavaScript expression in curly braces {}. In JavaScript, an expression is any valid unit of code that resolves to a value, such as variables, functions, arithmetic operations, or method calls.

Example 1:

const name = "React";
const element = <h1>Welcome to {name}!</h1>;

• The variable name is "React".
• The JSX syntax <h1>Welcome to {name}!</h1> embeds the value of name within the h1 element.
• When rendered, the text "Welcome to React!" will appear on the screen.

Example 2:

const num1 = 5;  
const num2 = 10;  
const sum = <h1>The sum of {num1} and {num2} is {num1 + num2}.</h1>;  

• The variable num1 is 5 and num2 is 10.
• The JSX syntax <h1>The sum of {num1} and {num2} is {num1 + num2}.</h1> embeds the values of num1 and num2 and calculates their sum inside the <h1> element.
• When rendered, the text "The sum of 5 and 10 is 15." will appear on the screen.

JSX expressions can contain JavaScript logic like conditionals and loops.

Lets look at an example of JSX with conditionals using ternary operators:

const count = 5;
const message = count > 1 ? `${count} items` : `${count} item`;
const element = <h1>You have {message}</h1>;

Here, the expression evaluates whether count is greater than 1, and it dynamically changes the message accordingly.

2. JSX Attributes

JSX elements can accept attributes, just like HTML. However, there are differences in naming conventions and data binding.

• CamelCase Attribute Names: In JSX, HTML attributes like class, for, and others are written in camelCase - class becomes className, and for becomes htmlFor.

Example:

//using className instead of class
<h1 className="header">Welcome to React!</h1>

//using htmlFor instead of for
<label htmlFor="name">Name:</label>

• Passing Expressions: Attributes in JSX can accept JavaScript expressions wrapped in curly braces {}, which makes them dynamic. You can say that using {} enables you enter 'JavaScript Mode'.

Example:

<button onClick={()=> alert('Button clicked!'}>Click Me</button>;

In this example:

• onClick={()=> alert('Button clicked!'} invokes the alert function when the button is clicked.
• The onClick is a camelCase attribute, unlike the traditional onclick in HTML.

3. Self-Closing Tags

In JSX, some elements, such as images or input fields, don’t have children and are "self-closing" tags. These elements don’t require a closing tag.

Example:

const element = <img src="logo.png" alt="Logo" />;

In this example, the img tag is self-closing because it doesn’t have any child content. The slash (/) at the end indicates that the tag is self-contained.

4. JSX Must Be Wrapped in a Single Parent Element

React requires that all JSX components return a single parent element. This helps React to manage the component tree and avoid rendering issues. To fufil this requirement, multiple child elements are wrapped either in a div (<div>) or React Fragment (<> </>)

Example of Using a Div as a wrapper

The HTML <div> element can act as a parent element wrapper for other child elements:

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <p>This is React</p>
    </div>
  );
}

In this example, the <h1> and <p> elements are wrapped within the <div>.

Note: Using a div is also a valid approach, but remember that adding unnecessary divs might lead to unnecessary complexity in the DOM, so prefer Fragment when no extra wrapper is required.

Example of Using React Fragment:

React fragment allows you to group multiple elements within itself:

function App() {
  return (
    <>
      <h1>Hello</h1>
      <p>This is React</p>
    </>
  );
}

Note: Using React Fragment, you can group multiple elements without adding extra nodes to the DOM.

5. JSX Comments

In JSX, you cannot use regular JavaScript comments like // This is a comment. Instead, you need to use a special syntax for comments within JSX expressions.

Correct JSX comment syntax:

  <div>
    {/* This is a comment inside JSX */}
    <h1>Hello, World!</h1>
  </div>

This allows you to insert comments within the JSX code without breaking the markup or causing errors.