What is JSX elements in React?

Hey Developer,

Welcome to my React blog, My name is Anas Mahmud. I am a Full-Stack developer.

In this blog, I will discuss about the JSX and React elements in React JS.

Summarized from Learn With Sumit

What is JSX in React JS?

As we know, browsers create a DOM (Document Object Model) element by parsing HTML elements. So HTML elements are ultimately created in the DOM as DOM elements. Which is called HTML DOM Node. Although it looks like an object, but it is not an object. It's the basics of the web.

To create a new element in DOM, we have the method document.createElement('p'); So if we create a DOM element this way, then it would be very difficult. That’s why HTML is here. Using HTML we can create DOM elements quickly and easily. This is how the HTML element works…

In React, we have a method for creating a react element called React.createElement('p', null, 'Hello World!'); because React can only recognize react elements. and React elements are valid JavaScript objects. It looks like: { type: 'p', props: { children: 'Hello, Wrold!'}} This is the difference between a React element and a DOM element.

The HTML element type is HTML DOM Node. On the other hand, React element type is JavaScript Object.

However, if we have to create React elements by method, then it’s cumbersome. That’s why React has a syntax, which is JSX (JavaScript XML). Now we can create a React element by using JSX. <p>Hello World!</p>
And React in the backend compiles the JSX syntax by using Babel Transpiler to create the element through the react.createElement() method.

This JSX syntax is totally JavaScript-powered.

• We can use JavaScript expressions in JSX.

const element1 = <p>Hello {name}!</p>;
const element2 = <p>Hello {firstName + lastName}!</p>;

• And JSX it’s self JavaScript expression. That’s why JSX can be returned from a function. It can be received as a parameter and passed as an argument.

function getGreeting() {
  return <p>Hello World!</p>;
}

console.log(getGreeting());

• As we know, HTML elements have attributes. Such react elements also have attributes.

const index = 0;
const element = (
  <h1 className="heading" tabIndex={index}>
    <span className="text">Hello World!</span>
    <img src="" alt="" />
  </h1>
);

Note: When we have to write multi-line JSX elements, JSX elements must be wrapped with first brackets () .
In this example, React.createElement(); in the backend creates an object representation. Such as :

/*
element = {
  type: 'h1',
  props: {
    className: 'heading',
    tabIndex: 0,
    children: [
      {
        type: 'span',
        props: {
          className: 'text'
        },
      },
      {
        type: 'img',
        props: {
          src: '',
          alt: '',
        }
      }
    ],
  },
}
*/

Simply, JSX is a syntactic sugar for creating React elements.