環境構築

Reactを始める前に、まず開発環境を整えましょう。Laravelを使ったことがあれば、composer create-project でプロジェクトを作った経験があるはずです。Reactでも似たような流れで、コマンド一発でプロジェクトの雛形が作れます。

Node.jsのインストール確認

ReactはNode.jsの上で動作するツールチェーンを使います。まずはNode.jsが入っているか確認しましょう。

node --version
npm --version

それぞれバージョン番号が表示されればOKです。Node.js 18以上を推奨します。

Viteでプロジェクトを作成する

ReactプロジェクトのセットアップにはViteを使います。ViteはLaravelのViteインテグレーション（vite.config.js）でも使われているビルドツールなので、名前には馴染みがあるかもしれません。

ターミナルで作業したいディレクトリに移動して、以下のコマンドを実行してください。

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

コマンドの意味を分解するとこうなります：

• npm create vite@latest — Viteの最新版を使ってプロジェクトを作成する
• my-react-app — 作成するフォルダ名（好きな名前でOK）
• -- --template react — テンプレートとしてReactを指定する

実行すると次のような出力が表示されます：

Scaffolding project in ./my-react-app...

Done. Now run:

  cd my-react-app
  npm install
  npm run dev

指示どおりにコマンドを実行しましょう。

cd my-react-app
npm install
npm run dev

npm install はLaravelでいう composer install に相当します。package.json に書かれた依存パッケージをすべてインストールします。

npm run dev を実行すると開発サーバーが起動します。

  VITE v5.x.x  ready in 300 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

ブラウザで http://localhost:5173 を開いてみてください。

localhost:5173

プロジェクト構造を理解する

作成されたフォルダの中身を見てみましょう。

my-react-app/
├── public/          # 静的ファイル（favicon など）
├── src/             # ここにソースコードを書く
│   ├── assets/      # 画像などのアセット
│   ├── App.css      # App コンポーネントのスタイル
│   ├── App.jsx      # メインのコンポーネント ← まずここを触る
│   ├── index.css    # グローバルスタイル
│   └── main.jsx     # アプリのエントリーポイント
├── index.html       # HTMLのテンプレート
├── package.json     # 依存関係の定義（composer.json に相当）
└── vite.config.js   # Viteの設定

LaravelのMVCと比べると感覚がつかみやすいかもしれません。index.html が唯一のHTMLファイルで、そこに main.jsx が読み込まれ、App.jsx がレンダリングされるという流れです。

main.jsx を見てみる

// src/main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

// id="root" の要素にReactアプリをマウントする
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

index.html を開くと <div id="root"></div> という空のdivがあります。Reactはここを起点にして、JavaScriptでHTMLを動的に生成します。これをSPA（シングルページアプリケーション）と呼びます。

App.jsx を見てみる

// src/App.jsx
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

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

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

JavaScriptの関数の中にHTMLのようなコードが書かれています。これが JSX です。次のチャプターで詳しく説明しますが、まずは「関数がHTMLを返している」という大まかなイメージをつかんでおけば十分です。

はじめてのApp.jsx編集

では実際に画面を変えてみましょう。src/App.jsx を開いて、内容をすべて削除し、次のコードに書き換えてみてください。

// src/App.jsx
function App() {
  return (
    <div>
      <h1>はじめてのReact</h1>
      <p>環境構築ができました！</p>
    </div>
  )
}

export default App

ファイルを保存すると、ブラウザが自動でリロードされて画面が変わるはずです。これがホットリロードの威力です。

function App() {
  return (
    <div>
      <h1>こんにちは、山田太郎です</h1>
      <p>Reactの勉強を始めました！</p>
    </div>
  )
}

export default App

まとめ

お疲れさまでした！このチャプターでは：

• Node.jsとnpmの確認をした
• npm create vite@latest でReactプロジェクトを作成した
• プロジェクトの構造（main.jsx、App.jsx の役割）を理解した
• 開発サーバーを起動してブラウザで確認した
• App.jsx を編集して画面を変更した

次のチャプターでは、このHTMLっぽいコード（JSX）の仕組みをしっかり理解していきます。