title: React JSX expression for className is not evaluated at runtime
body: <p>I have the following template with the expression for the <code>className</code> property that I expect to be evaluated every time React calls the <code>render</code> method:</p>
  
  <pre><code>&lt;ul className='ratings' onClick={this.handleClick}&gt;
      &lt;li className={'fa-star ' + (this.rating &gt; 0) ? 'fas' : 'far'}&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I expect it to be converted to this and this actually what <a href="https://babeljs.io/en/repl#?babili=false&amp;browsers=&amp;build=&amp;builtIns=false&amp;spec=false&amp;loose=false&amp;code_lz=DwVwNgBAxmCGDO8BysC2BTAvAcgE6wBcBLAOwHN5sIB7EgYTCKgGtMBvAgCyPgDpPYJACZh0DJswC-APgBQEBRGCNocRCgztsAM1gBaeAVi4IVANQQAFFx698xchGkQADAEoIAflO7KEAFw-xtgywAD0jHLh4NJAA&amp;debug=false&amp;forceAllTransforms=false&amp;shippedProposals=false&amp;circleciRepo=&amp;evaluate=false&amp;fileSize=false&amp;timeTravel=false&amp;sourceType=module&amp;lineWrap=true&amp;presets=es2015%2Creact%2Cstage-2&amp;prettier=false&amp;targets=&amp;version=6.26.0&amp;envVersion=" rel="nofollow noreferrer">online Babel transpiler shows</a>:</p>
  
  <pre><code>React.createElement(
      'ul',
      { className: 'ratings', onClick: this.handleClick },
  
      React.createElement('li', { 
          'data-value': '1', 
          className: 'fa-star ' + (this.rating &gt; 0) ? 'fas' : 'far' 
      })
  );
  </code></pre>
  
  <p>I'm using create-react-app starter. And when I debug it I see the following:</p>
  
  <pre><code>createElement('li', { 
      'data-value': '1', className:  true ? 'fas' : 'far', 
      ...
  })
  </code></pre>
  
  <p>It's like the expression is being evaluated during build time. What am I missing?</p>