React JSX

JSXとは何ですか？

JSXはJavaScriptXMLの略です。

JSXを使用すると、ReactでHTMLを記述できます。

JSXを使用すると、ReactでのHTMLの記述と追加が簡単になります。

JSXのコーディング

createElement()  JSXを使用すると、JavaScriptでHTML要素を記述し、 メソッドを使用せずにそれらをDOMに配置できappendChild()ます。

JSXはHTMLタグをreact要素に変換します。

これが2つの例です。1つ目はJSXを使用し、2つ目は使用しません。

const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

最初の例でわかるように、JSXではJavaScriptコード内に直接HTMLを記述できます。

JSXは、ES6に基づくJavaScript言語の拡張であり、実行時に通常のJavaScriptに変換されます。

JSXでの式

JSXを使用すると、中括弧内に式を記述できます{ }。

式は、React変数、プロパティ、またはその他の有効なJavaScript式にすることができます。JSXは式を実行し、結果を返します。

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;

HTMLの大きなブロックを挿入する

複数行にHTMLを書き込むには、HTMLを括弧で囲みます。

const myelement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

1つのトップレベル要素

HTMLコードは、1つの最上位要素でラップする必要があります。

したがって、2つの段落を記述したい場合は、要素のように、それらを親要素内に配置する必要がありますdiv。

const myelement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

または、「フラグメント」を使用して複数の行を折り返すこともできます。これにより、DOMにノードを不必要に追加することを防ぐことができます。

フラグメントは空のHTMLタグのように見えます：<></>。

const myelement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

要素を閉じる必要があります

JSXはXML規則に従うため、HTML要素を適切に閉じる必要があります。

const myelement = <input type="text" />;

属性クラス= className

このclass属性はHTMLでよく使われる属性ですが、JSXはJavaScriptとしてレンダリングされ、 classキーワードはJavaScriptで予約語であるため、JSXで使用することはできません。

JSXは、className代わりにを使用してこれを解決しました。JSXがレンダリングされると、属性が属性に変換className されclassます。

const myelement = <h1 className="myclass">Hello World</h1>;

条件-ifステートメント

Reactはifステートメントをサポートしますが、 JSX内ではサポートしません。

JSXで条件ステートメントを使用できるようにするには、if ステートメントをJSXの外部に配置するか、代わりに3項式を使用する必要があります。

オプション1：

ifJSXコードの外部にステートメントを記述します。

const x = 5;
let text = "Goodbye";
if (x < 10) {
  text = "Hello";
}

const myelement = <h1>{text}</h1>;

オプション2：

代わりに3項式を使用してください。

const x = 5;

const myelement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;

const paragraph = React.createElement(, {}, 'This is a paragraph without using JSX!');

ReactDOM.render(paragraph, document.getElementById('root'));