React初心者が絶対に覚えるべき基本概念7選 - 実務で使える実践ガイド

どうも、たにーです！

最近、「Reactを勉強したいけど、何から始めたらいいかわからない」という相談をよく受けます。確かに、Reactの公式ドキュメントは充実していますが、初心者にはちょっと難しく感じることもありますよね。

そこで今回は、実務でReactを使っている経験をもとに、 本当に大切な基本概念だけ を分かりやすくまとめてみました。この7つのポイントを押さえれば、Reactの土台がしっかりと身につきますよ！

この記事で学べること

• Reactコンポーネントの基本的な書き方
• JSXの正しい使い方と注意点
• データの表示と条件分岐の実装
• イベント処理とstate管理の基礎
• コンポーネント間でのデータ共有方法

1. コンポーネント：Reactの心臓部を理解しよう

Reactの世界では、すべてが コンポーネント という単位で作られています。これって、レゴブロックみたいなものだと思ってください。小さなパーツを組み合わせて、大きな作品を作り上げていくんです。

基本的なコンポーネントの書き方

function MyButton() {
  return <button>押してみて！</button>;
}

これだけです！コンポーネントは、 マークアップを返すJavaScript関数 なんです。

コンポーネントを組み合わせてみよう

function WelcomeMessage() {
  return <h1>ようこそ！</h1>;
}

function MyApp() {
  return (
    <div>
      <WelcomeMessage />
      <MyButton />
    </div>
  );
}

2. JSX：HTMLっぽいけど違うやつ

ReactではJSXという記法を使います。「HTMLに似てるけど、ちょっと違う」という感じですね。

JSXの特徴

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>
        こんにちは！
        <br />
        調子はどうですか？
      </p>
    </>
  );
}

ポイント ：

• タグは必ず閉じる（<br /> のように）
• 複数の要素は1つの親要素で囲む
• 親要素が不要なら <>...</> で囲んでもOK

スタイリングの違い

// HTML
<img class="avatar" />

// JSX
<img className="avatar" />

HTMLの class は、JSXでは className になります。これも最初はよく忘れちゃうんですよね（笑）

3. データ表示：JavaScriptの力を借りよう

JSXの真価は、JavaScriptの変数や式を簡単に表示できることです！

基本的なデータ表示

const user = {
  name: "たにー",
  imageUrl: "/images/profile.jpg",
  imageSize: 90,
};

function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={"Photo of " + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize,
        }}
      />
    </>
  );
}

ポイント ：

• {} の中にJavaScriptの式を書く
• 文字列の連結もできる
• style 属性はオブジェクトで指定（style={{}} の形）

4. 条件分岐：場面に応じて表示を切り替える

「ログインしてる時とそうでない時で表示を変えたい」こんな場面、よくありますよね。

if文を使う方法

function LoginStatus({ isLoggedIn }) {
  let content;
  if (isLoggedIn) {
    content = <AdminPanel />;
  } else {
    content = <LoginForm />;
  }

  return <div>{content}</div>;
}

三項演算子を使う方法（おすすめ）

function LoginStatus({ isLoggedIn }) {
  return <div>{isLoggedIn ? <AdminPanel /> : <LoginForm />}</div>;
}

条件が満たされた時だけ表示

function Notification({ hasNewMessage }) {
  return <div>{hasNewMessage && <div>新しいメッセージがあります！</div>}</div>;
}

5. リスト表示：配列データを活用しよう

商品一覧や記事リストなど、同じような要素を繰り返し表示することも多いですね。

const products = [
  { title: "キャベツ", id: 1, price: 200 },
  { title: "にんにく", id: 2, price: 150 },
  { title: "りんご", id: 3, price: 300 },
];

function ShoppingList() {
  const listItems = products.map(product => (
    <li key={product.id} style={{ color: "darkgreen" }}>
      {product.title} - ¥{product.price}
    </li>
  ));

  return <ul>{listItems}</ul>;
}

6. イベント処理：ユーザーの操作に反応しよう

ボタンがクリックされた時の処理を書いてみましょう。

function MyButton() {
  function handleClick() {
    alert("ボタンがクリックされました！");
  }

  return <button onClick={handleClick}>クリックしてね</button>;
}

注意点 ：

• onClick={handleClick} （括弧なし）
• onClick={handleClick()} はNG（すぐに実行されちゃう）

7. State：コンポーネントに記憶力を与える

ここが一番重要かもしれません。Stateを使うことで、コンポーネントが情報を「覚えて」おけるようになります。

基本的なstateの使い方

import { useState } from "react";

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

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>{count}回クリックされました</button>;
}

ポイント ：

• useState(0) で初期値を設定
• [count, setCount] の形で値と更新関数を取得
• 値を更新するときは setCount() を使う

8. コンポーネント間でのデータ共有

最後に、複数のコンポーネント間でデータを共有する方法です。これが分かると、Reactらしいアプリケーションが作れるようになります！

子コンポーネントから親へデータを「持ち上げる」

// 子コンポーネント
function MyButton({ count, onClick }) {
  return <button onClick={onClick}>{count}回クリックされました</button>;
}

// 親コンポーネント
function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>カウンターが連動します</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

このように、状態を「親コンポーネントに持ち上げる」ことで、複数の子コンポーネント間でデータを共有できます。この手法を 「Lifting State Up（状態の持ち上げ）」 と呼びます。

まとめ：Reactの基本をマスターしよう

今回紹介した7つのポイントは、Reactを使う上での基礎の基礎です：

1. コンポーネント - 再利用可能なUI部品
2. JSX - HTMLライクな記法
3. データ表示 - JavaScriptの値を画面に表示
4. 条件分岐 - 状況に応じた表示切り替え
5. リスト表示 - 配列データの効率的な表示
6. イベント処理 - ユーザー操作への反応
7. State管理 - コンポーネントの状態管理
8. データ共有 - コンポーネント間の情報共有

これらをマスターすれば、基本的なReactアプリケーションは作れるようになります！

次のステップ

基本をマスターしたら、以下のようなトピックに挑戦してみてください：

• React Routerを使ったページ遷移
• APIからのデータ取得（useEffect）
• フォームの作成とバリデーション
• パフォーマンス最適化の基本

いかがでしたか？Reactの世界への第一歩を踏み出せそうでしょうか？もし「ここがわからない」「こんなこともやりたい」などあれば、コメントで教えてくださいね。一緒に学んでいきましょう！

関連する技術記事もぜひチェックしてみてください：