初めてのreact2

JSXとは

JSXはjavascriptの構文拡張したもの。

const element = <h1>Hello, world!</h1>;

JSXはreactの要素を作成。
その要素をDOMにレンダリングする。
DOMとは「Document Object Model」の略だ。直訳すると、「ドキュメントを物として扱うモデル」になる。プログラムからHTMLやXMLを自由に操作するための仕組み。
レンダリングとは↓
https://qiita.com/sasakiki/items/91dcc8b50d7a61ce98bc
簡単に言うとリソースをブラウザ画面に表示する。

JSX内に{}を使用することでjs式を埋め込める。

const fruit = 'りんご'; 
const price = 100; 
const quantity = 5; 
const element = <h1>{fruit}を{quantity}個買うと{price * quantity}円です</h1>;

関数も可能

function formatName(user) { 
  return user.firstName + ' ' + user.lastName; 
} 
const user = { 
  firstName: 'Harper', 
  lastName: 'Perez' 
}; 
const element = ( 
  <h1> 
    Hello, {formatName(user)}! 
  </h1> 
);

JSXはなぜhtmlを含めることができるのか？
それはコンパイルされているから。

const element = ( 
  <h1 className="greeting"> 
    Hello, world! 
  </h1> 
);

↑これが↓のようにコンパイルされている。

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

しかしReact.createElementを全てに書くのは面倒なので、JSXでhtmlを含める形式で書いている。

参考

https://ja.reactjs.org/docs/introducing-jsx.html
https://tech-blog.rakus.co.jp/entry/20210521/react