title: How to render a React component (ES6 API) directly using ReactDOM?
body: <p>I'm using the <a href="https://facebook.github.io/react/docs/component-api.html" rel="nofollow noreferrer">ES6 classes API of React</a> (by using TypeScript) and want to render a subtyped class of type <code>React.Component</code> using <code>ReactDOM.render()</code>.</p>
  
  <p>The following code works:</p>
  
  <pre><code>class MyComponentProps {
      someMember: string;
  }
  
  class MyComponent extends React.Component&lt;MyComponentProps, {}&gt; {
      constructor(initialProps: MyComponentProps) {
          super(initialProps);
      }
  }
  
  let rootNode = document.getElementById('root');
  ReactDOM.render(
      &lt;MyComponent someMember="abcdef" /&gt;,
      rootNode
  )
  </code></pre>
  
  <p>Now, given the explicit typing of the constructor in <code>react.d.ts</code>, I'd assume I can pass an instance of the MyCustomProps object that populates with initial properties (as done in the above code). But how to render the component then directly without JSX/TSX syntax?</p>
  
  <p>The following does NOT work:</p>
  
  <pre><code>ReactDOM.render(new MyComponent(new MyComponentProps()), rootNode);
  </code></pre>
  
  <p>I know I could just use the JSX syntax as a workaround, but as my <code>MyCustomProps</code> object is pretty large, I don't want to repeat every member of the <code>MyCustomProps</code> object.</p>