[react]JSXは?

14751 ワード
テキストリンク
この記事は、インタビューの準備ができており、「プレビュー」フォルダに保存されています.
まずJSXという文法を熟知しておき、JSXを使うときに整理したことがないようなので整理してみました.

JSXとは何ですか。

  • JSX(JavaScript XML)は、JavaScriptにXMLを追加する拡張構文です.
  • JSXは反応式プロジェクトの開発に用いられ、正式なJavaScript文法ではない.
  • ブラウザで実行する前に、コードはバインド中にバーベルを使用して通常のJavaScript形式のコードに変換されます.(バーコードとはtranspiler、現代JavaScriptコードを「旧規格」に適合するコードに変換)
  • JSXは1つのファイルにJavaScriptとHTMLを同時に記述しており、便利、容易、可読性が高い.
  • 開発者がJSXを作成すれば、反応エンジンはJSXを既存のJavaScriptと解釈する.これを「宣言型画面」技術と呼ぶ.

    • JSX構文フィーチャー


    1.構成部品に複数の要素がある場合は、1つの親要素で囲まれた形状でなければなりません。

  • 仮想DOMにおける素子変化を検出するには、効率的な比較のために、素子内部にDOMツリー構造を形成しなければならないことがルールで規定されている.
    function App() { 
		return ( 
        		<div> 
  					<div>Hello</div> 
  					<div>Hi!</div> 
				</div> 
        ); 
}
<div></div>로 감싸거나, <Fragment></Fragment> 혹은 <></>로 감쌀 수 있다.

    • 2.JavaScript式

  • JSXでもJavaScript式を使用できます.JavaScript式を作成するには、JSX内でコードを{}にパッケージするだけです.
    • 有効なJavaScript式
  • をすべて追加できます.
    function App() { 
		const name = 'Dev';
		return ( 
        		<div> 
  					<div>Hello</div> 
  					<div>{Hi}!</div> 
				</div> 
        ); 
}

    • 3.if文(for文)の代わりに3つの演算子(条件演算子)を使用

  • if構文およびforループはJavaScript式ではないため、JSX内部のJavaScript式では使用できません.
  • の条件により、他のレンダリング時にJSX周辺コードでif文を使用したり、{}で3つの演算子(条件演算子)を使用したりすることができます.
    • 1)外部使用
    function App() { 
		  let desc = ''; 
          const loginYn = 'Y'; 
          if(loginYn === 'Y') { 
          		desc = <div>회원 입니다.</div>;
                } else { 
                desc = <div>비회원 입니다.</div>; 
                } 
                return ( 
                <> 
                	{desc} 
                </> 
                ); 
}
    2)内部使用(三項演算子)
    function App() { 
          const loginYn = 'Y'; 
          return ( 
          		  <> 
                  	<div> 
  						{loginYn === 'Y' ? ( 
  							<div>회원 입니다.</div>
  						) : ( 
  							<div>비회원 입니다.</div>
  						)} 
					</div> 
                  </> 
          );
}
    3)AND演算子(&&)の使用
    function App() { 
          const loginYn = 'Y'; 
          return ( 
          		  <> 
                  	<div> 
  						{loginYn === 'Y' && <div>회원 입니다.</div>}
					</div> 
                  </> 
          );
}
    4)即時実行関数の使用
    function App() { 
          const loginYn = 'Y'; 
          return ( 
          		  <> 
                  	{ 
                     (() => { 
                     		if(loginYn === "Y"){ 
                            	return (<div>회원 입니다.</div>); 
                            }else{ 
                            	return (<div>비회원 입니다.</div>); } 
                            })() 
                           }
                  </> 
          );
}
    5)定義されていないものはレンダリングしないでください.
  • OR演算子で防ぐことができます.
  • セグメント、JSX内部でのレンダリングが定義されていない場合はエラーはありません.
    function App() {
  const name = undefined;
  return (
  	<div>{name}</div>
  )
}

    • 4.React DOMは、HTMLドキュメントツリー名ではなくCamelCase Property命名規則を使用します。


    1)JSX造形
  • JSXでJavaScript構文を使用するには{}を使用する必要があります.したがって、スタイルを適用するときもオブジェクトとして挿入する必要があります.
  • カメル符号法で記入します.(font-size => fontSize)
    • 2)classNameではなくclass Name
  • JSXはclassNameではなくclassNameを使用します.

    • 5.JSXでのコメントの使用方法

  • {/.../または/を使用します.
    • ソース:https://goddaehee.tistory.com/296
    https://chanhuiseok.github.io/posts/react-3/
    [2日間]Java-型変換、演算子
    -5を実施します.蛇.