What is JSX? Why we use JSX in React?

JSX stands for JavaScript XML. It allows us to write HTML in React and makes it easier to add UI inside JavaScript code. JSX is an extension of JavaScript and is translated into regular JavaScript at runtime.

You can embed expressions inside {} in JSX.

These can be variables, objects, or any valid JS expression.

let name = "Rajesh Rathwa";
const obj = { fn: "Rajesh", ln: "Rathwa" };

function App() {
  return (
    <div className="app-container">
      <h1>{name}</h1>
      <h1>Static : 5 + 5</h1>
      <h1>Dynamic : {5 + 5}</h1>
      <h1>Object : {obj.fn} {obj.ln}</h1>
    </div>
  );
}

export default App;

If you try to return multiple JSX elements without a parent wrapper, React will throw an error.

This happens because JSX expressions must have one top-level element.

// ❌ Invalid JSX (multiple elements without parent wrapper)
function App() {
  return (
    <h1>Hello World</h1>
    <p>I am learning ReactJS</p>
  );
}

export default App;

The HTML (JSX) code must be wrapped in ONE top level element.

If you want to write two or more elements, you must put them inside a parent element (like a <div>).

JSX will throw an error if the HTML is not correct, or if the HTML misses a parent element.

Alternatively, you can use a fragment to wrap multiple lines. This will prevent unnecessarily adding extra nodes to the DOM.

A fragment looks like an empty HTML tag: <> </>

Note: The render() method takes only one argument. If you try to pass two arguments (two top-level JSX elements), older React versions throw an error, while newer versions display only the first element in the browser and show a warning in the console.

So, how can I display multiple elements inside ReactDOM?

There are three ways:

1. Return elements inside an array
2. Wrap elements inside a <div> tag
3. Use React.Fragment or shorthand <> </>

You can also return multiple JSX elements inside an array.

Note: while we can use array then we can use comma for separate elements. So Now we can use div tag as a parent tag.

function App() {
  return [
    <h1 key="1">Hello World</h1>,
    <p key="2">I am learning ReactJS</p>
  ];
}

export default App;

The simplest way to fix the error is to wrap elements inside a <div>.

Note: Using a div adds an extra wrapper inside the HTML. You can see this extra div by opening the browser’s Inspect tool.

This extra div can sometimes cause problems when applying CSS styles.

To avoid creating this extra div, React provides React.Fragment or its shorthand syntax <></>.

function App() {
  return (
    <div>
      <h1>Hello World</h1>
      <p>I am learning ReactJS</p>
    </div>
  );
}

export default App;

Before React version 16.0.0, we could only use the <div> tag. But when we used a <div>, it created an extra wrapper inside index.html under the root <div>. You can check this by pressing the F12 key and looking into the Elements tab of the browser.

Sometimes, this extra <div> caused problems when working with CSS Grid or Flexbox layouts.

So, we can use a React.Fragment to avoid creating an extra <div>.

React.Fragment lets you group elements without adding extra nodes to the DOM.

import React from 'react';

function App() {
  return (
    <React.Fragment>
      <h1>Hello World</h1>
      <p>I am learning ReactJS</p>
    </React.Fragment>
  );
}

export default App;

React also supports shorthand syntax for fragments using <> </>.

import React from 'react';

function App() {
  return (
    <>
      <h1>Hello World</h1>
      <p>I am learning ReactJS</p>
    </>
  );
}

export default App;

JSX follows XML rules, and therefore HTML elements must be properly closed.

Close empty elements with />.

JSX will throw an error if the HTML is not properly closed.

import React from 'react';

function App() {
  return (
    <>
      First Name : <input type="text" name="fn" />
      <hr />
    </>
  );
}

export default App;

The class attribute is widely used in HTML, but since JSX is rendered as JavaScript and class is a reserved keyword, you cannot use it in JSX.

Use the className attribute instead. JSX translates className into class when rendered in the DOM.

Similarly, the for attribute is replaced with htmlFor in JSX.

function App() {
    return (
    <>
    <div className="container">
      <label htmlFor="username">Username:</label>
      <input type="text" name="fn"/>
    </div>
    </>
  );
}

export default App;

You cannot use if directly inside JSX.

Use conditional logic outside JSX or use a ternary operator.

function App() {
  // ✅ JavaScript logic outside return
  let a = 10;
  let msg = "";
  if (a > 5) {
    msg = "Hello";
  } else {
    msg = "Bye";
  }

  return (
    <>
      {/* ✅ JSX comment */}
      <h1>{msg}</h1>
    </>
  );
}

export default App;

You cannot use if directly inside JSX.

✅ Instead, use the ternary operator (condition ? expr1 : expr2) for inline conditional rendering.

function App() {
  let a = 10;

  return (
    <>
      {/* ✅ Using ternary operator directly in JSX */}
      <h1>{a > 5 ? "Hello" : "Bye"}</h1>
    </>
  );
}

export default App;