基本を取得できませんJSXの実例を参考にして作業してください

すべてのポインタが評価されます。私はReactとJSXとBabelを初めて使っていて、なんとか無骨な作業をしようとしています。私はしばらくこの状態にいました。私は枯れています。基本を取得できませんJSXの実例を参考にして作業してください

は、ここに私のhtmlページです：

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Test React</title> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 
     <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script> 
 
     <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
 
     
 
     <script type="text/babel" src="../TestReact/res/js/main.jsx"></script> 
 
    </head> 
 
    
 
    <body> 
 
     <div>Page to Test React Library</div> 
 
     <p></p> 
 
     <div> 
 
      <button onclick="addComponent()">Add Component</button> 
 
     </div> 
 
     <p></p> 
 
     <div id="root"> 
 
      
 
     </div> 
 
     
 
    </body> 
 
    
 
</html>

そして、ここに私の "main.jsx" ファイルです：

addComponent = function(){ 
 
    ReactDOM.render(
 
     <h1>Hello, world!</h1>, 
 
     document.getElementById('root') 
 
    ); 
 
};

私はChromeを使用しています61.

scriptタグにtype = "text/babel"またはtype = "text/jsx"のいずれかを含めると、「Uncaught ReferenceError：addComponentが定義されていません」という例外が発生します。

スクリプトタグでこのタイプの属性を削除すると、html/xmlが転送されないため、「予期しないトークン<」というエラーが表示されます。

私は削除スクリプトタグに（JSX /バベル用）type属性を持っていると私は、私はエラーを取得していない、引用符で私のaddComponent方法でHTMLを囲み、私は文字列リテラル

で終わります

"<h1>Hello, world!</h1>"

DIV代わりに埋め込まれたヘッダ要素の「ルート」のページにレンダリング - 自然に、しかし、少なくとも、私の小さなJavaScriptとReactDOMライブラリをインポートし、機能していることを私に語っています。

JSXのトランスリンギングが何らかの理由で起こっていないという問題があるようです。

< ---- UPDATE ---->

201710011830に私がいる問題は、JavaScriptの機能（ "addComponent"）内から呼び出さReactDOM.renderを有することに関連しているようです私のJSXファイルはボタンonclickイベントを処理することになっています。そのmain.jsxは次のようになりますので、私はaddComponent機能を削除する場合：

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

それがあるべきのようにH1要素がページに挿入されます。それでは質問が出て、私は当初の意図どおりに動作しませんか？これは、元のJSXスクリプト内でaddComponent関数を定義するために使用した構文のためですか？

出典

2017-09-29 BioData41

ありがとう、@anukul。しかし、バーベル・ライブラリーのブラウザで「オン・ザ・フライ」で起こるはずのことではないのですか？私が見てきたすべての例は、そうしたやり方をしているようです（ただし、これは開発目的では問題ありませんが、パフォーマンスのために制作目的で事前コンパイルする方が良いと指摘しています） – BioData41

type="text/babel"をスクリプトタグに追加すると、main.jsxファイルのコードが変換されます。私はあなたのコードを動作させるaddComponent関数がこの変換効果を働かないと思います。

jsxを入力するか、main.jsxの反応コンポーネントコードをwindow.Hello = <h1>hello</h1>;のように入力してからhtml（またはメインのどこかにある）に入れてみてください。JSX）、あなたは

addComponent = function(){ 
    const Hello = window.Hello; 
    ReactDOM.render(
     <Hello />, 
     document.getElementById('root') 
    ); 
    };

書くことができます。しかし、私は非常に、簡単なデモを利用WebPACKのをお勧めします。https://github.com/yujiangshui/react-i18n-demo

出典

2017-09-29 23:25:54

あなたは、以下のようなあなたのindex.htmlファイルにbundle.jsを追加する必要があります。

<body> 
    .... 
    <div id="root"></div> 
    <script src="/bundle.js"></script> 
</body>

bundle.jsすべての反応のコンポーネントとの依存関係をパックし、WebPACKのを使用してのdevの環境でそれらを一緒に入れ分布です。

出典

2017-09-30 02:34:40

ありがとう、Ravindra私はReactの依存関係がないのですか？ – BioData41

このアプリケーションでは、bundle.jsディストリビューションを結びつけているスクリプトタグを追加するだけで問題は解決する可能性があります。 –

node.jsが必要なものですか？私は、投稿された質問の中で私がやっていることはうまくいくと思っていますが、私はJSXの蒸散について簡単なものがありません。ブラウザ環境や何かを使用することをお勧めします。 – BioData41

基本を取得できませんJSXの実例を参考にして作業してください

答えて

関連する問題