Why we Use JSX in React Project

Last updated on 10 Aug, 2022

JSX enables us to write React components using a syntax similar to HTML.

Here is a React component created without JSX:

const Pet = (props) => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, props.name),
    React.createElement("h2", {}, props.animal),
    React.createElement("h2", {}, props.breed),
  ]);
};

Here is the same component written using JSX:

const Pet = (props) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <h2>{props.animal}</h2>
      <h2>{props.breed}</h2>
    </div>
  );
};

JSX adds the readability of the code.

Click here for all React interview questions

--- ○ ---

Joby Joseph

Web Architect