React JSX

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML elements directly within your JavaScript code, making it easier to build React applications.

What is JSX? #

JSX simplifies React development by enabling developers to write HTML-like code in JavaScript.

• It converts HTML tags into React elements.
• It eliminates the need for methods like createElement() or appendChild().
• While optional, JSX is widely used for its readability and efficiency.

Writing JSX #

Here’s a comparison of writing React code with and without JSX:

Example 1: Using JSX

const myElement = <h1>I Love JSX!</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

Example 2: Without JSX

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

In the first example, JSX allows you to write HTML-like syntax, making the code more concise and intuitive.

Embedding Expressions in JSX #

You can embed JavaScript expressions within JSX using curly braces {}. These expressions can include variables, properties, or any valid JavaScript code.

Example: Evaluating an Expression

const myElement = <h1>React is {5 + 5} times better with JSX</h1>;

Inserting Multi-Line HTML #

To include large blocks of HTML, wrap the JSX inside parentheses for better readability.

Example: Creating a List

const myElement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

Wrapping Multiple Elements #

JSX requires a single parent element to wrap all child elements.

Example: Using a Parent <div>

const myElement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

Alternatively, you can use a fragment to avoid adding unnecessary DOM nodes:

Example: Using a Fragment

const myElement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

JSX Rules and Best Practices #

1. Elements Must Be Closed #

JSX follows XML syntax, so all elements must be properly closed.

Example: Closing Empty Tags

const myElement = <input type="text" />;

2. Use className Instead of class #

In JSX, the class attribute is replaced with className because class is a reserved keyword in JavaScript.

Example: Assigning a Class

const myElement = <h1 className="my-class">Hello, World!</h1>;

Conditional Rendering in JSX #

JSX doesn’t support if statements directly inside the code. However, you can use one of the following approaches:

Option 1: Using an if Statement Outside JSX

const x = 5;
let text = "Goodbye";
if (x < 10) {
  text = "Hello";
}

const myElement = <h1>{text}</h1>;

Option 2: Using a Ternary Operator

const x = 5;

const myElement = <h1>{x < 10 ? "Hello" : "Goodbye"}</h1>;

Tip: Always wrap JavaScript expressions in JSX with curly braces {}.

Why Use JSX? #

• JSX improves code readability and maintainability.
• It’s tightly integrated with React, ensuring a seamless development experience.
• JSX supports embedding JavaScript and dynamic rendering with ease.

Want to learn React with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!