This is a confusing subject in the beginning - maybe a little information would be helpful.
JSX is not valid JS. In order for it to be used by JS, the JS containing the JSX has to be run through a preprocessor, specifically Babel. This (among other things) will go through the JSX and convert it to something that JS can understand. If you have things set up, this is usually an invisible process that we don’t think about.
If you have some JS inside that JSX, then you need to wrap it in the curly braces so Babel knows that it is JS and should be in the final output.
const name = 'Sharad'
const JSX1 = <div>Hi there, name!</div>;
// output: Hi there, name!
// ...because Babel things that it is just text.
const JSX2 = <div>Hi there, {name}!</div>;
// output: Hi there, Sharad!
// ...because the curly braces tell Babel that that is a JS variable.
So in that case, this must be JSX, not JS since there are no curly braces.
As pointed out, it is all JS.
How does Babel know when the JSX begins? Because
const JSX = < // ...
is not valid JS. That opening angle bracket tells the Babel preprocessor to convert that (invisibly, behind the scenes) to valid JS.
Why don’t we need to put the const variable declaration into curly braces, then, if we are writing JS within React?
Often you won’t have to. Sometimes you will, if that const
is happening inside the JS that is inside the JSX. This is a valid pattern that you may see in JSX where you have full on JS going on and you need to declare a variable. And example would be putting an inline map function callback that is itself escaped from JSX - don’t worry about it for now, but there are cases where this can happen.
Yes, React is weird. It is a different way of thinking. But it is also very powerful and elegant once it clicks. But don’t get frustrated if it doesn’t click right away - that is normal.