React 'Hello World'がロードされていません

私はReactアプリケーションの作成に関する本のガイドに従っています。これは本の最初の例であり、まったくそのままコピーしましたが、ページはレンダリングされません。ここでReact 'Hello World'がロードされていません

<!DOCTYPE HTML> 
<html> 

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

    <body> 
     <div id="contents"></div> <!-- this is where the component will appear --> 

     <script type="text/babel"> 
      var contentNode = document.getElementById('content'); 
      var component = <h1> Hello World </h1>; // A simple JSX component 
      ReactDOM.render(component, contentNode); // Render the conponent 
     </script> 
    </body> 

</html>

は

react-dom.js Failed to load resource: net::ERR_NAME_NOT_RESOLVED 
browser.min.js Failed to load resource: net::ERR_NAME_NOT_RESOLVED

が、私はこの時点で何をすべきかわからないんだけど、コンソールが言っていることです。私は前にReactで働いたことがない

出典

2017-04-08 Human Cyborg Relations

あなたはこれらを使用して、有効なものにあなたのCDNのリンクを更新する必要があります

<script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>

内容=>コンテンツ
使用する兼ね備え方法は、モジュールバンドラのいくつかの種類である反応しますwebpackのようになります。 webpackがハッスルのように見える場合は、create-react-appを使用して、反応の早いアプリケーションを起動してすぐに実行できます。それは素晴らしい。

出典

2017-04-08 21:27:00 Yuval

cdnjsへのリンクを修正します。また、idが "content s"のdivを作成する場合は、idが "content"の要素を選択します。

出典

2017-04-08 21:21:35 SVTerziev

次の例では、動作：

<!DOCTYPE HTML> 
 
<html> 
 

 
    <head> 
 
     <meta charset="UTF-8" /> 
 
     <title>ReactJS Hello World</title> 
 
     <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
 
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
 
     <script src= 
 
      "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"> 
 
     </script> 
 
    </head> 
 

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

 
     <script type="text/babel"> 
 
      var contentNode = document.getElementById('content'); 
 
      var component = <h1> Hello World </h1>; // A simple JSX component 
 
      ReactDOM.render(component, contentNode); // Render the conponent 
 
     </script> 
 
    </body> 
 
</html>

参照

出典

2017-08-02 14:38:51

React 'Hello World'がロードされていません

答えて

関連する問題