Reactとバックエンドで作る！実践Web開発入門 | 第2章: Reactで基本的なUIを構築

はじめに

第1章でReactとバックエンドの環境を整えました。今回は、Reactを使って簡単なUIを作り、コンポーネントの基本を学びます。具体的には、商品リストを表示するページを作成します。初心者でも理解しやすいよう、ステップごとに進めます。

目標

• Reactのコンポーネント構造を理解する
• StateとPropsを使ってデータを管理する
• シンプルなUIをデザインする

コンポーネントの基本

Reactでは、UIを小さな「コンポーネント」に分割して管理します。今回は以下の3つを作ります：

1. Header: ページ上部のナビゲーション。
2. ProductList: 商品リストを表示。
3. Footer: ページ下部の情報。

プロジェクトの準備

frontend/src/App.tsxを開き、デフォルトの内容を以下に置き換えます：

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <Header />
      <ProductList />
      <Footer />
    </div>
  );
}

const Header = () => (
  <header>
    <h1>商品リスト</h1>
  </header>
);

const ProductList = () => (
  <main>
    <p>ここに商品が表示されます。</p>
  </main>
);

const Footer = () => (
  <footer>
    <p>&copy; 2025 React Web開発入門</p>
  </footer>
);

export default App;

CSSの追加

frontend/src/App.cssに以下を追加して、見た目を整えます：

.App {
  text-align: center;
  font-family: Arial, sans-serif;
}

header {
  background-color: #282c34;
  padding: 20px;
  color: white;
}

main {
  min-height: 80vh;
  padding: 20px;
}

footer {
  background-color: #f1f1f1;
  padding: 10px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

npm startで確認すると、シンプルなページが表示されます。

StateとPropsでデータを扱う

商品リストにデータを追加しましょう。ProductListを以下のように修正します：

const ProductList = () => {
  const [products, setProducts] = React.useState([
    { id: 1, name: 'りんご', price: 100 },
    { id: 2, name: 'バナナ', price: 150 },
  ]);

  return (
    <main>
      <h2>商品一覧</h2>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            {product.name} - {product.price}円
          </li>
        ))}
      </ul>
    </main>
  );
};

• useStateで商品データを管理。
• mapを使ってリストを動的に表示。

Propsの活用

商品アイテムを別のコンポーネントに分けます。App.tsxに以下を追加：

const ProductItem = ({ name, price }: { name: string; price: number }) => (
  <li>
    {name} - {price}円
  </li>
);

const ProductList = () => {
  const [products, setProducts] = React.useState([
    { id: 1, name: 'りんご', price: 100 },
    { id: 2, name: 'バナナ', price: 150 },
  ]);

  return (
    <main>
      <h2>商品一覧</h2>
      <ul>
        {products.map((product) => (
          <ProductItem key={product.id} name={product.name} price={product.price} />
        ))}
      </ul>
    </main>
  );
};

• ProductItemはPropsを受け取り、1つの商品を表示。

動作確認

ブラウザでhttp://localhost:3000を開き、商品リストが表示されるか確認してください。Header、商品リスト、Footerが整然と並びます。

次回予告

第3章では、バックエンドでAPIを作成し、商品データをサーバーから取得する方法を学びます。お楽しみに！

---

この記事が役に立ったら、ぜひ「いいね」や「ストック」をお願いします！質問や感想はコメント欄で気軽にどうぞ。次回も一緒に学びましょう！