Have you ever asked yourself, “Why do I need to use JSX in React?” or “Is JSX really necessary for creating React apps, or is it just a convenient syntax?” Well, you’re not alone! Let’s explore the JSX myth, and see if we can build React elements without using JSX.

Myth: React = JSX

It is a common misconception that React and JavaScript are inextricably linked, that all React code must use JavaScript. However, here’s the truth: JavaScript is not an integral part of React. Writing React code without JavaScript is possible, but it won’t be as graceful.

So, let’s break this myth down and discover the power of react.createElement.

Understanding React.createElement()

At the heart of JSX lies React.createElement(), a powerful function that creates React elements behind the scenes. Let's break down its syntax and explore when and how to use it effectively.

Syntax:

React.createElement(
  type,
  [props],
  [...children]
)

• type: The type of element to create, such as a string representing an HTML tag or a reference to a React component.

• props: An object containing properties (or attributes) to assign to the element.

• children: Optional children elements, which can be strings, React elements, or arrays of React elements.

Example Usage:

const element = React.createElement(
  'div',
  { className: 'container' },
  'Hello, world!'
);

In this example, React.createElement() creates a <div> element with the class name 'container' and the text content 'Hello, world!'.

When to use React.CreateElement()

1. Where JavaScript is not supported In environments or situations where JavaScript is not supported, or is not desired (e.g. server-side renderings), the use of React.CreateElement().

2. Where to dynamically create React elements When you need to dynamically generate React elements based on conditions, or data, you can programmatically generate React elements.

3. How to integrate with 3rd party libraries or tools Some 3rd party libraries and tools may require you to use React.CreatElement() directly when creating and manipulating React elements.

   The JSX Alternative

   Now, let's compare the JSX version of a React element with its equivalent created using React.createElement():

    <div id="parent">
      <div id="child">
        <h1>I'm a h1 tag.</h1>
        <h2>I'm a h2 tag.</h2>
      </div>
      <div id="child2">
        <h1>I'm a h1 tag.</h1>
        <h2>I'm a h2 tag.</h2>
      </div>
    </div>
   

   This JSX code is easy to read and understand. But what if we were to create the same structure without JSX? Brace yourself for a bit of complexity!

    const heading = React.createElement(
      "h1",
      {
        id: "heading",
        xyz: "abc",
        style: { color: "red" },
      },
      "Hello world from React"
    );
   
    const parent = React.createElement("div", { id: "parent" }, [
      React.createElement("div", { id: "child" }, [
        React.createElement("h1", {}, "I'm a h1 tag"),
        React.createElement("h2", {}, "I'm a h2 tag"),
      ]),
      React.createElement("div", { id: "child2" }, [
        React.createElement("h1", {}, "I'm a h1 tag"),
        React.createElement("h2", {}, "I'm a h2 tag"),
        heading,
      ]),
    ]);
   
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(parent);
   

   The absence of JSX makes the code less readable and more verbose. This is where JSX shines – it simplifies the creation of React elements and enhances code readability.

JSX in Action: Making Life Easier

Let's break down the JSX example into its JSX-free equivalent. We're creating a simple structure with a parent div, two child divs, and a nested heading. This structure becomes cumbersome when expressed using React.createElement directly.

The JSX version:

const parent = (
  <div id="parent">
    <div id="child">
      <h1>I'm a h1 tag.</h1>
      <h2>I'm a h2 tag.</h2>
    </div>
    <div id="child2">
      <h1>I'm a h1 tag.</h1>
      <h2>I'm a h2 tag.</h2>
      <h1 id="heading" style={{ color: "red" }}>
        Hello world from React
      </h1>
    </div>
  </div>
);

The JSX version is not only more concise but also more readable. JSX acts as a syntactic sugar that simplifies the creation of complex structures.

Conclusion:

JSX is a blessing in disguise for React developers. Although React can be used without JSX, it's clear that JSX makes React code more readable and concise. By enabling a declarative syntax for UI, JSX allows developers to express complex interfaces in a clean, intuitive way. Overall, JSX unlocks simplicity in React, despite initial concerns over mixing HTML and JavaScript.

Thank you :) See you soon!