Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

What Is JSX?

DZone's Guide to

What Is JSX?

The more you understand how Babel works, the more powerful it is. Here we take a look at how to JavaScript is transpiled into React.

· Open Source Zone ·
Free Resource

New Report Reveals Open Source Risk Is Still a Mystery to Many. Read more.

You may use it every day, but have you seen what happens after Babel transpiles it?


NOTE: This is a cross-post from my newsletter. I publish each email two weeks after it's sent. Subscribe to get more content like this earlier right in your inbox!

I think a critical part of understanding how to use React effectively is understanding JavaScript and JavaScript expressions. So I'm going to show you a few examples of JSX and its transpiled version to help give you an idea of how this all works. As soon as you can transpile JSX in your head, you can use the abstraction more powerfully.

Here's our simplest example:

<div id="root">Hello world</div>;
React.createElement("div", { id: "root" }, "Hello world");

As shown above, the JSX is transpiled to React.createElement. The API to React.createElement is:

function createElement(elementType, props, ...children) {}
  • elementType can be a string or a function (class) for the type of element to be created
  • props is an object for the props we want applied to the element (or null if we specify no props)
  • ...children is all the children we want applied to the element too. This is just a convenience and we could write an equivalent to above with:
React.createElement("div", { id: "root", children: "Hello world" });

If you have more than one child then you use an array:

<div><span>Hello</span> <span>World</span></div>;
React.createElement("div", {
  children: [
    React.createElement("span", null, "Hello"),
    " ",
    React.createElement("span", null, "World")
  ]
});
// Note: babel uses the third argument for children:
React.createElement(
  "div", // type
  null, // props
  // children are the rest:
  React.createElement("span", null, "Hello"),
  " ",
  React.createElement("span", null, "World")
);

What you get back from a React.createElement call is actually a simple object:

// <div id="root">Hello world</div>
{
  type: "div",
  key: null,
  ref: null,
  props: { id: "root", children: "Hello world" },
  _owner: null,
  _store: {}
};


When you pass an object like that to ReactDOM.render or any other renderer, it's the renderer's job to interpret that element object and create DOM nodes or whatever else out of it. Neat right?!

Here are a few more examples for you:

<div>Hello {subject}</div>;
React.createElement("div", null, "Hello ", subject);
<div>{greeting} {subject}</div>;
React.createElement("div", null, greeting, " ", subject);
<button onClick={() => {}}>click me</button>;
React.createElement("button", { onClick: () => {} }, "click me");
<div>{error ? <span>{error}</span> : <span>good to go</span>}</div>;
React.createElement(
  "div",
  null,
  error
    ? React.createElement("span", null, error)
    : React.createElement("span", null, "good to go")
);
<div>{items.map(i => <span key={i.id}>{i.content}</span>)}</div>;
React.createElement(
  "div",
  null,
  items.map(
    i => React.createElement("span", { key: i.id }, i.content)
  )
);


Notice that whatever you put inside { and } is left alone. This is called an interpolation and allows you to dynamically inject variables into the values of props and children. Because of the way this works, the contents of an interpolation must be JavaScript expressions because they’re essentially the right hand of an object assignment or used as an argument to a function call.

Conclusion

If you'd like to play around with this some more, you can try online with Babel's online REPL. Start here. Hopefully, this helps you understand a little more about how JSX works and how you can use it more effectively. Good luck!


Software composition Analysis for DevSecOps. Start finding vulnerabilities in your open source components today.

Topics:
open source ,javascript expression ,jsx ,react ,javascript to react

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}