React.renderComponentは関数ではありません

ReactJについての初心者向けの記事を読んでいます。私が読んだ記事は、コード断片だけを示していました。私は私の最初のコンポーネントとのトラブルを抱えている：React.renderComponentは関数ではありません

フルコード：

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

を私はembedded:11 Uncaught TypeError: React.renderComponent is not a function

は誰が正しい方向に私をポイントしてくださいでき参照ページを開くとき？

私も運でこれを試してみた：

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

出典

2016-10-19 gstackoverflow

EDIT：私はあなたが廃止されましたbabel-corebrowser.jsを、使用していることがわかり、それを削除し、直接反応使用します。

scriptタイプを削除し、して、すべてを置き換える：あなたの最初の例に問題がReact.renderComponentは関数ではないということです、あなたが代わりにReactDOM.renderを使用する必要が

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

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

jsbin demo

出典

2016-10-19 14:00:26

Iドンエラーが表示されますが、ページが空です。 – gstackoverflow

@gstackoverflow編集済みの回答です。 –

。あなたは今多くの努力を惜しまず、create-react-appを使用してこのアプリケーションを使用してください。それはあなたが使用するために速くする（Webpackホットモジュールの再読み込み）に必要なツールからすべての苦痛を取り除きます。それはあなたが他のルートを取るためにセットアップする必要がある平均的なツールと比べて非常に簡単であり、Reactを作る人々によって作られます。あなたが使用しているReactのバージョン番号で、あなたが行っているチュートリアルは非常にであることを伝えることができます。あなたはインラインそれについて移動しようとしている場合

、あなたの頭の中でこれを使用する -

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

出典

2016-10-19 14:14:37 cchamberlain

React.renderComponentは関数ではありません

答えて

関連する問題