title: Does ReactJS parse object literals into strings?
body: <p>I am walking through the ReactJS tutorial right now, mulling over the section 'Thinking In React', and in particular an aspect of the code really bothers me:</p>
  
  <pre><code>class ProductRow extends React.Component {
    render() {
      var name = this.props.product.stocked ?
        this.props.product.name :
        &lt;span style={{color: 'red', background: 'green'}}&gt;     // this line
          {this.props.product.name}
        &lt;/span&gt;;
      return (
        &lt;tr&gt;
          &lt;td&gt;{name}&lt;/td&gt;
          &lt;td&gt;{this.props.product.price}&lt;/td&gt;
        &lt;/tr&gt;
      );
    }
  }
  </code></pre>
  
  <p>For the rest of the code, see: <a href="http://codepen.io/lacker/pen/vXpAgj" rel="nofollow noreferrer">http://codepen.io/lacker/pen/vXpAgj</a></p>
  
  <p>... at line 11, style is assigned {color: 'red'}. In my head, this shouldn't work, because it doesn't conform to the styling syntax (e.g. "color: 'red'"). Yet, if I replace curly braces with double quotes, the code doesn't run. </p>
  
  <p>1) Is there an ES6/JSX/React rule that converts object literals to the double quote format? (How does this work?)</p>
  
  <p>2) Why wouldn't replacing the curly brackets with double quotes work? (Tried it on codepen)</p>
  
  <p>Thank you!</p>