back

Reactの基本的な仕組みを理解しよう (3/4)

■index.htmlテンプレートについて

次に、Webページのテンプレートである「index.html」を見てみましょう。下にソース・コードを掲載しておきます。なお、長いコメントが付いていますがこれは省略してあります。

これはそう難しいものはありませんが、いくつか補足しておきましょう。

・%PUBLIC_URL%について
ヘッダー部分を見てみると、<link>タグに、href="%PUBLIC_URL%/favicon.ico" といった値が設定されています。この%PUBLIC_URL%は、Reactに用意されているプレフィクスで、公開サイトのURLが設定されます。

・id="root"タグについて
<body部分には、<div id="root"></div>というタグが１つあるだけです。このid="root"というもの、どこかで見た記憶がありますね？　そう、index.jsのReactDOM.renderの引数に、document.getElementById('root')と指定がしてありました。それがこの<div id="root"></div>というタグです。つまり、このタグの部分に、<App />のコンポーネントが組み込まれるようになっていたのです。

このindex.htmlテンプレートの働きは、これだけです。ただ<div id="root"></div>タグを用意し、ここにコンポーネントが組み込まれる、そのテンプレートなのです。



(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!-- ……略…… -->
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- ……略…… -->
  </body>
</html>



　 　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.