Converting JSX to JavaScript

JSX is a syntactical sugar for React developers to easily create components. We use transpilers like Babel to convert JSX to JavaScript.

Here we have a JSX snippet:

<div>
  <h1>Hello JSX</h1>
  <h2 label="screen">Sub heading</h2>
</div>

When Babel converts above code to JavaScript, it makes use of React.createElement(). This method accepts 3 parameters.

1. Name of component
2. Attributes of the component
3. Children of the component

Here is how the JavaScript output of above code looks like:

React.createElement("div", {}, [
  React.createElement("h1", {}, "Hello JSX"),
  React.createElement(
    "h2",
    {
      label: "screen",
    },
    "Sub heading"
  ),
]);

You can try this JSX to JavaScript conversion online here.