LaurieEarlier this week I asked people which piece of syntax they always find themselves Googling. My answer to that question was string literals in React (officially called template literals but we'll get to that).
What’s the piece of syntax that no matter how many times you use it you’ll always look it up?
For me it’s string literals in React.02:07 AM - 06 Aug 2020
In response, I got a lot of people asking questions. Aren't string literals an ES6 piece of syntax? Yes, they are.
What I should have said is that I always seem to mess up string literals INSIDE React. What's the difference? Let's talk about it!
"Just strings"
String literals are a concept with many names! You may have heard them referred to as template literals, template strings, and then my combined version 😅.
The long name for regular strings is “string literal”. However, due to the naming of template strings/template literals it’s gotten confused in modern conversations.
In some ways, string literals and strings can be the same thing. The following is considered a string literal.
const text = `some string`
That looks like it's a regular string. The only difference is that it's surrounded by backticks instead of quotation marks.
Multi-line strings
The reason this concept is more powerful than strings is because you can do more with it than the example above.
For instance, string literals allow for multiline strings.
const text = `some string line 1
and line 2 too`
How about an expression?
String literals are popular not necessarily because of the two use cases above, but because of the fact that you can include expressions in them.
const text = `some string ${expression}`
An expression can be a lot of things. Some kind of string or number manipulation logic. Or, more commonly, a variable.
let name = getName()
const fullName = `some string ${name}`
So how is it different in React?
Why does this confuse me in React? Arguably it shouldn't, it's the same ES6 syntax. The reason I always seem to mess it up in React is because you can't use a string literal directly when you pass it in a component.
<Component name=`some string ${name}`/>
The above code isn't valid. In order to use that string literal, you have to surround it with curly braces.
<Component name={`some string ${name}`} />
It's powerful code. Incredibly important and often used. But for me, it's one too many characters to remember.
And?
So I look it up! And maybe in the future, I'll look at this post instead. However, even if I can't write it off the top of my head it's invaluable to know what it is.
As with any piece of syntax, the more building blocks you know the more approachable it is to read code. It allows you to start to understand how the final codebase was put together.
