A myth: React can only be written using JSX

Have you ever wondered why JSX is even necessary in the world of React? Are you unsure if this is a necessary component of creating React applications, or merely a handy syntax?

You're not alone, though!

Let's dive into the JSX myth and explore whether we can create React elements without relying on JSX.

Myth: React = JSX

It's a common belief that React and JSX are inseparable, that every piece of React code must be adorned with JSX. But here's the reality check: JSX is not mandatory! You can write React code without JSX, though it may not be as elegant.

Let's unravel this myth and explore 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. JSX is Not Available: In certain environments or scenarios where JSX is not supported or desirable (such as in server-side rendering), React.createElement() becomes essential.

2. Dynamically Generating Elements: When you need to generate React elements dynamically based on conditions or data, React.createElement() offers the flexibility to do so programmatically.

3. Integrating with Third-party Libraries: Some third-party libraries or tools may require using React.createElement() directly to create and manipulate 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 – A Blessing in Disguise

While it's possible to write React code without JSX, it's evident that JSX adds a layer of simplicity and readability to our code. It serves as a powerful tool for expressing complex UI structures in a more concise and human-friendly manner.

Thank you :) See you soon!