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

**URL:** https://forum.kirupa.com/t/learning-react-chapter-7-section-what-happens-with-jsx/641511
**Category:** Uncategorized
**Created:** [January 4, 2020, 4:11pm UTC](https://forum.kirupa.com/t/learning-react-chapter-7-section-what-happens-with-jsx/641511 "2020-01-04T16:11:07Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Drew\_Fleming](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/drew_fleming/32/10855_2.png) [@Drew\_Fleming](https://forum.kirupa.com/u/Drew_Fleming)
#### Post date: [January 4, 2020, 4:11pm UTC](https://forum.kirupa.com/t/learning-react-chapter-7-section-what-happens-with-jsx/641511/1 "2020-01-04T16:11:07Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [January 5, 2020, 5:55am UTC](https://forum.kirupa.com/t/learning-react-chapter-7-section-what-happens-with-jsx/641511/2 "2020-01-05T05:55:16Z")

</div>

Hi Drew! Welcome to the forums 🙂

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 🤓

---

<div class="post-metadata">

### Author: ![Drew\_Fleming](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/drew_fleming/32/10855_2.png) [@Drew\_Fleming](https://forum.kirupa.com/u/Drew_Fleming)
#### Post date: [January 5, 2020, 3:24pm UTC](https://forum.kirupa.com/t/learning-react-chapter-7-section-what-happens-with-jsx/641511/3 "2020-01-05T15:24:03Z")

</div>

Ah. Thank you for the clarification. Much appreciated!
