Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス

5章ReactとJSX

前章ではReactの最小単位であるコンポーネントについて学びました。Reactコンポーネントの実体は、React要素および他のコンポーネントから構成されたツリーを返す関数です。前章ではcreateElementを使って要素を作成していましたが、実際のReactの開発現場ではじつはcreateElementはほとんど使用されません。とくに複数のコンポーネントを合成して複雑なアプリケーションを構築する場合、関数呼び出しがネストするとコードが読めなくなってしまいます。その代わりに使用されるのがJSXです。

JSXの「JS」はもちろんJavaScriptですが「X」はXMLを表します。つまりJSXは、JavaScriptのコードの中に直接、XMLのようなタグベースの構文を記述するための言語拡張です。JSXを使えば、複数のネストしたcreateElementの呼び出しを記述する代わりに、最終的に描画したい要素を宣言的に記述できます。

この章では、JSXを使ってReactのアプリケーションを実装する方法を学びます。

5.1　JSXを使ってReact要素を記述する

FacebookのReact開発チームは、Reactのリリースと同時にJSXをリリースしました。複雑なDOMツリーと属性を簡潔に記述するという目的で導入されたJSXですが、実際にReactのコードはHTMLやXMLと同じぐらい読みやすいものになりました。JSXではタグ名としてReact要素名（type値）を記述します。そして、タグの属性としてプロパティ値を記述します。子要素childrenは、開始タグと終了タグの間に記述されます。

子要素はいくらでもネストして記述できます。以下は<ul>要素をJSXで記述したものです。一見HTMLのように見えますが、これはJSXです。 ...