Reactのインストール方法を初心者でも分かりやすく解説

フロントエンド開発•2025/1/26

はじめに

皆さんはWebアプリやシングルページアプリケーションと呼ばれるものに興味を持ったことはありませんか。そういったものを作るときに役立つのが、React です。これはユーザーインターフェースを効率的に作るためのライブラリで、企業の現場でも多く使われています。

ここでは、Reactをインストールするために必要な知識を初心者向けにまとめています。パソコンに特別なソフトをたくさん入れる必要はありませんが、いくつかの前提があるので確認していきましょう。 Reactの基本的な使い方を理解できるよう、手順やポイントを分かりやすく紹介します。

この記事を読むとわかること

Reactを動かすために準備すべきこと
実際にインストールする手順
開発用サーバーの起動と簡単な画面表示の手順
実務でReactがどのように活用されているかのイメージ

初めてReactに触れる方でも理解しやすいよう、順番に説明していきます。

Reactを使うために必要な前提知識

Reactを使うためには、あらかじめ Node.js と npm がインストールされていることが望ましいです。 Node.jsはサーバーサイドでJavaScriptを動かすための環境ですが、Reactの開発でもよく使います。そしてnpmはNode.jsに付属しているパッケージ管理ツールで、Reactのようなライブラリをインストールするときに便利です。

また、コマンドライン で基本的な操作ができるとスムーズです。「cd」コマンドでフォルダを移動したり、「npm install」でパッケージを入れたりするのがメインなので、難しい操作はあまりありません。ほかに特別な開発ツールやエディタは必須ではありませんが、VS Codeなどのエディタを使うとプログラムが書きやすくなります。

プログラミング経験がまったくない方でも問題はありません。基本的にはJavaScriptを書いてブラウザに表示する流れなので、まずはこの手順を一通り試してみると全体像をつかめるはずです。 Reactそのものは設定を細かくいじらなくても、すぐに動かせる仕組みが整っているので安心してください。

Reactのインストール手順

Node.jsやnpmの準備

最初に、Node.jsが使える状態かどうかをチェックしてみましょう。ターミナルやコマンドプロンプトを開いて、以下のように入力します。


node -v

バージョン番号が表示されれば、Node.jsはすでに導入されています。もし「command not found」や「'node' は～」といったエラーが出る場合は、公式サイトからインストールしてください。 Node.jsのインストールが終わると、自動的にnpmも使えるようになります。 npmのバージョンは以下のコマンドで確認可能です。


npm -v

ここでもバージョン番号が表示されればOKです。 npmはReactのライブラリを取得するときに使うので、合わせて確認しておきましょう。

空のプロジェクトフォルダを作る

Reactをインストールするために、まずはフォルダを1つ準備します。適当な場所に「react-tutorial」といった名称のフォルダを作りましょう。次に、そのフォルダの中に移動します。


cd react-tutorial

この中でReact関連のファイルを管理していきます。パソコンのどこに作っても問題ありませんが、わかりやすいところにフォルダを置くと混乱しにくいです。

パッケージマネージャを初期化する

新しいフォルダを作ったら、以下のコマンドでnpmの設定ファイルを作成します。


npm init -y

これを実行すると、「package.json」というファイルが自動で生成されます。このファイルには、インストールしたライブラリの情報などが保存されます。開発で使うReactや、その他の便利なツールをまとめて管理してくれる役割があるのです。

ReactとReact DOMをインストールする

次に、React本体と関連ライブラリをインストールしましょう。フォルダ内で以下のコマンドを実行します。


npm install react react-dom

これでReactを使うための基本ライブラリがプロジェクトに入りました。 React DOMはブラウザ上でReactコンポーネントを操作するときに必要になります。セットでインストールしておくと、Reactの画面表示を簡単に試せます。

パッケージ名にスペルミスがあるとインストールがうまくいかないことがあります。入力間違いがないか、念のためチェックしてみてください。

これでReact関連の準備はひとまず完了です。あとはアプリを構成するための設定ファイルやコードを少し書き足すと、動く状態になります。

ちょっと試してみる：簡単な画面表示

WebpackやBundlerを使う方法

Reactのプログラムをブラウザで動かすには、複数のファイルをまとめたり変換したりするツールがよく使われます。 WebpackやViteと呼ばれるツールが代表的ですが、ここではほんの一例としてViteを使った最小構成を紹介します。

Viteを用いた初期セットアップ

空のプロジェクトフォルダで、以下を実行します。


npm create vite@latest my-app -- --template react

ここで「my-app」という名前のフォルダが作成され、その中にReact用のひな形がセットアップされます。完了したら新しいフォルダに移動して、依存関係をインストールしてください。


cd my-app
npm install

インストールが終わると、Reactの初期構成ができあがります。あとは開発サーバーを起動するだけです。


npm run dev

これでローカル開発用のサーバーが起動し、ブラウザで表示できます。もしエラーが出なければ、Reactのデモ画面がすぐに表示されるはずです。

コード例：簡単なReactコンポーネント

Viteのテンプレート内の「App.jsx」などにある、Reactコンポーネントの一例です。


import React from "react";

function App() {
  return (
    <div>
      <h1>Hello React</h1>
      <p>初めてのReactコンポーネントです。</p>
    </div>
  );
}

export default App;

これはHTMLに近い書き方でコンポーネントを作る例です。 function App() { ... }がコンポーネントの本体で、画面に表示したい要素をreturnの中に書きます。これだけでブラウザに文字や要素が表示されるので、最初は驚くかもしれません。

実務での活用シーン

Reactは、単に画面を表示するだけでなく、ユーザーが入力したデータを処理したり、サーバーと通信したりする仕組みも簡単に作れます。例えば実務では次のようなシーンで活用されています。

インタラクティブな操作が多いWebアプリ

予約管理システムやタスク管理アプリなど、画面がこまめに変化してユーザー入力が頻繁にあるシステムにReactが使われることが多いです。部分的な変更が必要なときに効率良く画面を更新できるため、メンテナンスが楽になるのがポイントです。

チーム開発での保守・拡張

大規模なチームでWebアプリを開発するときは、部品を細かく分割して管理します。 Reactのコンポーネント指向は、UIの各パーツを独立した形で定義できるので、誰がどの部分を担当しているかが分かりやすくなります。また、後から拡張したい場合も、既存のコードを大きく変えずに新しい機能を追加することができます。

デザインとの協力

デザイナーが作ったレイアウトをもとに、実際の画面を細かいパーツに分けて実装していく場合があります。 Reactコンポーネントでパーツを管理すると、複数のメンバーが同時に作業していてもコンフリクトが起こりにくくなります。見た目だけを切り替えるコンポーネントや、入力チェックを行うコンポーネントなど、役割ごとに整理できるのです。

Reactを使ったプロジェクトでは、アプリの一部だけを置き換えていく方法もよくとられます。既存のコードをすべて捨てる必要はないので、部分的に導入して様子を見られる点が実務で採用されやすい理由の一つです。

まとめ

ここまで、Reactのインストール から基本的なコードの動作確認まで見てきました。初心者の皆さんにとって、Reactは最初の設定だけが少し複雑に感じるかもしれません。しかし、Node.jsとnpmを準備してしまえば、あとはコマンドの手順に沿って進めるだけです。ちょっとしたコンポーネントを動かすところから始めると、Reactの仕組みがだんだん理解しやすくなります。

また、実務ではチーム開発との相性や保守のしやすさが大きな利点として挙げられます。最初は小さな画面から始めて、少しずつアプリを拡張していけば、学習の負担も減らせるでしょう。 Reactをスムーズに取り入れて、Webアプリの開発を楽しんでみてはいかがでしょうか。