Menu
How is it even possible that React allows you to write JSX (XML) within javascript without it throwing any errors? I have been trying to wrap my head around it, and I am not quite sure how the underlying code accomplishes this.
585
JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods. JSX converts HTML tags into react elements. You are not required to use JSX, but JSX makes it easier to write React applications.
Browsers don't understand JSX out of the box, so most React users rely on a compiler like Babel or TypeScript to transform JSX code into regular JavaScript.
Browsers can't read JSX because there is no inherent implementation for the browser engines to read and understand them. JSX is not intended to be implemented by the engines or browsers, it is intended to be used by various transpilers to transform these JSX into valid JavaScript code.
Simple, it looks for <script type="text/jsx"> tags, parses them, generates the corresponding javascript code, and eval's it.
This is why the jsx inline transformer should be used only when developing, as having to parse the jsx code decreases the performance of your web page. When deploying, you should convert all jsx code into js one before deploy.
77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
