Viteを使ったReactの環境構築〜初心者でもすぐに始める〜

React環境構築

はじめに

Reactの学習をするにあたって、簡単に環境構築をする方法をまとめる。
ここでは、Viteを使ったReactの環境構築を行う。
また、Node.jsはインストールされている前提とする。

手順1　コマンドを実行する

以下のコマンドを実行することで、プロジェクトの作成が開始される。

npm create vite

コマンドの実行後、いくつかの設定を求められるため、以下の手順のように設定する。

手順2　プロジェクト名の入力

コマンド実行後、プロジェクト名の入力が求められるため、任意のプロジェクト名を入力する。
今回はreact-projectという名前にする。

? Project name: » react-project

手順3　フレームワークの選択

使用するフレームワークの選択が求められるため、選択する。
今回はReactを選択する。

? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

手順4　JavaScriptとTypeScriptの選択

JavaScriptとTypeScriptの選択が求められるため、選択する。
今回は、TypeScriptを選択する。
また、SWCはVercel社が開発しているBabelに代わる新しいコンパイラーのようだが、今回は選択しない。

? Select a variant: » - Use arrow-keys. Return to submit.
>   TypeScript
    TypeScript + SWC
    JavaScript
    JavaScript + SWC

これで、プロジェクトの作成は完了する。
以下は、実際にサーバーを起動するための手順になる。

手順5 パッケージのインストール

プロジェクトが作成されたことを確認後、作成したプロジェクトのディレクトに移動して、パッケージのインストールを行う。

cd react-project
npm install

手順6　サーバーの起動

以下のコマンドを実行すると、サーバの起動が行われる。
サーバに接続し、画面が表示されれば成功。

npm run dev

おわりに

このように簡単にプロジェクトの作成やサーバの起動を行うことができる。
最低限、必要なファイルなどは作成されているため、コードを修正するなどして、開発を行っていく。