【React】マークアップとは

マークアップとは

Reactのマークアップとは、JSX（JavaScript XML）を使用して記述された、Reactコンポーネント内部のHTML構造や要素のことを指します。JSXは、JavaScriptの構文を拡張し、HTML風の記法でUIを記述するためのものです。

使用方法

以下は、Reactのマークアップの例です。

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>This is a paragraph.</p>
      <button>Click me</button>
    </div>
  );
}

export default MyComponent;

この例では、<div>、<h1>、<p>、<button>などのHTMLタグが使用されていますが、これらはReactのコンポーネント内部で記述されています。JSXは、JavaScriptの中にHTMLを記述できるようにし、JavaScriptとHTMLの間の統合性を高めるためのものです。

まとめ

Reactのマークアップでは、通常のHTMLと同様に、属性やイベントハンドラーを設定することもできます。また、JavaScriptの変数や式を埋め込んで動的なコンテンツを生成することも可能です。このように、JSXはReactでUIを構築するための主要な手段の一つであり、Reactの強力な機能の一つと言えます。