[React] JSX

> JSX (Javascript syntax extension)

const hi = <p>Hi</p>;

このjs、htmlは両方ではありません.JSXです.htmlによく似ていて、jsファイル内で書くことができます.JSXは元のJS文法ではないのでjsファイルにJSX構文がある場合、ブラウザは解析できず、構文エラーが発生します.
書き込み応答に使用するjsx構文が含まれている場合は、ファイルを通常のjs構文のコンパイルプロセスに変換する必要があります.

> JSX element

htmlの文法をjsコードの内部に書いて、それはJSXです!変数に格納したり、関数のパラメータに渡したりできます.

const hi = <p>Hi</p>;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li>programming</li>};

> JSX attribute

attribute(以下、プロパティと略称する)をマークする場合は、常に「」二重引用符で囲まなければなりません.属性を追加する場合は、実際のhtmlで使用する属性名とは異なる場合があります.
たとえば、classを渡す場合、元の属性名はclassですが、JSXではclassNameを使用する必要があります.

const hi = <p>Hi</p>;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li>programming</li>};

> Self-Closing Tag

「また、JSXでは、任意のタグでself closting tagを選択できます.」タグ要素の場合は、常に「/」で終わる必要があります.「」は同じ言い方です.

> Nested JSX

1.(必須)かっこで囲む

const good = (
<div>
    <p>hi</p>
</div>);

ネストされた要素を作成するには、()カッコで囲む必要があります.

(必須)は常に単一のタグで始まる

const wrong = (
<p>list1</p><p>list2</p>);
//좋지못하다

const right = (
  <div>
    <p>list1</p>
    <p>list2</p>
  </div>
);
//좋다

> Rendering

ブラウザで出力されるコード(html要素やreact要素など)をレンダリング(rendering)と呼びます.
react要素をDom nodeに追加して画面にアップロードするには、reactDOMを実行します.render関数を使用します.1番目のパラメータはreact要素をパラメータとしてJSXに渡し、2番目のパラメータはその要素をロードしたいコンテナ(親要素)を渡します.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);