ReactJSレンダリングの問題

がReactを習得し始めました。ここでは非常に単純なJSXとHTMLファイルです。 http-serverからConsole（Chrome）を実行すると、コンソールにエラーは表示されません。しかし、見たいと思っているボタンはブラウザに表示されません。なぜそれがないのか分からないのか分かりません。ReactJSレンダリングの問題

誰でもお手伝いできますか？また、なぜ我々は、私はこれをしない場合、私は、コンソールにエラー（予期しない構文<）を取得？タグに「タイプ=テキスト/バベルを指定する必要があります。

ありがとう！プレム

HTMLコードを：

<html> 
<head> 
<title> 
    !My first React JS Component! 
</title> 
</head> 

<body> 
    <div id="root"></div> 
    <script src="react.js"></script> 
    <script src="script.jsx" type="text/babel"></script> 
</body> 

</html>

私JSXファイル：

var Button = React.createClass({ 
    render: function() { 
     return (
       <button> Go! </button> 
     ) 
    } 
}); 

ReactDOM.render(<Button />, document.getElementById("root"));

出典

2016-12-02 InfiniteLoop

どのようにこれを蒸散するのですか？ webpack.configを共有できますか？（それがあなたが使っているものなら） –

@NicklasWingerはここで愚かなことを申し訳ありません。私はwebpack.configが何であるか分からない。私はあなたが下に与えたリンクを読んで、それを修正できるかどうかを見ます。ポインタのおかげで – InfiniteLoop

私の答えのリンクを見てみましょう。公式のdocは理解しやすいはずです:) –

あなたはそのようなサイトにjsxを含めることはできません - それは動作しません:)

Webpackのようなツールを介してjsxを蒸散する必要があります。公式documentationは本当に優れており、理解しやすいですし、基本的な環境をどのようにセットアップするか説明してください。

はまた、この上のチュートリアルの数十がありますが、ここで私が参考にしてユーチューブに理解しやすい見つけ自由1です：

React + Redux + Webpack（スターター用Reduxの部分をスキップすること自由に感じなさい - 実際にはA人気の良い測定のために）後で時に拡張することができ、状態を管理するための

を反応させるためにアドオン、このようなものが動作するはずです：

<html> 

<head> 
    <meta charset="UTF-8"/> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script> 
</head> 

<body> 
    <div id="app"></div> 

    <script type="text/babel" src="app.jsx"></script> 
</body> 

</html>

App.jsx：

ReactDOM.render(
    <h1>Hello React!</h1>, 
    document.getElementById('app') 
);

出典

2016-12-02 06:47:43

ReactJSレンダリングの問題

答えて

関連する問題