ReactDOM.renderのHTMLのコード行はどこに置かれますか？

次のコードは、.html（index.html）の保存形式です。ReactDOM.renderのHTMLのコード行はどこに置かれますか？

私は今すぐReactを学習しています。このhtmlファイルをブラウザで実行すると、何も起こりません。

私は、2行のコードがどこに行くのか、どのように呼び出すのか（レンダリングを実行するのに不思議です）。

Macを使用している場合、どこに./libのファイルがありますか？

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>Introduction | Learning React</title> 
    <link rel="stylesheet" href="lib/style.css" /> 
    </head> 
    <body> 
    <section id="entry-point"></section> 

    <!-- Wifi might be spotty, so we've downloaded these to `./lib` --> 
    <script src="lib/react.js"></script> 
    <script src="lib/react-dom.js"></script> 

    <script type="text/javascript"> 
     // Intentionally blank. Your walk-through code will go here 
     var hello = React.createElement('p', null, 'Hello, World!'); 

     // Checkout what this does by opening your HTML file in the browser 
     ReactDOM.render(hello, document.getElementById('entry-point')); 
    </script> 
    </body> 
</html>

出典

2017-06-07 Shrooms

それは限り、あなたは適切なライブラリが含まとして動作します。正しいセットアップ（JSX compiler、例えばバベル）を使用して

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Introduction | Learning React</title> 
 
    <link rel="stylesheet" href="lib/style.css" /> 
 
    </head> 
 
    <body> 
 
    <section id="entry-point"></section> 
 
    
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
    <script type="text/javascript"> 
 
     // Intentionally blank. Your walk-through code will go here 
 
     var hello = React.createElement('p', null, 'Hello, World!'); 
 

 
     // Checkout what this does by opening your HTML file in the browser 
 
     ReactDOM.render(hello, document.getElementById('entry-point')); 
 
    </script> 
 
    </body> 
 
</html>

を、あなたが上記のcreateElementを簡素化できます。

ReactDOM.render(
 
    <p>Hello, World!</p>, 
 
    document.getElementById('entry-point') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="entry-point"></div>

出典

2017-06-07 16:27:26

ありがとうございます！私はそれが私が行方不明の図書館であったことを今理解している – Shrooms

パケットマネージャを使用しない場合は、React with CDNを含めることができます。開発のために

：

<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://unpkg.com/[email protected]/dist/react.min.js"></script> 
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>

出典

2017-06-07 23:23:24 Krall

ReactDOM.renderのHTMLのコード行はどこに置かれますか？

答えて

関連する問題