再開!2 JSX

2053 ワード
React TIL テキストリンク

-JSXって何?


-JavaScriptの構文を拡張します.
-JavaScriptのすべての機能が含まれます.
-JSXはreact"要素"を作成します.

-why JSX?


Reactは、注釈と論理を個別のファイルに置くのではなく、ばらばらに接続されたユニットから注目点を分離します.

-JSXに式を含める

import React from 'react';
import ReactDOM from 'react-dom';

const user = {
  firstName : "kyuchan",
  lastName : "moon"
}
// 객체를 만들어주고

function formatName(user){
return user.firstName + " " +  user.lastName
}

//함수에서 객체 활용

const element = <h1> Hi! , {formatName(user)} </h1>

//중괄호로 함수 사용

ReactDOM.render(
    element,
  document.getElementById('root')
);
産品¥¥¥¥

-JSX is an Expression Too


コンパイルが完了すると、JSX式は通常のJavaScript関数として呼び出され、JavaScriptオブジェクトとして認識されます.
これは、JSXがif文またはforループで使用できるか、変数に割り当てられたり、パラメータとして渡されたり、関数から返されたりすることを意味します.

-JSXは対象を表します。


次の2つの例は同じです.

    • const element = (
<h1> className = "greeting">
hello world!
</h1>
);

    • const element = {
type : "h1",
props : {
className : "greeting",
children : "hello wolrd!"
}
};
    BabelはJSXはreactコンパイルのためにcreateElement()を呼び出します.
    2番目のオブジェクトなどのオブジェクトは、画面に表示する内容を表す表現として扱うことができます.
    Reactは、このオブジェクトを読み込んでDOMを構成し、最新の状態を維持するために使用します.
    線分樹成断更新裸題hdu 1698 Just a Hook
    プログラマコード問題2021、08/24-Lv.1相互評価