Search code examples
javascriptnode.jsreactjsbabeljsreact-dom

React.renderComponent is not a function

I have read some articles for beginners about ReactJs. The article I read showed only code fragments. I'm having trouble with my first component:

full code:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
    <meta charset="UTF-8">
    <title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>


<script type="text/babel">
    var HelloWorld = React.createClass({
        render: function () {
            return React.DOM.h1("hello world!!");
        }
    });

    React.renderComponent(
        HelloWorld,
        document.getElementById("content")
    );
</script>
</body>
</html>

When I open the page I see embedded:11 Uncaught TypeError: React.renderComponent is not a function

Can anyone please point me in the right direction?

I've also tried this with no luck:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>-->
    <meta charset="UTF-8">
    <title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>


<script type="text/babel">
    var HelloWorld = React.createClass({
        render: function() {
            return React.createElement("h1", null, "Hello world!!");
        }
    });

    ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
</script>
</body>
</html>
Solution

  • EDIT: I see that you use babel-core browser.js, which has been deprecated, remove it and use React directly.

    Remove script type and replace everything with:

    var HelloWorld = React.createClass({
  render: function() {
    return React.createElement("h1", null, "Hello world!!");
  }
});

ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));

    jsbin demo