React入門｜コンポーネント設計とstate管理の基本

Reactはなぜフロントエンドのデファクトスタンダードなのか

React（リアクト）はMeta（旧Facebook）が開発したJavaScriptライブラリで、UIを構築するために世界中で使われています。

コンポーネントベースの設計と仮想DOMによる高速な描画更新が特徴で、フロントエンドエンジニアの必須スキルの1つです。

Reactの基本概念

コンポーネント

Reactではページを「コンポーネント」という部品に分割して管理します。

// シンプルなコンポーネントの例
function Greeting({ name }) {
  return <h1>こんにちは、{name}さん！</h1>;
}

// 使い方
<Greeting name="田中" />

関数コンポーネントが現在の標準形式です。

JSX

JSXはJavaScriptの中にHTMLのような記法を書ける構文です。

const element = (
  <div className="container">
    <h1>タイトル</h1>
    <p>テキストコンテンツ</p>
  </div>
);

classの代わりにclassNameを使う点に注意しましょう。

stateとuseState

stateはコンポーネントが持つ「内部状態」です。stateが変わるとコンポーネントが再描画されます。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
    </div>
  );
}

useStateは現在の値と更新関数をペアで返すフックです。

useEffectで副作用を扱う

APIからデータを取得したり、タイマーを設定する「副作用」はuseEffectで管理します。

import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []); // 第2引数が[]のとき、マウント時のみ実行

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Reactプロジェクトの始め方

# Viteで新しいReactプロジェクトを作成（推奨）
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

まとめ

Reactはコンポーネント・JSX・useState・useEffectの4つを理解するだけで基本的なUIが作れます。まずはカウンターアプリやToDoアプリを作りながら、実際に手を動かすことで理解が深まります。