【保存版】Reactの環境構築からサンプルコードまでを1ファイルにまとめてみた！

2025年6月10日 最終更新日時 : 2025年6月10日 山崎講師山崎講師
icon8

こんにちは。ゆうせいです。

今回は、「Reactを触ってみたいけど、環境構築って難しそう…」という方のために、Reactの開発環境構築とサンプルコードを1つのファイルで完結できる方法を紹介します。

しかも、VSCodeで今すぐ試せる内容です。
では早速はじめましょう！

環境構築の手順（Node.jsインストール済みが前提）

Reactアプリを作るには、基本的に以下の3ステップで完了します。

ステップ1：Reactアプリを作成

npx create-react-app my-app

これはcreate-react-appというテンプレート生成コマンドです。
「my-app」というフォルダが作られ、中にはReactの開発環境一式が入っています。

※npxはNode.jsに付属しているコマンドで、ライブラリを一時的に使う便利な方法です。

ステップ2：フォルダへ移動

cd my-app

ステップ3：アプリを起動！

npm start

数秒待つと、ブラウザが自動で開いて「Reactアプリ」の初期画面が表示されるはずです！

1ファイルで完結：Reactサンプルコード

さて、せっかくなので、Reactの基本的な仕組みがわかる「カウントアップボタン」のサンプルを紹介します。

このコードを、src/App.js に上書きするだけで動作します。

src/App.js のコード全文

import React, { useState } from 'react';
import './App.css';

function App() {
  // 状態（State）を定義。初期値は0
  const [count, setCount] = useState(0);

  // ボタンがクリックされたときの処理
  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>カウントアップアプリ</h1>
      <p>現在のカウント: {count}</p>
      <button onClick={handleClick}>カウント +1</button>
    </div>
  );
}

export default App;

実行イメージ

+--------------------------------+
| カウントアップアプリ           |
| 現在のカウント: 0             |
| [カウント +1] ← ボタン         |
+--------------------------------+

ボタンをクリックするたびに count の値が1ずつ増えていきます。

解説：どこがポイントなのか？

要素内容
useStateReactの状態管理機能。「今の数字がいくつか」を覚えておくための仕組みです
setCount(count + 1)数字を1つ増やす操作です。直接count++とは書かない！
<button onClick=...>イベントハンドラでクリック操作を検知

なぜ1ファイルでいいのか？

実際の開発では複数ファイルに分けることが多いですが、初心者がReactの「流れ」を理解するには、すべてを1ファイルに書いて確認するのが近道です。

あとから、

  • ボタンだけを別ファイルに切り出す
  • スタイルだけCSSファイルに分ける

など、構成を徐々に分割していけばOK！

おまけ：App.css も少し整えたい人向け（任意）

/* src/App.css */
body {
  background-color: #f4f4f4;
  font-family: 'Arial', sans-serif;
}
button {
  padding: 10px 20px;
  font-size: 16px;
}

まとめ：Reactの第一歩は「作って動かす」！

Reactは最初の環境構築でつまずきやすいですが、create-react-appを使えばほんの数分で開発スタートできます。

そして、たった1ファイルでもReactの基本「コンポーネント」「状態管理」「イベント処理」の3本柱を体験できます。

今後の学習ステップ

次のように学ぶのがおすすめです！

  1. useEffectで副作用の処理（API通信など）を学ぶ
  2. コンポーネントの分割とPropsの受け渡し
  3. 状態のリフトアップ（親子コンポーネント間の状態共有）
  4. React Routerで画面の切り替え
  5. 状態管理ライブラリ（Recoil, Redux, Zustand）を試す

「1ファイルで試して、理解してから分けていく」という流れを守れば、どんなに複雑なReactアプリも理解できるようになりますよ！

何かReactの構造をより深く掘り下げたいテーマがあれば、いつでも聞いてください！

セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク

投稿者プロフィール

山崎講師
山崎講師代表取締役
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。
対象読者
山崎講師、新入社員
前の記事
初心者でもわかるReact入門ガイド：Reactとは何か？なぜ使うのか？New!!
2025年6月10日
次の記事
【初心者向け】MySQL Workbenchでオートコミット（Auto Commit）を有効にする方法New!!
2025年6月10日