2017-03-27 5 views
0

でテキストをレンダリングすることができないのはなぜ(https://facebook.github.io/react/docs/hello-world.htmlは、私はこれはReact.jsを使用して私の最初のプロジェクトであり、私はHello Worldのを作成するために、この手順に従ってくださいdivの

は、私は私のコードheadタグではなく、なぜReact.jsをインポートうまくいかない?

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script> 

そしてまた、スクリプトのタイプを指定します。あなたは、バベルの参照を与え、これを使用することを忘れてしまったのでindex.htmlには

index.htmlを

<html> 
    <title> 
     My first project using React.js 
    </title> 
    <head> 
     <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
     <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
    </head> 
    <body> 
     <div id="root"> 
     </div> 
     <script> 
     ReactDOM.render(
      <h1>Hello world!</h1>, 
      document.getElementById('root') 
     ); 
     </script> 
    </body> 
</html> 

答えて

2

ただ唯一の空白のページですtype=text/babel

は、作業コードチェック:

<!DOCTYPE html> 
 
<html> 
 
    <title> 
 
     My first project using React.js 
 
    </title> 
 
    <head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script> 
 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
 
    </head> 
 
    <body> 
 
     <div id="root"/> 
 
     <script type='text/jsx'> 
 
      ReactDOM.render(
 
       <h1>Hello world!</h1>, 
 
       document.getElementById('root') 
 
      ); 
 
     </script> 
 
    </body> 
 
</html>

+0

をJSX /テキスト/ラベルとテキストの間の違いは何ですか?私はテキスト/ jsx –

+0

を使用するいくつかの例を参照してください。これは、テキスト/ jsx babel transpileを普通の 'javascript 'に指定すると、このスクリプトに含まれる内容を伝えるでしょう、もしあなたがタイプbabelを指定しなければ、エラー、タイプなしでコードを実行しようとすると、エラーが表示されます:) –

関連する問題