Reactの基本的な仕組みを理解しよう (3/4)
作成:2017-04-01 09:15
更新:2017-04-01 09:15
更新:2017-04-01 09:15
■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>タグを用意し、ここにコンポーネントが組み込まれる、そのテンプレートなのです。
これはそう難しいものはありませんが、いくつか補足しておきましょう。
・%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>
※関連コンテンツ