React入門：初心者が最初に知っておくべき10の基本

投稿日 2025年3月12日
著者 HITMARKET
カテゴリーシステム開発
カテゴリーホームページ

Reactは、UI（ユーザーインターフェース）構築のためにFacebook（現Meta）が開発したJavaScriptライブラリです。シンプルで拡張性が高く、多くのWebアプリケーションで採用されています。この記事では、React初心者が最初に知っておくべき10の基本をわかりやすく解説します。

1. Reactとは？

Reactは「コンポーネントベース」のUIライブラリです。アプリケーションを小さな部品（コンポーネント）に分割し、それを組み合わせてページ全体を構築します。

Reactの主な特徴

仮想DOM（Virtual DOM）：効率的な更新を実現
コンポーネントベースの設計：再利用可能なUI部品を作成
宣言的な記述：HTMLのような記法（JSX）でUIを構築

2. 環境構築の基本

Reactの開発環境を構築する最も簡単な方法は、Create React App（CRA）を利用することです。以下のコマンドで新しいReactアプリを作成できます。

bashnpx create-react-app my-app
cd my-app
npm start

これで開発サーバーが立ち上がり、http://localhost:3000でアプリを確認できます。

3. JSXとは？

JSXは、JavaScript内でHTMLのような構文を記述できるReact特有の記法です。JSXを使うと、UIのコードが読みやすくなります。

jsxconst element = <h1>Hello, React!</h1>;

JSXはJavaScriptに変換されるため、条件分岐やループも簡単に記述できます。

4. コンポーネントの基本

Reactアプリはすべてコンポーネントで構成されています。コンポーネントはJavaScript関数で定義され、UIを返します。

基本的なコンポーネントの例

jsxfunction Greeting() {
  return <h1>Hello, World!</h1>;
}

export default Greeting;

これを他のファイルでインポートして使えば、簡単に再利用できます。

5. Props（プロパティ）

Propsは、コンポーネントにデータを渡すための仕組みです。親コンポーネントから子コンポーネントにデータを渡す際に使用します。

jsxfunction Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

使用例

jsx<Greeting name="John" />

6. useStateフック（状態管理）

Reactのコンポーネントは状態（state）を持つことができます。状態を管理するために使われるのがuseStateフックです。

jsximport React, { useState } from 'react';

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

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
    </div>
  );
}

7. useEffectフック（副作用の処理）

useEffectは、コンポーネントのライフサイクルに合わせて副作用（データ取得やイベントリスナーの登録など）を処理するためのフックです。

jsximport React, { useState, useEffect } from 'react';

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => setTime((prev) => prev + 1), 1000);
    return () => clearInterval(interval);
  }, []);

  return <p>経過時間: {time}秒</p>;
}

8. イベント処理

Reactでは、イベントはキャメルケースで指定し、関数を渡します。onClickやonChangeなどがよく使われます。

jsx<button onClick={() => alert('ボタンがクリックされました！')}>クリック</button>

9. コンポーネントの再利用

Reactのコンポーネントは再利用性が高いため、同じUI要素を繰り返し使うことができます。例えば、ボタンやカードデザインなどをコンポーネント化して使い回すことで、コードの保守性が向上します。

10. React Developer Toolsの活用

React開発を効率化するには、React Developer Toolsを活用しましょう。ChromeやFirefoxの拡張機能として提供されており、コンポーネントの状態やプロパティを確認できます。

まとめ

Reactを学ぶ際は、まず基本概念をしっかり理解することが大切です。今回紹介した10の基本を押さえておけば、React開発の土台が固まります。次は、Hooksやルーティング、状態管理ライブラリなど、さらに応用的な内容に挑戦してみましょう。

この記事を書いた人

HITMARKET

記事一覧

ウェブサイト