ReactにおけるJSXの基本

Reactでは、ユーザーインターフェースを構築するために**JSX（JavaScript XML）**と呼ばれるJavaScriptの構文拡張を使用。

Reactコンポーネントは、ユーザーインターフェースがどのように見えるべきかを記述。これを実現するために、ReactはJSXという構文を利用。

JSXはHTMLに似ているが、JavaScript内で記述。これにより、UI要素をJavaScriptで一つずつ構築するのではなく、コンポーネントコード内で直接記述可能。

JSXはHTMLのように見えるが、実際にはHTMLではなく、内部的にはReactが理解できるJavaScriptに変換される。これにより、JSXは表現力が高く、強力でありながらJavaScriptの一部として機能。

JSXでは、マークアップ内にJavaScript式を直接埋め込むことが可能。これにより、動的なデータの表示や画面上の表示内容の制御が容易。 以下は、先ほどのコンポーネントをJSXで記述した例：

function Welcome() {
  const name = "React";
  return <h1>Welcome to {name}</h1>;
}

ここでは、UIを記述するためにJSXを使用。{name}構文によって、JavaScriptの値をUIに挿入可能。データが変更されると、Reactが自動的に表示内容を更新。