Empty component after react render
I am trying to make a react component inside a html page. what i have done so far is so react to it
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')
);
and in the HTML page I have this
<div id="content"></div>
when i inspect the html page i find that inside the div i have an empty component like this
<component data-reactroot=""></component>
what am i doing wrong here
+3
source to share
1 answer
A React component must always start with a capital letter, otherwise React will interpret it as a simple HTML element.
Upper types indicate that the JSX tag refers to a React component.
In doing so, define
const Component = React.createClass...
and then render as
ReactDOM.render(<Component />,
document.getElementById('content')
);
+5
source to share