title: Custom HTML Element Tag within React JSX
body: <p>We're using a component library which uses custom elements. This requires us to use custom HTML tags within our JSX. For a very simple example:</p>
  
  <pre><code>var App = React.createClass({
     render: function() {
         return &lt;niner/&gt;;
     }
  });
  
  React.render(
          &lt;App/&gt;,
          document.getElementById('content')
  );
  </code></pre>
  
  <p>In this particular case, I just need React to output a <code>niner</code> tag without it trying to do anything too special with it. I intentionally have no niner React component.</p>
  
  <p>According to <a href="http://facebook.github.io/react/docs/jsx-in-depth.html" rel="noreferrer">JSX in depth</a>, </p>
  
  <blockquote>
    <p>React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.</p>
  </blockquote>
  
  <p>Which led me to believe that ReactJS would just treat <code>&lt;niner/&gt;</code> as a regular HTML tag and not choke on it. When I run the code above, however, I get the following error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'replace' of undefined 10734305_1719965068228170_722481775_n.js:94
  createSourceCodeErrorMessage 10734305_1719965068228170_722481775_n.js:141
  transformCode 10734305_1719965068228170_722481775_n.js:187 
  run 10734305_1719965068228170_722481775_n.js:242
  check 10734305_1719965068228170_722481775_n.js:295
  loadScripts 10734305_1719965068228170_722481775_n.js:324 
  runScripts
  </code></pre>
  
  <p>Do I need to do some sort of wizardry to get this to work? Thanks.</p>