React JSX

6399 ワード
React テキストリンク

🛠 JSX ?


反応で構成部品の外観を定義するときに使用する構文
htmlとは違います.
一見htmlのように見えますが、実はjavascriptです.
バーベルというツールで変換します.

🤔 BABEL?


:I/OはJavaScriptコードのコンパイラです.
JSX、タイプスクリプト、コード圧縮、推奨フェーズの構文を使用できます.

JSX構文を使用した合成


接続babeljs.io
BABELがどのように働いているか見てみましょう.
JSX形式で作成され、

バーベルへんかん


バーベルは下図のようです
React.createElement関数を使用する方法に変換します.

バーベルがない場合は、コードを書くのに時間がかかります.
可読性も悪くなります.
그러나 pure 자바스크립트를 다룰 순 없고,
몇가지 규칙을 준수해야한다.

JSXルール


1.ラベルを閉じる必要があります。

1. <div>  //x
2. <div></div> //o
3. <input/> //o 셀프클로징

2.ラベルで包みます。

//1. 사용 불가

<div>hi</div>
<div>bye</div>

//2. 사용 가능

<div>
  <div>hi</div>
  <div>bye</div>    
</div>

//3. 사용 가능 (Fragment Tag)
<>
<div>안녕하세요</div>
</>

3.JavaScriptコードは括弧{}で囲む必要があります。

function App() {
  const name = 'react';

  return (
    <>
      <div>{name}</div>
    </>
  );
}
上のコードはreactを画面にレンダリングします.
ただし、カッコで囲まれていない場合は、nameを画面にレンダリングします.

4. className


jsxはclassではなくclassNameでクラスを宣言する必要があります.
classを書いてもいいですが、コンソールにエラーが表示されます.

5.JSX内部のスタイルをオブジェクトとして適用します。

const style = {
 background: 'grey' 
}

return (
	<div style={style}>
  	  <div className='my-style'>
       	    something
	  </div>
	</div>
)

6.コメント


括弧で囲んで注記を使います.{/*중괄호로 감싸야한다.*/} 
return (

  <>
  {/*중괄호로 감싸야한다.*/}
	<input
  		//이렇게도 가능하다.
    	>
  </>
)
上の列のルールをいくつか熟知しなければなりません.
Stack & Queue
[CTF]Brainfuck/Ook!エンコーディング