Reactの基本知識をゼロから学ぶハンズオン学習

環境構築

1. Visual Studio Code
2. Node.js
3. Vite + react のプロジェクト作成
4. react-router-dom

本サイトは、TypeScript で実装していきます。

1. Visual Studio Code

Visual Studio Codeのインストーラ媒体を使用し、インストーラの指示に従ってインストールを行います。
公式サイト： https://code.visualstudio.com

2. Node.js

2-1. Node.jsのインストール

① Node.jsのインストーラ媒体を使用し、インストーラの指示に従ってインストールを行います。
公式サイト：https://nodejs.org/ja/download

② Node.jsをインストールできたか確認します。
VSCodeのターミナルを起動し、以下のコマンドを叩きます。

node --version

以下のNode.jsのバージョンが表示できれば、インストールが完了です。
※このバージョンは、インストールを行なったバージョンによって異なります。

> node --version
v22.13.0

2-2. npmコマンドのバージョン確認

npmコマンドは、Node.jsのインストールと同様にインストールされます。
以下のコマンドを叩き、バージョンを確認してみます。

npm --version

以下のNode.jsのバージョンが表示できれば問題ありません。

> npm --version
10.9.2

3. Vite + react のプロジェクト作成

① VSCodeで作業を行うフォルダを作成します。

② VSCodeでこのフォルダを開きます。

③ VSCodeのターミナルで以下のコマンドを叩きます。

npm create vite@latest react-demo -- --template react-ts

react-demoの部分ですが、プロジェクト名を指します。そのため、任意の名称を指定でき、ここではreact-demoとします。
※以下のメッセージが表示された場合は、追加のインストールを行うため、「y」を入力し、Enterを押下します。

Need to install the following packages:
create-vite@6.2.0
Ok to proceed? (y)

④ ターミナルに以下のコマンドを行うように指示されるので、コマンドを叩きます。

cd react-demo
npm install
npm run dev

⑤ package.jsonが直下にあるフォルダまで移動します。

cd react-demo

⑥ パッケージをインストールします。

npm install

⑦ プロジェクトの作成が完了しました。
サーバーを起動してみます。

npm run dev

以下の画像のように、URLが表示されたら、ブラウザでアクセスしていきます。

デフォルトの画面が表示されます。

サーバーを停止するには、「control」と「」を同時に押下します。

4. react-router-dom

4-1. react-router-dom のインストール

react-router-domは、npm installでインストールできるパッケージ以外に、Reactのルーティング機能を提供します。
以下のコマンドを叩きます。（サーバーが起動している場合は、停止した後）

npm install react-router-dom@7.1.5

4-2. ルーティングの実装

react-router-domを用いてルーティングを実装していきます。
① srcフォルダの配下にroutesフォルダを作成し、その配下にroute.tsxファイルを作成します。

② route.tsxファイルでは、react-router-dom とルーティングしたい画面をインポートし、json形式で画面のパスを定義します。
route.tsx

import { createBrowserRouter } from "react-router-dom";
import App from "../App";

export const route = createBrowserRouter([
    {
        path: "/",
        element: <App />
    },
]);

③ 続いて、main.tsxでルーティングの実装を行います。
main.tsxでは、react-router-dom と route.tsxファイルをインポートします。
main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import { RouterProvider } from 'react-router-dom'
import { route } from './routes/route'


createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <RouterProvider router={route} />
  </StrictMode>,
)

<RouterProvider router={route} /> により、ルーティングファイルを元にルーティングを行い、画面を表示するようになります。

4-3. 画面の追加

ルーティングファイルへのパスを定義することにより、新たな画面を表示することができます。
① 新規に追加する画面のファイルとして、srcフォルダの配下にtsxファイルを作成します。
ここでは、demo1.tsx としています。

② ルーティングファイルであるroute.tsxファイルに、新規に追加する画面のファイルのパスを追加します。
route.tsx

import { createBrowserRouter } from "react-router-dom";
import App from "../App";
import Demo1 from "../routes/demo1";

export const route = createBrowserRouter([
    {
        path: "/",
        element: <App />
    },
    {
        path: "/demo1",
        element: <Demo1 />,
    },
]);

これにより、http://localhost:5174/demo1 のパスでアクセスすることができます。
※ demo1.tsxには、exportを行うコードが記述されていないので、inportの部分でエラーが生じます。