gstackoverflow gstackoverflow - 1 month ago 24
React JSX Question

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>

Answer

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