2017-02-08 8 views
0

を反応こんにちは、世界はでは動作しませんが、[更新:]

  1. ですから、バベルhttps://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js
  2. が反応必要それはAPIだとReactDomを使用する必要がある変更されました - >See this post

だから、私はあまりにも遠くにウサギの穴の下だが、私は非常にシンプルなページだけでアップロードし、仕事しませんが理解できないようですショットのいずれかを反応させる与えることを試みました。 。

私はちょうど

<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title of the document</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.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> 
<div id="root"> 
<body> 
    <script type="text/babel"> 
    console.log("A"); 
     var ExampleElement = React.createClass({ 
      render : function() 
      { 
       return (<p>Testing 123</p>); 
      }; 
     }); 
     React.render(<ExampleElement/>, document.getElementById('root')); 
    </script> 
</body> 
</html> 

それはChromeとFirefoxで、私は空白のページをご覧の両方を動作しませんreact_hello.htmlとコンソールでこれを取得している:

ダウンロードデベロッパーツールを反応させ、(代わりに、ファイルの:URL)HTTPサーバを使用し、より良い開発の経験のために:https://fb_dot_me_url_blocked/react-devtools

確かに私はdevのツールをダウンロードすることができますが、私は私がしたいので、したくありませんどのように動作するかを理解すること。なぜ私は反応のあるページをセットアップするかという基本的なアイデアを指し示すチュートリアルを見ないのです! https://facebook.github.io/react/でもcodepenが使用されます。

+1

しようとすると、<スクリプトSRC = "HTTPS:/を/cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js "> –

+0

@LucasOliveiraこれは正しい答えと思われます。より基本的な要件で、バベルが必要です。 ReactDomと一緒に。 – gideon

答えて

1

この定義は、bodyの外側にあるため、<div id="root"です。 これを試してみてください:

<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Title of the document</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.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/babel"> 
     console.log("A"); 
     var ExampleElement = React.createClass({ 
      render : function() 
      { 
       return (<p>Testing 123</p>); 
      }; 
     }); 
     ReactDOM.render(<ExampleElement/>, document.getElementById('root')); 
     </script> 
    </body> 
</html> 

もう一つの変化である、あなたはReactDOM.renderの代わりReact.renderを使用する必要があり、この二つの違いをチェック:だけでなくバベルスクリプトを追加Is there any difference between React.render() and ReactDOM.render()?

+0

はい、私はこれを修正しました.. – gideon

+0

これを読んで、質問はここで非常にうまく答えています:http://stackoverflow.com/questions/33007402/is-there-any-difference-between-react-render-and-reactdom-レンダリングする –

1
ReactDOM.render(<ExampleElement/>, document.getElementById('root')); 
+0

ReactDOMではなくReactを行うように見える理由は何ですか? – gideon

関連する問題