CODEWITHSUNDEEP
javascriptreactjsjsxreact-props
j obe
j obe

Reputation: 2039

Why doesn't a string prop need curly braces in a JSX element?

In a JSX element, e.g.

<User name="Dave" age={34} />

I am trying to understand why a string can just be quoted but other types, e.g. a number or boolean, have to be in curly braces. I've read a few other posts and I understand that the curly braces evaluate an expression which is then passed as the prop - but I can't find a specific reason why strings dont have to be inside curly braces.

Should I just accept this as just the way it works or is there a deeper reason to understand?

Upvotes: 2

Views: 1940

Answers (1)

HoldOffHunger
HoldOffHunger

Reputation: 20891

It's really hard to say precisely why some code turn out a particular way, especially with a massive project that has so many contributing hands, but maybe we can make a good guess.

In 2017, Jordan Walke, creator of ReactJS and JSX, was asked "How did you come up with the idea on React?" His response covered many points, but only briefly listed his actual inspiration for ReactJS...

*"We naturally wanted to deploy UI to web browsers, and at the time, the compile-to-JS landscape was not as mature as it is now - I don't even think source maps existed yet....

To finally answer your question: yes React was inspired by many other technologies including other UI frameworks which we had been using at the time. More than anything, React was inspired by the ML family of languages (including SML/OCaml) which helped me articulate the value (no pun intended) of immutability. (Source: Jordan Walke: Facebook Engineer | Creator of React.js & Reason.]

In ReactJS, you {} curly brackets mean an expression and "" quotes mean a string literal (source: ReactJS.org: Introducing JSX. But why both? Probably to make it flexible with the general, underlying structure (HTML, XML) that was used by various JavaScript UI frameworks, which typically use attributes in the form of <element attribute="val" />. But I am only making a guess with limited information.

Upvotes: 3

Related Questions