All geek questions in one place

React.renderComponent is not a function

I read some newbie articles about ReactJs. In the article I read, only code fragments were shown. I am having problems 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 someone point me in the right direction?

I 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>
+4
source share
2 answers

EDIT . I see what you are using babel-core browser.jsthat is deprecated, uninstall it and use React directly.

Remove the type scriptand 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

+1
source

, React.renderComponent , ReactDOM.render. create-react-app . , React ( webpack). , , , React. , React, , , , , , Facebook create-react-app, .

, -

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script>

15 -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script>
  <title>HELLO WORLD</title>
</head>
<body>
  <div id="content"></div>
  <script>
    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>
Hide result
+2

Source: https://habr.com/ru/post/1658215/

More articles:


All Articles