Explain JSX

JSX full form is JavaScript XML. JSX allows us to write html directly inside javascript that makes it easier to write and add html in React.

It is an extension of the javaScript that is translated into regular JavaScript at runtime.

We can write javascript expressions inside curly braces { } .

The expression can be a react variable and it will execute the expression and return the result.

What we can done in JSX:

• Add javascript expression: Like we can add or multiply or any calculation in jsx.

const App = () => {
 const number = 10;
 return (
  <div>
   <p>Number: {number+2}</p>
  </div>
 );
};

• Add comment: we can easily add comment in jsx using this keywords /* and */.

{/* <p>This is some text</p> */}

• Use class and id: You can easily use class and id in jsx. But you have to use className instead of class in jsx..

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  const id = "some-id";
  return (
    <div>
      <h1 id={id}>This is a heading</h1>
      <h2 className="active">This is another heading</h2>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);