prázdny komponent po reakcii na omietku - reaguje

Snažím sa poskytnúť reaktívnu zložku vo vnútri html stránky, čo som urobil tak ďaleko, že implementácia reaguje takto

var component =  React.createClass({
render: function(){
var testStyle = { fontSize: "18px", marginRight: "20px"};
return (
<div>

<h1>Hello React</h1>
<div><ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul></div>
</div>

)

}
});

ReactDOM.render(< component/>,
document.getElementById("content")
);

a na stránke HTML to mám

<div id="content"></div>

pri kontrole HTMl stránky zisťujem, že vnútri div mám prázdnu súčasť ako je táto

<component data-reactroot=""></component>

čo robím zlé tu

odpovede:

Komponent React musí vždy začínať veľkým písmenom, inak React ho interpretuje ako jednoduchý element HTML.

Kapitalizované typy naznačujú, že značka JSX odkazuje na komponent React.

Toto bolo povedané, definujte

const Component = React.createClass...

a potom vykresliť

ReactDOM.render(<Component />,
document.getElementById("content")
);