I always wonder, why there is no need to put quotes or something around the JSX code. Javascript requires you to put quotes or double quotes around the string or HTML code like that.
That's because it's not a string. It's being parsed as JavaScript code and transformed into React.createElement. if you put quotes around JSX there would not be a way to tell the parser "hey, this should be transformed to React.createElement" since it would be parsed as a string.
The same way a parser knows how fn() is a function call, or how if {...} is an if block! 😅
Don't see JSX as a templating language, see it as part of the JavaScript syntax! You don't need a tag to specify it is JSX because it already is "valid" JavaScript 😊
Aside note: actually the browser doesn't understand JSX at all. Babel is the parser that turns JSX into React.createElement, and that's what the browser sees (and what it can understand) in the end. The above mental model is approximately correct, just don't try to use JSX directly in the browser 😅
ahhh, got the point here; Don't see JSX as a templating language, see it as part of the JavaScript syntax! You don't need a tag to specify it is JSX because it already is "valid" JavaScript.
I always wonder, why there is no need to put quotes or something around the JSX code. Javascript requires you to put quotes or double quotes around the string or HTML code like that.
return (
{text}
// will show JSX is cool);
That's because it's not a string. It's being parsed as JavaScript code and transformed into React.createElement. if you put quotes around JSX there would not be a way to tell the parser "hey, this should be transformed to React.createElement" since it would be parsed as a string.
Thanks for the reply, but there is no starting tag like <?php , how parser knows its jsx not html.
Is it true that , if there are no quotes, js compliler automaticly assumes its jsx code.?
The same way a parser knows how
fn()is a function call, or howif {...}is anifblock! 😅Don't see JSX as a templating language, see it as part of the JavaScript syntax! You don't need a tag to specify it is JSX because it already is "valid" JavaScript 😊
Aside note: actually the browser doesn't understand JSX at all. Babel is the parser that turns JSX into
React.createElement, and that's what the browser sees (and what it can understand) in the end. The above mental model is approximately correct, just don't try to use JSX directly in the browser 😅ahhh, got the point here; Don't see JSX as a templating language, see it as part of the JavaScript syntax! You don't need a tag to specify it is JSX because it already is "valid" JavaScript.
Thank you man, Thanks a lot
Glad I could be of help!