Vite で React + TypeScript 開発環境を構築する方法

当ページのリンクには広告が含まれている可能性があります。

Vite で React + TypeScript 開発環境を構築する方法を解説します。

目次

▼ IT系の本が無料で読める!?

Kindle UnlimitedではITに関する多くの本が無料で読めます。

>>Kindle Unlimitedでどのような本が無料で読めるのか見てみる

さらにKindle Unlimitedを初めてご利用の方は、30日間無料体験が可能です。

※時期により、30日間無料体験が終了している可能性がありますので、公式サイトをご確認ください。

React + TypeScript プロジェクトの作成

以下のコマンドを実行し、Node.jsとnpmが使えることを確認します。

node -v
npm -v


以下のコマンドを実行し、React + TypeScript プロジェクトを作成していきます。

npm create vite@latest プロジェクト名


「React」を選択します。


「TypeScript + SWC」を選択します。


これでReact + TypeScript プロジェクトが作成されました。

npmパッケージのインストール

以下のコマンドを実行し、作成したディレクトリに移動します。

cd プロジェクト名
code .


以下のコマンドを実行し、package.jsonに設定されたパッケージをインストールします。

npm i

Reactを動かしてみる

以下のコマンドを実行し、Reactを動かしてみます。

npm run dev


表示されている「http://localhost:5173」を開くと、以下の画面(index.html)が表示されます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

▼ IT・Web転職サービスなら【レバテックキャリア】


目次