JSXとは

2024年6月16日

目的

Reactで使用されJSXについて調べたので、まとめてみた。

ReactによるJavaScriptの構文を拡張したもの。JSXはJSのオブジェクト（React要素)に変換される。

JSXはBABELを介してReact要素に変換される。

JSXは

const element = (
  <h1 className = "greeting">
    Hello World
  </h1>
);

BABELによって変換され

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello World',
);

React要素になる。

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello World'
  }
}

const element ={
  <div>
    <h1>Hello!</h1>
    <h2>GoodBye!</h2>
  </div>
}

この時のReact要素は以下のようにツリー状に管理される。

{
  type: "div",
  props: {children:[
    0:{type: "h1",props:{children: 'Hello!'}}
    1:{type: "h2",props:{children: 'GoodBye!'}}
  ]}
}

今回はここまで。

よかったらシェアしてね！