React: is there a different between using curly brackets and omitting them?

Question

With curly brackets:

<div theBestProp={"diagonal-texture"}> ...

vs without curly brackets:

<div theBestProp="diagonal-texture"> ...

Same question is relevant for the "ref" prop:

With curly brackets (from React's docs), accessible through this._input:

<div ref={(c) => this._input = c} ...

vs without curly brackets, accessible through this.refs.commander:

<div ref="commander"> ...

I've also noticed that everything comes out as strings. For this:

<PriceOption id="1" yes="true" price="free" audience="for individuals" plan="Starter" />

The props will be this (all strings):

{
        "id": "1",
        "yes": "true",
        "price": "free", 
        "audience": "for individuals", 
        "plan": "Starter"
    }

So I guess only way to pass booleans and numbers is the following:

 <PriceOption id={1} yes={true} price="free" audience="for individuals" plan="Starter" />

right?

Answer 1

Without the curly it will be a string of diagonal-texture. With curly. React will try to evaluate it and find a string.. The end result is the same. Just that you take longer steps by telling react to evaluate it.

while the second example:

<div ref={(c) => this._input = c} 
// react will run the function inside ref, 
// the arrow function always return something, that's js not react
// this is javascript ES6, not react,  

// the function above is the same as: 
<div ref= { (c) => {                   // arrow function returns a closure
                return this._input = c // the closure is returning this._input
             }) 
}

so yeah, in react, <div ref={} /> this will tell react to evaluate whatever inside the curly.

Answer 2

In React JSX syntax, inside of curly braces, Javascript will be evaluated. As the documentation https://facebook.github.io/react/docs/jsx-in-depth.html#attribute-expressions says,

To use a JavaScript expression as an attribute value, wrap the expression in a pair of curly braces ({}) instead of quotes ("").

In your first example, the expression "diagonal-texture" evaluates to the same thing as the string "diagonal-texture". Not so for the expression in the second example.