【初心者向け】Reactのはじめ方｜環境構築から最初のコンポーネント表示まで一緒にやってみよう

2026年6月16日

React

目次 [ close ]

はじめに

「Reactって名前はよく聞くけど、どこから手をつければいいの？」

そんなふうにモヤモヤしていませんか？ Reactは世界中で使われている人気のフロントエンドライブラリですが、最初の環境構築でつまずいてしまって、本題に入る前に挫折してしまう方も多いんです。もったいないですよね。

この記事では、パソコンにReactの開発環境を作って、画面に「Hello React!」を表示するところまでを、一つずつ一緒にやっていきます。読み終わるころには、自分の手でReactアプリを起動して、最初のコンポーネントを書き換えられるようになっていますよ。さっそく始めましょう！

そもそもReactって何？

Reactをひとことで言うと、「画面（UI）を効率よく作るためのJavaScriptのライブラリ」です。Facebook（現Meta）が開発し、いまも多くのWebサービスで使われています。

最大の特徴は コンポーネント という考え方です。ボタン・ヘッダー・カードといった画面のパーツを「部品」として作り、それを組み合わせてページを完成させます。

💡 レゴブロックをイメージすると分かりやすいです。小さな部品（コンポーネント）を組み合わせて、大きな作品（Webページ）を作るイメージですね。

同じ部品を使い回せるので、コードがスッキリして修正もラクになる。これがReactが選ばれる大きな理由です。

準備するもの（前提）

始める前に、2つだけ用意があります。

Node.js … ReactをパソコンでビルドするためのJavaScript実行環境
コードエディタ … VS Code が定番でおすすめです

Node.jsが入っているかは、ターミナル（Macなら「ターミナル」、Windowsなら「コマンドプロンプト」）で次のコマンドを打つと確認できます。

node -v

v20.11.0 のようにバージョンが表示されればOKです。「command not found」と出たら、まだ入っていないので Node.js公式サイトから「LTS版」をインストールしておきましょう。

Viteを使ってReactプロジェクトを作る

Reactのプロジェクトを作る方法はいくつかありますが、いま一番おすすめなのが Vite（ヴィート） です。動作がとても速く、初心者でも迷わず始められます。

ターミナルで、プロジェクトを置きたいフォルダに移動してから、次のコマンドを実行します。

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

my-react-app の部分が、これから作るアプリの名前（フォルダ名）になります。好きな名前でOKです。

コマンドが終わったら、案内に従って次の3つを順番に実行しましょう。

cd my-react-app
npm install
npm run dev

cd my-react-app … 作ったフォルダの中に移動します
npm install … 必要な部品（ライブラリ）をまとめてダウンロードします
npm run dev … 開発用サーバーを起動します

うまくいくと、ターミナルに http://localhost:5173/ のようなURLが表示されます。ブラウザでそのURLを開いてみてください。Reactのロゴが回っている初期画面が出てきたら、環境構築は成功です🎉

⚠️ つまずきポイント：npm create vite@latest の途中で枠組み（フレームワーク）を聞かれた場合は「React」、言語を聞かれたら「JavaScript」を選べばOKです。最初はTypeScriptより素のJavaScriptのほうが学びやすいですよ。

最初のコンポーネントを書き換えてみよう

環境ができたら、いよいよ自分の手でコードを触ってみましょう。VS Codeで my-react-app フォルダを開き、src/App.jsx というファイルを探してください。

中身をいったん全部消して、次のコードに書き換えてみましょう。

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

export default App;

保存（Ctrl + S / Cmd + S）すると、ブラウザを再読み込みしなくても画面が自動で更新され、「Hello React!」と表示されるはずです。この即座に反映される快適さも、Viteを使う嬉しいポイントです。

ここでひとつ、初心者の方が必ず気になるポイントを説明しておきますね。HTMLそっくりの記述が、JavaScriptファイルの中に書かれていますよね。これは JSX という、Reactで画面を書くための特別な書き方です。「JavaScriptの中にHTMLっぽく書ける便利な記法」くらいの理解で、最初は十分です。