JSXでマークアップを書く
JSXは、JavaScriptファイル内でHTMLのようなマークアップを書けるようにするJavaScriptの構文拡張です。コンポーネントを書く他の方法もありますが、ほとんどのReact開発者はJSXの簡潔さを好み、ほとんどのコードベースで使用されています。
学習内容
- Reactがマークアップとレンダリングロジックを混在させる理由
- JSXとHTMLの違い
- JSXで情報を表示する方法
JSX: JavaScriptへのマークアップの導入
WebはHTML、CSS、JavaScriptで構築されてきました。長年にわたり、ウェブ開発者はコンテンツをHTMLに、デザインをCSSに、ロジックをJavaScriptに、多くの場合別々のファイルで保持していました。コンテンツはHTML内でマークアップされ、ページのロジックはJavaScriptに別々に存在していました：
HTML
JavaScript
しかし、Webがよりインタラクティブになるにつれ、ロジックがコンテンツを決定することが増えました。JavaScriptがHTMLを担当するようになったのです！これが、Reactでは、レンダリングロジックとマークアップが同じ場所、つまりコンポーネント内に共存する理由です。
Sidebar.jsReactコンポーネント
Form.jsReactコンポーネント
ボタンのレンダリングロジックとマークアップを一緒に保つことで、編集のたびにそれらが同期した状態を保証します。逆に、ボタンのマークアップとサイドバーのマークアップなど、無関係な詳細は互いに分離され、それぞれを単独で変更するのが安全になります。
各Reactコンポーネントは、Reactがブラウザにレンダリングするマークアップを含む可能性のあるJavaScript関数です。Reactコンポーネントは、そのマークアップを表現するためにJSXと呼ばれる構文拡張を使用します。JSXはHTMLによく似ていますが、より厳格で、動的な情報を表示できます。これを理解する最良の方法は、HTMLマークアップをJSXマークアップに変換することです。
注記
JSXとReactは別々のものです。一緒に使われることが多いですが、互いに独立して使用することもできます。JSXは構文拡張であり、ReactはJavaScriptライブラリです。
HTMLからJSXへの変換
（完全に有効な）HTMLがあるとします：
そして、それをコンポーネントに入れたいとします：
そのままコピーして貼り付けても動作しません：
これは、JSXがHTMLよりも厳格で、いくつかのルールが多いためです！上記のエラーメッセージを読めば、マークアップを修正する手引きになりますし、以下のガイドに従うこともできます。
注記
ほとんどの場合、Reactの画面上のエラーメッセージが問題の場所を見つけるのに役立ちます。行き詰まったら読んでみてください！
JSXのルール
1. 単一のルート要素を返す
コンポーネントから複数の要素を返すには、単一の親タグでそれらをラップします。
例えば、<div>を使用できます：
マークアップに余分な <div>を追加したくない場合は、代わりに<> と </>を記述できます：
この空のタグは フラグメントと呼ばれます。フラグメントを使用すると、ブラウザのHTMLツリーに痕跡を残さずに要素をグループ化できます。
2. すべてのタグを閉じる
JSXではタグを明示的に閉じる必要があります：<img>のような自己閉じタグは<img /> に、<li>orangesのようなラッピングタグは<li>oranges</li>のように記述する必要があります。
これが、閉じられたヘディ・ラマールの画像とリストアイテムの見た目です：
3. ほとんどのものをキャメルケースに！
JSXはJavaScriptに変換され、JSXで記述された属性はJavaScriptオブジェクトのキーになります。独自のコンポーネントでは、これらの属性を変数に読み取りたいことがよくあります。しかし、JavaScriptには変数名に関する制限があります。例えば、変数名にダッシュを含めることはできず、classのような予約語も使用できません。
これが、Reactでは多くのHTMLおよびSVG属性がキャメルケースで記述される理由です。例えば、stroke-widthの代わりにstrokeWidthを使用します。classは予約語であるため、Reactでは代わりに、対応するDOMプロパティにちなんで名付けられたclassName を記述します：
これらの属性はすべて、DOMコンポーネントのpropsのリストで見つけることができます。間違えた場合でも心配ありません。Reactは、ブラウザコンソールに修正候補を含むメッセージを出力します。
プロのヒント：JSXコンバーターを使用する
既存のマークアップ内のすべての属性を変換するのは面倒です！既存のHTMLやSVGをJSXに変換するには、コンバーターを使用することをお勧めします。コンバーターは実践的に非常に便利ですが、何が起こっているかを理解し、自分でJSXを快適に記述できるようにすることは依然として価値があります。
最終的な結果は次のとおりです：
まとめ
これで、JSXが存在する理由と、コンポーネントでそれをどのように使用するかがわかりました：
- Reactコンポーネントは、関連するレンダリングロジックとマークアップをまとめてグループ化します。
- JSXはHTMLに似ていますが、いくつかの違いがあります。必要であれば、コンバーターを使用できます。
- エラーメッセージは、マークアップを修正するための正しい方向を示してくれることがよくあります。
いくつかのチャレンジを試す
Challenge 1 of 1:Convert some HTML to JSX #
このHTMLはコンポーネントに貼り付けられましたが、有効なJSXではありません。修正してください:
手動で行うか、コンバーターを使用するかはあなた次第です！