REACT | single, double, backticks *

/ Javascript, SprUng, KEEPERS, CODE-NOW-NOW-NOW, CODING, coding cheat, Debugging, React, React-CSS / 4 minutes of reading
+ REACT

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

https://stackoverflow.com/questions/44208081/js-quote-best-practices-es6-react-single-double-backticks

 

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"
    };

 

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}`}} />

 

https://eslint.org/docs/rules/jsx-quotes

Linter Rules – enforce the consistent use of either double or single quotes in JSX attributes (jsx-quotes)

The --fix option on the command line can automatically fix some of the problems reported by this rule.

JSX attribute values can contain string literals, which are delimited with single or double quotes.

<a b='c' />
<a b="c" />

Unlike string literals in JavaScript, string literals within JSX attributes can’t contain escaped quotes. If you want to have e.g. a double quote within a JSX attribute value, you have to use single quotes as string delimiter.

<a b="'" />
<a b='"' />

Rule Details

This rule enforces the consistent use of either double or single quotes in JSX attributes.

Options

This rule has a string option:

  • "prefer-double" (default) enforces the use of double quotes for all JSX attribute values that don't contain a double quote.
  • "prefer-single" enforces the use of single quotes for all JSX attribute values that don’t contain a single quote.

prefer-double

Examples of incorrect code for this rule with the default "prefer-double" option:

/*eslint jsx-quotes: ["error", "prefer-double"]*/

<a b='c' />

Examples of correct code for this rule with the default "prefer-double" option:

/*eslint jsx-quotes: ["error", "prefer-double"]*/

<a b="c" />
<a b='"' />

prefer-single

Examples of incorrect code for this rule with the "prefer-single" option:

/*eslint jsx-quotes: ["error", "prefer-single"]*/

<a b="c" />

Examples of correct code for this rule with the "prefer-single" option:

/*eslint jsx-quotes: ["error", "prefer-single"]*/

<a b='c' />
<a b="'" />

When Not To Use It

You can turn this rule off if you don’t use JSX or if you aren’t concerned with a consistent usage of quotes within JSX attributes.

Version

This rule was introduced in ESLint 1.4.0.

Resources

Scroll to Top