JSX full form JavaScript XML

JSX allows us to write HTML inside JavaScript.

Example:

function App() {
  return (
    <div>
      <h1>Welcome to React</h1>
      <p>This is JSX Example</p>
    </div>
  );
}
export default App;

Rules Of JSX:

1.Return Only One Parent Element

return (
  <h1>Hello</h1>
  <p>React</p>
)  

// Wrong

return (
  <div>
    <h1>Hello</h1>
    <p>React</p>
  </div>
)
// Correct

2. Close All Tags

<input> // Wrong
<input /> // Correct

3. Use className Instead of class:

<div class="box"></div> // Wrong
<div className="box"></div> // Correct

4. JavaScript Inside Curly Braces {}

const name = "Mahendra";

function App() {
  return <h1>Hello {name}</h1>;
}

// Output Hello Mahendra

5. JSX with Variables

const age = 25;

function App() {
  return (
    <h2>My age is {age}</h2>
  );
}

6. JSX with Expressions:

function App() {
  return (
    <h1>{10 + 5}</h1>
  );
}

7. JSX with CSS:

function App() {
  return (
    <h1 style={{ color: "red" }}>
      React JSX
    </h1>
  );
}

8. JSX Comment:

function App() {
  return (
    <div>
      {/* This is JSX Comment */}
      <h1>Hello</h1>
    </div>
  );
}