ビルドツール「Vite」を使ってReactプロジェクト(.tsx、Typescript)を作る方法

掲題の通り、Viteを使ってReactプロジェクトを作成する方法を記載します。

1. Viteのインストール

まず、Viteのプロジェクトを作成するために、npmやyarnを使ってViteのテンプレートを作成します。

1.1 プロジェクトのディレクトリを作成

ターミナルを開いて、以下のコマンドを実行します。

npm create vite@latest <アプリ名> --template react-ts

--template react-tsとは？
ReactとTypeScriptのセットアップをしてくれるViteのテンプレートです。

使用するフレームワークを選択する

「Select a framework(使用するフレームワークを選んでください)」と表示されるので、「React」を選択します。

使用するVariantを選択する

こちらでは、主にTypescriptもしくはJavascriptを選択する必要があります。
今回は、一番上のTypescriptを選択しましょう。

Rolldown-Viteを使用するか否かを選択

rolldown-vite は、Rust製の高速なJavaScriptバンドラーであるRolldownをViteに統合した実験的なパッケージです。
デフォルトでは、「No」を選択しています。特に理由がなければ「No」のままでよいです。

パッケージnpmを使うか否か選択

パッケージnpmを使用するかどうかを確認するコマンドです。「Yes」を選択しておきましょう。

プロジェクトの作成が開始されます。

下記のように拡張子(.tsx)になりました。

以上。

サイト