React JSX const

JavaScript
#1

Tell us what’s happening:
Describe your issue in detail here.
In the code below, I was wondering the code is JS or JSX…then I see an explanation in the exercise that states that to "write JavaScript directly within JSX…you simply include the code you want to be treated as JavaScript within curly braces: { 'this is treated as JavaScript code' } . So in that case, this must be JSX, not JS since there are no curly braces. But since I have not yet learned any JSX…what does this code mean? What is a const? Is it the same as in JS? How do we know the difference?

Your code so far


const JSX = <div></div>;

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

Challenge: Create a Simple JSX Element

Link to the challenge:

#2

It is JS. Having code written using JSX syntax maybe non-standard JS, but it is still JS

Look

const num = 1
const str  = "hi"
const reg = /^a_regex$/
const jsx = <p>Some JSX</p>

num isn’t a special “number const”, it’s just a variable called num. str isn’t a special “string const”, reg isn’t a special “regex const”, and jsx isn’t a special “JSX const”

As another example, in JavaScript I can have interpolated strings, like this:

const one = 1;

const oneString = `the variable "one" has the number ${one} assigned to it`.

The variable one interpolated into oneString isn’t a special different type of variable that only exists in strings, it’s just a JavaScript variable. And, again oneString isn’t a special type of “string const”, it’s just a JavaScript variable.

#3

Why don’t we need to put the const variable declaration into curly braces, then, if we are writing JS within React?

#4

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.

#5

@kevinSmith , thanks for the further explanation, this is helpful.

#6

Cool, I’m glad to hear it. I wouldn’t expect you to understand it completely yet - just give it time.

#7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.