再開!2 JSX

-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を構成し、最新の状態を維持するために使用します.