CODEWITHSUNDEEP
reactjs
ChemseddineZ
ChemseddineZ

Reputation: 1818

empty component after react render

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 (
  <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

Upvotes: 4

Views: 2503

Answers (1)

Lyubomir
Lyubomir

Reputation: 20037

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

Upvotes: 5

Related Questions