React Viteでアプリケーションを実行する
Reactを学習していくために、まずアプリケーションの実行方法を確認します。create-react-appがメンテナンスされていないためviteを使用する方法を確認します。
ちなみに、Reactのドキュメンテーションでは新しいプロジェクトを作成するならReactベースのフレームワークを使用することを薦めています。初心者がReactとフレームワークを一緒に学ぶのは現実的ではないので、学習にはViteを使用することがスタンダードのようです。詳しくは各公式サイトをご確認ください。
それではViteを使用したReactアプリケーションの実行方法を確認していきましょう。
Node.jsをインストール
Javascriptの実行環境であるNode.jsをインストールしておく必要があります。公式サイトでLTS版をインストールすれば問題ありません。
インストールできていればシェルでnodeとnpmのバージョンを確認できます。私の場合はOSがWindowsなので PowerShell 7を使用します。
npmは Node Package Manager の略でパッケージを管理するツールです。Node.jsと一緒にインストールされます。
ViteでのReactプロジェクトの作成・アプリケーションの実行
それでは任意のフォルダ内にReactプロジェクトを作成します。シェルで下記コマンドを実行します。
npm create vite@latest
プロジェクト名を聞かれるので今回は react-project とします。framework は React を選択し、 variant は Javascript を選択します。
下記コマンドでフォルダに移動します。
cd react-project
下記コマンドで必要なパッケージをインストールし、開発用サーバーを起動します。
npm install
npm run dev
ブラウザで http://localhost:5173/ にアクセスするとアプリケーションが実行されているのが確認できます。
Reactアプリケーションの実行方法が確認できました。