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

8.4

 

React

の紹介

269

</div>

);

}

}

module.exports = JoyceBooks;

コードの最初の部分はまったく取るに足らないものです。モジュール

React

を読み込み、本の題名

を入れた入れた配列

books

を定義しているだけです。

次の部分がもっとも興味深いところ、このコンポーネントの心臓部です。

React

のコードを見るのが

これが初めてなら、ずいぶんおかしなコードに見えることでしょう。

さて、

React

のコンポーネントを定義するには、

React.Component

を継承したクラスを作成する必

要があります。このクラスは、

render

という関数を必ず定義しなければなりません。この関数はコン

ポーネントが受けもっている部分の

DOM

を記述するのに使われます。

ところで、関数

render

の中身はどうなっているのでしょうか。

JavaScript

コードらしきものが入っ

た

H

TML

コードらしきものを返しますが、引用符で括ったりしていません。不思議に思うのももっとも

なことで、これは

JavaScript

ではなく

JSX

なのです。

8.4.2

 

JSX

とは

先に述べたように、

React

はバーチャル

DOM

を生成し操作するための高レベルの

API

を提供してい

ます。

DOM

自体は偉大な概念で、

XML

や

HTML

で簡単に表せますが、

DOM

ツリーを「ノード」、「親

ノード」、「子ノード」といった低レベルの概念を使って動的に操作しようとすると、たちまちとても扱

いにくいものになってしまいます。この本質的な複雑さ ...