🙋‍♀️JSX ?

JavaScript Syntax拡張:寸法とjsを同時に書き込むことができるjs拡張構文で、寸法を簡単に作成できます.
デフォルトでは、HTMLで使用している構文と同様の構文を使用してReact要素を作成できます.
JSXで作成したコードがブラウザで実行されると、バーベルを使用して通常のJavaScript形式のコードに変換されます.
例)

  const Title = () => (
 <h3 id="title" onClick={() => console.log("I'm clicked")}>
     Hello I'm a Title
   </h3>
 );

上のコードから見ると、JSXはHTMLタグを使用しているので見やすく、おなじみです.
また、HTMLタグを使用しながらJavaScriptをJSXで動作させることもできます.

JSX特性

👉 JavaScript式をかっこに書きます。

onClick = {() => console.log("hi")}

👉 JS構文に基づいて、=>classNameを使用します。

<div className ='title'></div>

👉 オンラインモデリングの方法

<div style={{color : "red"}}>Hello React</div>

👉 Self Closingタグの使用

<br />のようなタグをself closting tag tagと呼ぶ.JSXはタグをオフにしなければならないので、self clostingタグをよく使います!

👉 すべての要素を上書きする最上位要素

JSXの大きな特徴は、内部要素を囲むためにトップクラスの要素が必要であることです.
🔖 <>...</> React Fragment
分割は、DOMに追加ノードを追加することなく、1つのエレメント内で複数のエレメント(サブエレメント)を簡単にグループ化できる機能です.要素を囲むdivタグの不要な生成を防止できるため、非常に有用である.

<>
  <div className="loginBtn" onClick={() => console.log("click")}>Login</div>
  <br />
  <div style={{backgroundColor: "grey", height: "10px"}} />
</>

👉 必ず何かに報いなければならない。

JSX内で何も返さずにcomponentに戻るとエラーが発生することを覚えておいてください.

👉 その他の注意事項-カッコ内

JSXでは、大かっこ:string number、stringとnumberを返す関数などに入ることができます.演算式または3つの条件演算を行うこともできます.
🔖3つの条件演算のレンダリングを条件レンダリングと呼びます.
ex)

<div>{5 % 2 === 0? '짝수' : '홀수'}</div>

let num = 0;
const inCreaseNum = () => num++
 <div>{inCreaseNum}</div>

🍯 の最後の部分

JSX文法が出てきました.本当によかった、ほほほ.ああ!