As you probably noticed by now, we've been using a lot of JSX in the previous tutorials. What we really haven't done is taken a good look at what JSX actually is. How does it actually work? Why do we not just call it HTML? What quirks does it have up its sleeve? In this tutorial, we'll answer all of those questions and more! We will do some serious backtracking (and some forwardtracking!) to get a deeper look at what we need to know about JSX in order to be dangerous.
And again thanks for the nice article! I have a question. So JSX is transformed into pure JS on the client side with the help of Babel. I get it. I don’t quite understand if that (transformed) code can be seen in browser code inspector (firebug or any other)? When I inspect the code with firebug I just see exactly what is written in my JS files. Is that fine? I hope you get my question
Hi, kreaton! I think I understand your question. The answer is - yes, that is fine
All of the transformation happens in memory. While your actual JS file will still have JSX in it, when the babel script runs, it turns all of that into regular JavaScript objects. That’s what allows your browser to display the correct content on the screen!
Not a big deal, but perhaps worth mentioning. For typographers, only the < and > characters are “angle brackets”. The general category for ( ), [ ], { }, etc., is “fences” (sometimes, “brackets and braces”), and of course, the ones to which you refer in this article are called {curly braces} or {curly brackets}. [Other common fence names are: angle brackets, parens (well, one paren and a pair of parentheses), square brackets].
