Understanding JSX in React

What is JSX?

JSX stands for JavaScript XML.

• ✅ Allows writing HTML-like code in JavaScript.
• ✅ Makes React code more readable and easier to write.
• ✅ Translates to standard JavaScript using tools like Babel.

Why Use JSX?

JSX simplifies the process of creating and inserting HTML elements into the DOM.

Instead of doing this:

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

You can do this with JSX:

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

Basic JSX Example

const myElement = <h1>I Love JSX!</h1>;
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

Without JSX:

const myElement = React.createElement('h1', {}, 'I do not use JSX!');
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

Expressions in JSX

JSX lets you embed expressions using {}:

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

You can use variables, functions, or any JavaScript expression inside the curly braces.

Multiline HTML with JSX

To write multiple lines of HTML, wrap them in parentheses:

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

One Top Level Element

JSX must return a single parent element.

✅ Valid:

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

❌ Invalid:

// This will cause an error
const myElement = (
  <p>I am a paragraph.</p>
  <p>I am a paragraph too.</p>
);

✅ Alternative: Use a Fragment (<> </>)

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

JSX Rules Recap

All elements must be closed

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

Use className instead of class

const myElement = <h1 className="header">Hello World</h1>;

Conditional Rendering in JSX

JSX does not support if statements directly inside the return block. Use either:

Option 1: Declare outside JSX

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

Option 2: Use Ternary Operator

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

Summary

• JSX allows mixing HTML with JavaScript in a seamless way.
• Helps keep code clean, readable, and efficient.
• Requires proper syntax like closing tags and wrapping with one parent.
• Use {} for expressions and ternary for conditionals.

Start using JSX to build cleaner, faster, and more dynamic React applications!