2017-05-21 22 views
0

私が勉強ReactJSが機能していません。基本的なレッスンを受けるために私はthisを訪問しました。最初のレッスンを通過した後、私は次のコードを書くことができます:基本的な要素は

<!DOCTYPE html> 
<html> 

    <head> 

     <meta charset="utf-8"> 

     <title>Hello world with date time in ReactJS</title> 

     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 


    </head> 

    <body> 

     <div id="root"></div> 


     <script type="text/jsx"> 

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

     </script> 


    </body> 

</html> 

をしかし、私の驚きに、それはではなく、自分のコンピュータ上または私のバイオリンherehereを進めています。私のコードがうまくいかない理由を教えてください。ありがとう。 text/babel

答えて

1

変更text/jsx。できます。

+0

あなたの右jiexishede!出来た。どうもありがとう。 –

+0

上記のコードの下に別のコードを書くと、前の要素が表示されないので、同じdivの上にh1要素の上にリンクという別の要素を作成することは可能でしょうか? –

+0

@NizamuddinShaikhはフィドルにあなたのコードを表示してください。 'const要素=

< h1> Hello,world < /h1>< h2> Hello,world.TOO < /h2>
; '私はこのコードをバイブルに書きます。それは示す。 – jiexishede

1

問題は、JSX処理が有効になっていないということです。
jsFiddleを使用している場合は、JSコードをJavaScript編集セクションに移動し、このセクションの右上にある設定ボタンをクリックし、言語選択からBabel + JSXを選択します。

+0

はいBartekあなたは正しいです、あなたの上記の提案を実行した後、バイダル作品。どうもありがとう。 –

+0

2番目の質問に光を投げてもいいですか? –

関連する問題