React JSX
JSXとは？
JSXはJavaScript XMLの略です。
JSXを使用すると、ReactでHTMLを記述できます。
JSXを使用すると、ReactでのHTMLの記述と追加が容易になります。
JSXのコーディング
createElement()JSXを使用すると、JavaScriptでHTML要素を記述し、メソッドを使用せずにDOMにappendChild()要素を配置できます。
JSXはHTMLタグを反応要素に変換します。
JSXを使用する必要はありませんが、JSXを使用すると、Reactアプリケーションを簡単に作成できます。
2つの例を見てみましょう。1つ目はJSXを使用している例で2つ目は使用しない例です。
例1
JSX:
例 2
JSXなし:最初の例でわかるように、JSXを使用すると、JavaScriptコード内にHTMLを直接記述できます。
JSXはES6に基づくJavaScript言語の拡張であり、実行時に通常のJavaScriptに変換されます。
JSXの式
JSXを使用すると、中括弧{ }内に式を記述できます。
式はReactの変数、プロパティ、またはその他の有効なJavaScriptの式にすることができます。JSXは式を実行し結果を返します。
大きなブロックをHTMLに挿入する
HTMLを複数行に記述するには、HTMLを括弧で囲みます。
例
3つのアイテムを含むリストを作成します。
1つのトップレベル要素
HTMLコードは1つのトップレベル要素でラップする必要があります。
したがって、2つの段落を書きたい場合は、それらをdiv 要素などの親要素の中に入れる必要があります。
例
2つの段落を1つのDIV要素内にラップします。
HTMLが正しくない場合、またはHTMLに親要素がない場合、JSXはエラーを返します。
または、「フラグメント」を使用して複数の行をラップすることもできます。これにより、DOMに余分なノードを不必要に追加するのを防ぐことができます。
フラグメントは空のHTMLタグ<></>のように見えます。
例
2つの段落をフラグメント内にラップします。
要素は閉じている必要があります
JSXはXML規則に従うため、HTML要素を適切に閉じる必要があります。
HTMLが適切に閉じられていない場合、JSXはエラーを返します。
属性クラス = クラス名
このclass属性はHTMLでよく使用される属性ですが、JSXはJavaScriptとして渡され、classはJavaScriptの言語であるため、JSXでは使用できません。
代わりにclassName属性を使用してください。
JSXは代わりにclassNameを使用することで問題を解決できます。JSXがレンダリングされると、className属性がクラス属性に変換されます。
例
JSXのクラスの代わりに属性classNameを使用します。
条件 - ifステートメント
Reactはifステートメントをサポートしていますが、JSX内ではサポートしていません。
JSXで条件ステートメントを使用できるようにするには、ifJSX外のステートメント、または代わりに三項式を使用できます。
オプション1：
ifJSXコードの外側にステートメントを記述します。
例
その場合は「Hello」と書き、xが10未満の場合、それ以外の場合は「Goodbye」と書きます。
オプション2:
代わりに三項式を使用します。
例
xが10未満なら "Hello"、そうでなければ "Goodbye "と書く：
注:JavaScript式をJSX内に埋め込むには、JavaScriptを中括弧{}で囲む必要があります。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。