JSX の基本的な文法

**import React from 'react';**の意味

• jsx オプションをreact に設定している場合、 JSX の記述はReact.createElement(...) のように変換される
• createElement メソッドの上位モジュールであるReact がインポートされてないと変換後、 参照エラーになってしまう

TypeScript 4.1 以降ではReact 17.0 から導入された新しいJSX 変換形式29 に対応してて、tsconfig.json のjsx オプション設定がreact-jsx になってるとそれが有効になる。

→ tsconfig.jsonの設定を"jsx":"react-jsx"　にするとimportの必要がなくなる

{}で式を埋め込む

• あくまで書けるのは式、つまり値を返す表現だけ
  • 制御文は書けない
• null とundefined、およびboolean 値のtrue とfalse は{} の中では何も出力されない

複数の要素が含まれるときにトップレベルがひとつの要素でないといけない

// これはエラーになる
const elems = (
	<div>foo</div>
	<div>bar</div>
	<div>baz</div>
);

// フラグメントを使う
const elems = (
	<>
		<div>foo</div>
		<div>bar</div>
		<div>baz</div>
	</>
);

• 本当は**<React.Fragment>** というコンポーネント
• <>はその省略記法

JSX とコンポーネントの関係