Reactプロジェクトの作成｜create-react-appで始める

Reactは、Meta（旧Facebook）が開発したJavaScriptライブラリで、ユーザーインターフェースの構築に広く使われています。ここでは、Reactプロジェクトをcreate-react-appを使って作成し、開発を始めるまでの手順を解説します。

基本的な使い方

Step 1事前準備：Node.jsのインストール

Reactの開発にはNode.jsが必要です。Node.jsにはnpm（Node Package Manager）というパッケージ管理ツールが付属しており、Reactの作成コマンドもnpmを通じて実行します。

まだインストールされていない方はNode.js公式サイトからLTS版をダウンロードしてインストールしてください。

インストール後、以下のコマンドでバージョンを確認できます。

node -v
npm -v

バージョン番号が表示されればインストール完了です。

Step 2Reactプロジェクトの作成

ターミナル（コマンドプロンプト）でプロジェクトを作成したいフォルダに移動し、以下のコマンドを実行します。

npx create-react-app my-app

my-appの部分は任意のプロジェクト名に変更できます。このコマンドを実行すると、指定した名前のフォルダが作成され、React開発に必要なファイルや設定が自動的に生成されます。

Step 3開発サーバーの起動

プロジェクトが作成されたら、プロジェクトフォルダに移動して開発サーバーを起動します。

cd my-app
npm start

実行するとブラウザが自動的に開き、http://localhost:3000にReactのデフォルトページが表示されます。Reactのロゴが回転するページが表示されれば成功です。

開発サーバーにはホットリロード機能があり、コードを変更して保存するとブラウザが自動的にリロードされ、変更内容が即座に反映されます。

Step 4プロジェクトの基本構造

作成されたプロジェクトには以下のようなファイル・フォルダが含まれています。

my-app/
├── node_modules/    # インストールされたパッケージ
├── public/
│   ├── index.html   # HTMLテンプレート（エントリーポイント）
│   └── favicon.ico  # ファビコン
├── src/
│   ├── App.js       # メインコンポーネント
│   ├── App.css      # Appコンポーネント用CSS
│   ├── index.js     # JavaScriptエントリーポイント
│   └── index.css    # グローバルCSS
├── package.json     # 依存関係・スクリプト定義
└── README.md        # プロジェクトの説明

開発時に主に編集するのはsrc/フォルダ内のファイルです。App.jsがメインのコンポーネントで、ここにアプリケーションの表示内容を記述します。public/index.htmlはHTMLのテンプレートで、Reactが生成した内容がid="root"の要素に挿入されます。

Step 5よく使うnpmコマンド

React開発で頻繁に使用するコマンドを紹介します。

# 開発サーバーの起動
npm start

# プロダクションビルドの作成
npm run build

# テストの実行
npm test

# パッケージの追加（例：axiosライブラリ）
npm install axios

npm run buildを実行すると、build/フォルダに最適化されたファイルが生成されます。本番環境にデプロイする際はこのビルドファイルを使用します。

まとめ