empty component after react render

Question

I'm trying to render a react component inside a html page. what i did so far is implementing react like this ``` var component = React.createClass({ render: function(){ var testStyle = { fontSize: '18px', marginRight: '20px'}; return (

Hello React

1
2
3
4

) } }); ReactDOM.render(< component/>, document.getElementById('content') ); ``` and in the HTML page i have this ```

``` when i inspect the HTMl page i find that inside the div i have an empty component like this ``` ``` what am i doing wrong here

Accepted Answer

A React component must always start with a capital letter, otherwise React interprets it as a simple HTML element.

Capitalized types indicate that the JSX tag is referring to a React component.

That being said, define

`const Component = React.createClass...`

and then render like

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

empty component after react render

Solution

Problem