How to render a React component (ES6 API) directly using ReactDOM?
<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>