title: getting an error when converting react component to string
body: <p>I've been working with react for a couple months now and I've been doing server side rendering successfully. Recently I started rewriting a personal app with ES6 + Babel. When I try to run <code>renderToString()</code> on a react component I get this error:</p>
  
  <blockquote>
    <p>renderToString(): You must pass a valid ReactElement.</p>
  </blockquote>
  
  <p><strong>some code</strong></p>
  
  <p><em>the component</em></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  
  export class InfoBox extends React.Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;div className='info-box'&gt;
                      Hello
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  if(typeof window !== 'undefined') {
      ReactDOM.render(&lt;InfoBox/&gt;, document.getElementById('info-box-mount-point'));
  }
  </code></pre>
  
  <p><em>express index route</em></p>
  
  <pre><code>import express from 'express';
  import React from 'react';
  import ReactDom from 'react-dom/server';
  import InfoBox from '../react-components/info-box/info-box.jsx';
  
  let router = express.Router();
  let InfoBoxFactory = React.createFactory(InfoBox);
  
  /* GET home page. */
  router.get('/', function(req, res, next) {
      res.render('index', { 
          reacthtml: ReactDom.renderToString(InfoBoxFactory)
      });
  });
  
  module.exports = router;
  </code></pre>
  
  <p>another question: should I be saving my components as <code>.jsx</code> or <code>.js</code>? (I'm using <code>jsx</code> in the render method of the component for the html)</p>