Why JSX exists in react js?

TL;DR

JSX exists in React for a simple reason: it just makes your life easier as a developer who builds a React app by providing an abstraction layer for future UI representation. It is an optional syntax extension to JavaScript that makes writing your own components much easier. This combination of HTML-like syntax within JavaScript enables you to declare the structure and appearance of your user interfaces in a declarative manner, promoting the reusability of components and facilitating the integration of dynamic content and event handling. JSX aligns perfectly with React's component-based architecture and is crucial for optimizing performance through the use of the virtual DOM. In short, JSX simplifies the development of React applications and enhances the overall development experience.

• TL;DR
• The Problem
• The Solution

The Problem

Before understanding the tool's purpose, let's first identify the problem it solves. Let's say you have to create this HTML tree using JavaScript:

<div class="card">
    <img src="/images/card.png" alt="lorem name" />
    <div>Lorem Ipsum</div>
</div>

Why use JavaScript for this? Well, in some cases, like building a really dynamic single-page app (SPA) using a framework like React, a lot of your HTML needs to be generated with JavaScript.

Creating elements would look like this:

import React from "react";
import "./Card.css";

const Card = ({ name, avatarUrl }) => {
  return React.createElement("div", { className: "card" }, [
    React.createElement("img", { src: avatarUrl }, null),
    React.createElement("div", null, name)
  ]);
};

export default Card;

JSX syntax

import React from "react";
import "./Card.css";

const Card = ({ name, avatarUrl }) => {
  return (
    <div className="card">
      <img src={avatarUrl} alt={name} />
      <div>{name}</div>
    </div>
  );
};

export default Card;

Let's examine a more intricate HTML structure, which I've copied from airbnb.com. As you can see, there's a lot happening here.

<div class="s1yvqyx7 dir dir-ltr">
  <div class=" dir dir-ltr">
    <div class="awuxh4x dir dir-ltr">
      <div class="cw9aemg dir dir-ltr">
        <div class="c14whb16 dir dir-ltr"><a aria-hidden="true" tabindex="-1" class="rfexzly dir dir-ltr" href="/" rel="noopener noreferrer nofollow" target="listing_45271558">
            <div class="cjv59qb dir dir-ltr">
              <div class="dqra4ro bmwtyu7 dir dir-ltr" role="presentation" aria-hidden="true" style="--dls-liteimage-height: 100%; --dls-liteimage-width: 100%; --dls-liteimage-background-image: url('data:image/png;base64,null'); --dls-liteimage-background-size: cover;">
                <picture class=" dir dir-ltr">
                  <source srcset="/">
                </picture>
              </div>
            </div>
          </a><a aria-hidden="true" tabindex="-1" class="rfexzly dir dir-ltr" href="/" rel="noopener noreferrer nofollow" target="listing_45271558">
            <div class="cjv59qb dir dir-ltr">
              <div class="dqra4ro bmwtyu7 dir dir-ltr" role="presentation" aria-hidden="true" style="--dls-liteimage-height: 100%; --dls-liteimage-width: 100%; --dls-liteimage-background-image: url('data:image/png;base64,null'); --dls-liteimage-background-size: cover;">
                <picture class=" dir dir-ltr">
                </picture>
                <div class="rsb5yse bmwtyu7 dqqltwe dir dir-ltr" style="--dls-liteimage-background-size: cover; --dls-liteimage-background-image: url(https://a0.muscache.com/im/pictures/ec3dca11-346f-4013-9f06-5dd3be4d3207.jpg?im_w=720);"></div>
              </div>
            </div>
          </a><a aria-hidden="true" tabindex="-1" class="rfexzly dir dir-ltr" href="/"></a></div>
      </div>
    </div>
  </div>
</div>

The Solution

Here's where JSX comes into play. It lets you switch from code that's almost like HTML to code that's essentially HTML. Later on, this HTML-like code gets converted to regular JavaScript that browsers can read.

Imagine you have thousands of components in a React app that you're working on. With over 10 developers collaborating, reading and adding new features becomes easier because our visual memory works well with JSX, which resembles HTML.

It's important to know that the JSX we write doesn't immediately show up on the web page.

JSX is transformed into React elements using tools like babel-plugin-transform-react-jsx. To make React components that display our UI, we can do it in two ways: directly with the React API using React.createElement, or with JSX syntax.

React doesn't directly understand JSX; it expects to see React.createElement. JSX must be converted to JavaScript before React can use it, which is typically done with a tool called Babel.

That's why JSX is often called 'Syntactic Sugar' because it's not mandatory to write React components in JSX; you can use the React API directly.

Writing Markup with JSX