React_2. JSX

JSX構文
JSXは、応答でUIを構成するための拡張JavaScript構文です.JSXを用いずに応答を記述できるが,コードの複雑化の欠点を負わなければならない.これらのJSXで記述されたコードは、Babelというコンパイラを使用してJavaScriptコードに変換され、ブラウザで実行されます.作成したコードはHTMLのようなタグを使い,直感的でJavaScriptのみでWebアプリケーションを実現する.HTMLとJSを別々に書く必要があるDOMとの違いです.
HTML vs JSX
次の例では、JSXが従来方式と比較してどれほど直感的であるかを示します.

function App() {
  const user = {
    firstName: "React",
    lastName: "JSX"
  };

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }
  // JSX 없이 활용한 React
  return React.createElement("h1", null, `Hello, ${formatName(user)}!`);

  // JSX 를 활용한 React
  return <h1>Hello, {formatName(user)}!</h1>;
}

JSXで記述されたコードは,JSXで記述されていないコードに比べて明らかに短く,タグで構造を容易に予測できる.この点が反応の長所と言える.
JSX注意事項
JSXにはHTMLとは異なる特徴がいくつかあります.1つはクラスプロパティです.JSXではclassNameでクラスを指定する必要があります.classがまだ使用されている場合はjavascriptクラスとして認識されます.<div className="hi">hello</div>また、JSXでJavaScriptを使用するには括弧{}を使用する必要があります.そうしないと、普通のテキストと見なされるからです.<div>hello, {name}</div>反応素子を作成するには、ユーザー定義素子と呼ばれる大文字で始まる必要があります.小文字で記入すると、通常のHTML段落として扱われます.

function Hello() {
	return <div>hello!</div>;
}

return <Hello />;

reactionの条件文はif文ではなく3つの演算子を使用する必要があります.

<div>{name === 'React' ? <h1>true</h1> : <h1>false</h1>}</div>

反応中に複数のHTMLセグメントを表示する場合はmap()関数を使用します.警告が表示されないには、keyプロパティを追加する必要があります.

function Blog() {
	const content = posts.map((post) => 
      <div key={post.id}>
       	<h1>{post: title}</h1>
       	<p>{post: content}</p>
      </div>
	);
}

ここでkeyは変わらず、唯一の予想可能なid値を指定する必要があります.不可能な場合は、配列要素のインデックス値を使用できますが、これは最後の手段として使用する必要があります.Math.ランダム生成にrandom()を使用するとパフォーマンスが低下するため、本書では推奨されません.
リファレンス
反応式ドキュメント