JSX

JSXとは何ですか。

JSXはJavaScriptを拡張する文法です.
UIの外観を説明するためにReactとともに使用されます.

const element = <h1>Hello, world!</h1>;

JSX vs HTML

1. Custom Styling to an element

<button style="background-color: blue color: white;"> 
  Submit
</button>

次のHTMLコードは、次のボタンを生成します.

ただし、この構文がJSXで使用されている場合、次のエラーが発生します.

これは、JSXが属性の値を「」ではなく{}として使用し、camel caseではなくcamel caseを使用するためです.
作成する場合は、次のようになります.

<button style={{ backgroundColor: 'blue', color: 'white' }}>
  Submit
</button>

正常に動作していることを確認できます.

2. Adding a class to an element uses different syntax

<label class="label" For="name">Enter name:</label>

次のコードは、出力が正常に発生する可能性があることを示しますが、consoleを表示すると警告が表示されます.

JavaScriptで使用されているclassとFor rufficが混同される可能性があるため、Reactは警告を返します.
これは、次の方法で解決できます.

<label className="label" htmlFor="name">Enter name:</label>

3. JSX can reference JS variables

function getTime() {
        return (new Date()).toLocaleTimeString()
    }

    // Creates a functional component
    const App = () => {
        return (
            <div>
                <div>Current Time:</div>
                <h3>12:05 PM</h3>
            </div>
        );
    }

以下のコードがある場合、h 3ラベルはハードコーディングされます.
これは、前述のgetTime()関数をJSXで使用することができる.

    const App = () => {
        return (
            <div>
                <div>Current Time:</div>
                <h3>{getTime()}</h3>
            </div>
        );
    }