Node.jsデザインパターン 第2版

8.4

 

React

の紹介

273

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>React Example - James Joyce books</title>

</head>

<body>

<div id="main"></div>

<script src="dist/bundle.js"></script>

</body>

</html>

単純なので説明は不要かもしれませんが、作成した

React

アプリケーションのコンテナとして振る舞

う

main

という

ID

をもった

div

の入っている飾りのない

HTML

ページに、ファイル

bundle.js

を追加

しただけです。

後はコマンドラインから

webpack

を起動してから、ブラウザでページ

index.html

を開くだけです。

ユーザーがページをロードしたときにクラ

イアント側のレンダリングで次のことが行われています。

1.

ページの

HTML

コードがブラウザによりダウンロードされてレンダリングされる

2.

バンドルファイルがダウンロードされ、内容の

JavaScript

が評価される

3.

評価されたコードはページの本当のコンテンツを動的に生成し、それを表示するために

DOM

を

更新する

つまり、このページをロードしたブラウザの

JavaScript

が無効化されていると（たとえば検索エンジ

ンのボットの場合）、このウェブページは意味のあるコンテンツが何もない空白のウェブページのよう

に見えるということ