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

8.4

 

React

の紹介

271

'li',

{ className: 'book' },

book

);

})

)

);

}

見てわかるように、コードの可読性はかなり低下しており、エラーが起こりやすくなっていますから、

JSX

に頼ってトランスパイラを使って等価な

JavaScript

コードを生成したほうがよいでしょう。

JSX

の簡単な概要説明の結びとして、このコードが最終的にどのような

HTML

にレンダリングされ

るかを見ておきましょう。

<div data-reactroot="">

<h2>James Joyce's major works</h2>

<ul class="books">

<li class="book">Dubliners</li>

<li class="book">A Portrai

t of the Artist as a Young Man</li>

<li class="book">Exiles and poetry</li>

<li class="book">Ulysses</li>

<li class="book">Finnegans Wake</li>

</ul>

</div>

JSX/JavaScript

版のコードでは属性

className

を使ったのに、ここでは

class

になっているという

点にも触れておきましょう。バーチャル

DOM

を扱う場合、

HTML

の属性に等価な

DOM

の属性を使う

必要があります。

React

が

HTML

コードをレンダリングする際に適切に変換して