React入門 - Tips2 - JSXとは

目次

React入門

JSXとは

• JavaScript XMLの略です。
• JSXはJavaScriptの拡張構文です。
• テンプレート言語に似ていますが、完全にJavaScriptだけで動作します。
• JSXは、“React 要素” と呼ばれるプレーンなJavaScriptオブジェクトを返す、React.createElement() のコールにコンパイルされます。

ということらしいです。
私は、ふんわりとしか理解していません。

JSXの記述を見てみよう

こんな感じです。

import React, {useState, useLayoutEffect} from 'react';

export const JsxTest: React.FC = () => {

    /** これがJSXということらしいです！ */
    const jsxComp = <>
                        <div>あいうえお</div>
                        <div>かきくけこ</div>
                    </>;

    /** レンダー部分 */
    return (
        jsxComp
    );
};

export default JsxTest;

以下のように、表示されたらOKです。

この部分です。変数にHTMLタグ的なやつをぶち込んでますね。
そういうことらしいです。

    const jsxComp = <>
                        <div>あいうえお</div>
                        <div>かきくけこ</div>
                    </>;

ちなみに、以下はダメです。
結果的に一つの要素を返さないといけないようです。

    const jsxComp = <div>あいうえお</div>
                    <div>かきくけこ</div>;

あと、jsxCompのタグの中に変数を反映させる場合は、
以下のように記述します。
波括弧で括ります。

    /** これがJSXということらしいです！ */
    const msg1 = 'あいうえお';
    const msg2 = 'かきくけこ';
    const jsxComp = <>
                        <div>{msg1}</div>
                        <div>{msg2}</div>
                    </>;

以上