празен компонент след реакция на реакцията

Опитвам се да направя реагиращ компонент вътре в html страница. Това, което направих досега, е да внедря реагира по този начин

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")
);

и в HTML страницата имам това

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

когато инспектирам HTMl страница, намирам, че вътре в div има празен компонент като този

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

какво правя тук грешно

Отговори:

Компонентът "Реакт" винаги трябва да започва с главна буква, в противен случай React го тълкува като прост HTML елемент.

Капитализираните типове показват, че маркерът JSX се отнася за компонент React.

Това е казано, дефинирайте

const Component = React.createClass...

и след това да направи като

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