DEV Community

Discussion on: Template literals in JavaScript

sroehrl profile image

Hi Laurie,
I teach and therefore switch a lot between different frameworks. What made me curious about this post is your thinking pattern. On a very high level, JSX has the very simple rule that interpreted (so JS) expressions or functionality is surrounded by curly braces in general.

<div className="my-class">

is therefore hard-coded while

<div className={myClass}>

interprets the value of the variable myClass. In pure ECMA you also wouldn't write it the way you described, but would likely have something like

El.innerHTML = `<div class="${myClass}">...`

So I guess my question is: On what basis would one think that the example without curly braces you provided should work? Is it based on your assumptions of how JSX works under the hood, or do you think it stems from working with other technologies prior to working with React?
This is probably an awkward question, but whenever I see my students doing things like that, I cannot explain why people think that markup is intuitive or the way it should work. Maybe you can shed some light ;-)