JS quote best practices? ES6 / React -- single, double, backticks?

Question

All of these work of course, but which one is the best practice for ES6 in a jsx file? (ignoring the formatting). It is my understanding that template strings are meant mostly (solely?) for descriptive console logging and not for regular usage?

<div className={`dropdown-menu dropdown-menu-media`}/>
<div className={"dropdown-menu dropdown-menu-media"}/>
<div className={'dropdown-menu dropdown-menu-media'}/>

I realize there is no functional difference between single and double quotes (unless you are alternating between the two to avoid escaping)... but... is one or the other more common or is it "completely" a matter of 'taste' ? i.e. if you were going through code and saw single and double quotes randomly changing for the same case / usage, and you had to make it uniform, which would you use?

const inputProps = {
      onChange: this.onChange,
      className: 'form-control',
      id: "someId",
      status: 'active',
      isOpen: "open"
    };

Answer 1

When working with JSX best practice is to use double quotes directly (no-braces) if just a simple string, or use backtick if interpolating a var into the string

JSX attempts to mimics HTML attributes making it more accessible when learning for first time, and beyond that I find it provides a clear visual distinction between JSX attributes and ordinary strings when scanning code, as they are likely syntax highlighted the same colour

In more general usage...

Backticks are ES6 introduction for template literals and should really only be used for that UNLESS you want to do a multiline string

There is no difference whatsoever between the single and double quotes, however in my experience there has been for a long time a move towards using single quotes (supported by linters) simply because it makes for less cluttered readable code

Sticking to a single code style across projects and enforcing via linting is also a good idea because it reduces escaping mistakes

It often depends on the other languages you have used as some languages allow interpolation in one or the other or in Java for example single quotes denote char rather than String

For what its worth here's my preference for the above reasons...

const awardWinningActor = 'Nic Cage'

const oscarNight = `And the award for Best Actor goes to ${awardWinningActor}`

const winnersSpeech = `Some really long but also totally awesome amazing speech
and also possibly some screaming and a leather jacket slung into the crowd`

<NicCage oscarFor="Best Actor" says={`Here's my ${winnersSpeech}`}} />