反応するjs単純なスクリプトは動作しません

私はリアクションjsを学ぶことを試みているthisのtutortial youtubeで。私のプログラムは、いくつかのreact.jsを持つ非常に単純なhtmlコードです。私は彼が作ったすべての一歩をたどりましたが、私は彼と同じ結果を得ていませんでした。私のコードで何が間違っているのか教えてください。どうしてうまくいかないのですか？反応するjs単純なスクリプトは動作しません

コード：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Haime Computer Shop</title> 
    <link rel="stylesheet" type="text/css" href="index_css.css"> 
    <script src="src/js/react.min.js"></script> 
    <script src="src/js/react-dom.min.js"></script> 
    <script src="src/js/browser.min.js"></script> 
</head> 
<body> 

<div class="homeLinks_dcls"> 
<p><a href="index.html" id="home_id"> Home</a></p> 
<p><a href="aboutUs.html" id="aboutUs_id"> About Us</a></p> 
<p><a href="services.html" id="services_id"> Services</a></p> 
<p><a href="contactUs.html" id="contactUs_id"> Contact us</a></p> 
</div> 

<div id="container"></div> 

<script type="text/babel"> 
var myReactObj = React.createClass({ 
    render: function(){ 
    return (<h2>This is a component!</h2>); 
    } 
}); 

ReactDOM.render(<myReactObj/>, document.getElementById('container')); 
</script> 

</body> 
</html>

私はテキストのみ "会社、サービス、お問い合わせホームを、" 見ることができます。私が見ることができないのは、 "This is a component！"です。 myReactObject内のテキストご協力いただきありがとうございます...

出典

2017-07-22 Haime Reyes

コンソールにエラーを取得していますか？ –

時間をいただきありがとうございますが、私はただ解決しました。何か試してみると、オブジェクト名がCAPITALIZEで始まることが分かります。 –

JSX構文（javascriptとhtmlタグが埋め込まれています）をブラウザで直接処理しようとしているために問題が発生しましたが、コードを翻訳するためにはBabelが必要です。あなたのHTMLに

追加バベル：
この時点で
、あなたは2つのオプションを持っている

JSX

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>With Babel</title> 
    <link rel="stylesheet" type="text/css" href="index_css.css"> 
    <script src="src/js/react.min.js"></script> 
    <script src="src/js/react-dom.min.js"></script> 
    <script src="src/js/browser.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script> 
</head> 
<body> 

<div class="homeLinks_dcls"> 
<p><a href="index.html" id="home_id"> Home</a></p> 
<p><a href="aboutUs.html" id="aboutUs_id"> About Us</a></p> 
<p><a href="services.html" id="services_id"> Services</a></p> 
<p><a href="contactUs.html" id="contactUs_id"> Contact us</a></p> 
</div> 

<div id="container"></div> 

<script type="text/babel"> 
var myReactObj = React.createClass({ 
    render: function(){ 
    return (<h2>This is a component!</h2>); 
    } 
}); 

ReactDOM.render(
    React.createElement(myReactObj), 
    document.getElementById('container') 
); 

</script> 

</body> 
</html>

はJavaScriptのみを使用するようにコードを変更して、として以下のサンプル：

javascript

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Without Babel</title> 
    <link rel="stylesheet" type="text/css" href="index_css.css"> 
    <script src="src/js/react.min.js"></script> 
    <script src="src/js/react-dom.min.js"></script> 
    <script src="src/js/browser.min.js"></script> 
</head> 
<body> 

<div class="homeLinks_dcls"> 
<p><a href="index.html" id="home_id"> Home</a></p> 
<p><a href="aboutUs.html" id="aboutUs_id"> About Us</a></p> 
<p><a href="services.html" id="services_id"> Services</a></p> 
<p><a href="contactUs.html" id="contactUs_id"> Contact us</a></p> 
</div> 

<div id="container"></div> 

<script type="text/javascript"> 
var myReactObj = React.createClass({ 
    render: function(){ 
    return React.createElement('h2', { }, 'This is a component!'); 
    } 
}); 

ReactDOM.render(
    React.createElement(myReactObj), 
    document.getElementById('container') 
); 

</script> 

</body> 
</html>

出典

2017-07-24 20:47:25

反応するjs単純なスクリプトは動作しません

答えて

関連する問題