[初心者]React × Viteで環境構築

はじめに

この記事では、React というライブラリと、Vite という開発ツールを使ってアプリ開発を行うための環境構築についてまとめています。

開発に必要なもののインストール

まずはNode.jsがインストールされていることを確認しましょう。

bash

node -v
npm -v

コマンドを実行してバージョンが表示されればOKです。表示がなければNode.js公式サイトからインストールしてください。

ViteでReactアプリを作成

以下のコマンドでプロジェクトを作成します。

bash

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

my-react-appの部分は好きなプロジェクト名に変えて大丈夫です。

依存関係をインストール

作成したプロジェクトフォルダに移動します。

bash

cd my-react-app

必要なパッケージをインストール

bash

npm install

これで、ReactとViteに必要なパッケージがインストールされます。

開発サーバーを起動

プロジェクトが作成出来たら、開発サーバーを起動してブラウザで確認します。

bash

npm run dev

ブラウザを開いてReactの初期画面が表示されたら成功です。

まとめ

これでReact + Viteの環境構築の完成です。
以下、手順のおさらい

1. Node.jsのインストール
2. ViteでReactのプロジェクトを作成
3. 必要なパッケージをインストール
4. 開発サーバーを起動