Reactコンポーネントとは

UI（ユーザーインターフェース）の一部を構成する、再利用可能な「部品」です。JavaScriptの関数として定義され、JSX（HTML風の記法）を返します。

// シンプルなコンポーネントの例
function App() {
  return (
    
こんにちは、React！
  );
}

レンダリング (Rendering)

定義したコンポーネントをウェブページ上に描画（表示）するプロセスです。React 18では createRoot を使ってルートを作成し、render メソッドで描画を開始します。

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

[!NOTE] <React.StrictMode> は、開発中に潜在的な問題をチェックしてくれる特別な部品です。

関数コンポーネントのメリット

• 簡潔さ: クラス形式よりもコード量が少なく、読みやすい。
• Hooksの活用: useState などを使い、関数内でも状態（State）を扱える。
• 主流: 現在のReact開発における標準的な記述方法。

クロージャ (Closure) との関係

Reactのフック（useStateなど）は、JavaScriptの「クロージャ」という仕組みを利用して、関数が終了した後も変数の状態を記憶し続けています。これにより、画面を更新してもデータが消えずに保持されます。