Learning React - Chapter 7 - Section "What Happens with JSX?"

1

I have a question about the comment below from page 80 the the Learning React book.

All of those neatly nested HTML-like elements, their attributes, and their children get turned into a series of createElement calls with default initialization values. Here’s what our entire Card component looks like when it gets turned into JavaScript
…
return React.createElement(
“div”,
{ style: cardStyle },
React.createElement(Square, { color: this.props.color }),
React.createElement(Label, { color: this.props.color })
);

I read on and I see

Notice that there’s no trace of JSX anywhere! All these changes between what we wrote and what our browser sees are part of the transpiling step we talked about in Chapter 1, “Introducing React.” That transpilation happens entirely behind the scenes, thanks to Babel, which we’ve been using to perform this JSX-to-JS transformation entirely in the browser.

However when I view source in Chrome I still see JSX on my pages. Does “behind the scenes” mean that this is invisible or is there another way to see the compiled JSX?

2

Hi Drew! Welcome to the forums :slight_smile:

Right now, the transpilation happens in memory by JavaScript. What you see in the physical files is read, parsed, and then turned into the various createElement calls by the react-dom and react core scripts you are directly adding.

Later in the book, we’ll move away from these scripts that do in-browser transpilation and move to a proper build setup where what gets generated in the physical files is the “non-JSX” versions of the HTML, CSS, and JS. At that point, you’ll be able to see the compiled version of everything.

Cheers,
Kirupa :nerd_face:

1 Like
3

Ah. Thank you for the clarification. Much appreciated!