ReactにおけるJSXの基本

Reactでは、ユーザーインターフェースを構築するために**JSX（JavaScript XML）**と呼ばれるJavaScriptの構文拡張を使用します。JSXを使うことで、Reactコンポーネントはユーザーインターフェースがどのように見えるべきかを記述します。

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

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

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

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

ここでは、UIを記述するためにJSXが使われています。{name}構文を使うことで、JavaScriptの値をUIに挿入できます。データが変更されると、Reactは表示される出力を自動的に更新します。