CODEWITHSUNDEEP
javascripthtmlreactjs
Alien Xu
Alien Xu

Reputation: 193

React starter template render nothing

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

    <script type="text/jsx">
     var x = React.createClass({
        render:function(){
            return (
                <h1>I love react</h1>
            );
        }
     });

     React.render(<x/>,document.getElementById('content'));
    </script>
</body>

What's wrong with my reactjs code below? it render nothing. I've included 

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js"></script>

in the head.

Upvotes: 3

Views: 175

Answers (2)

Louay Alakkad
Louay Alakkad

Reputation: 7408

<script type="text/jsx"> won't work. This was how old versions did using the old jsx transformer but it's now deprecated.

Use babel instead. Read more about this topic here.

Also your components' names should always start with a capital letter. <X /> not <x />.

Upvotes: 1

Oleksandr T.
Oleksandr T.

Reputation: 77482

You have several mistakes

  1. you need include ReactDOM and use ReactDOM.render, because since version 0.14.* .render method that located in React is deprecated.
  2. to define component you should use local variable that starts with an upper-case letter (should be X not x)
  3. instead of type="text/jsx" you should use type="text/babel" (don't forget include babel)

Example

Upvotes: 2

Related Questions